[前端笔记——多媒体与嵌入] 7.嵌入技术+位图、矢量图+响应式图片

1.嵌入技术

可以在网页中嵌入各种内容类型的元素：<iframe>, <embed> 和 <object> 元素。<iframe>用于嵌入其他网页，另外两个元素则允许你嵌入 PDF，SVG，甚至 Flash。

1.1 Iframe 详解

<iframe> 元素旨在将Web第三方内容嵌入到当前文档中。

<iframe src="https://developer.mozilla.org/zh-CN/docs/Glossary"
        width="100%" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p> <a href="https://developer.mozilla.org/zh-CN/docs/Glossary">
    Fallback link for browsers that don't support iframes
  </a> </p>
</iframe>

此示例包括使用以下所需的 基本要素：

• allowfullscreen
  如果设置，<iframe>则可以通过全屏 API 设置为全屏模式（稍微超出本文的范围）。
• frameborder
  如果设置为 1，则会告诉浏览器在此框架和其他框架之间绘制边框，这是默认行为。0 删除边框。不推荐这样设置，因为在 CSS 中可以更好地实现相同的效果。border: none;
• src
  该属性与 <video> 元素表示文档中的图像。<img>一样包含指向要嵌入文档的 URL 路径。
• width 和 height
  这些属性指定想要的 iframe 的宽度和高度。

备选内容
与 <video> 等其它类似元素相同，你可以在 <iframe></iframe> 标签之间包含备选内容，如果浏览器不支持 <iframe>，将会显示备选内容，这种情况下，我们已经添加了一个到该页面的链接。现在几乎不可能遇到任何不支持 <iframe> 的浏览器。

sandbox
该属性需要在已经支持其它 <iframe> 功能（例如 IE 10 及更高版本）但稍微更现代的浏览器上才能工作，该属性可以提高安全性设置。

备注： 为了提高速度，在主内容完成加载后，使用 JavaScript 设置 iframe 的 src 属性会更好。这会使页面可以更快地被使用，并减少官方页面加载时间（重要的 SEO 指标）。

1.2 安全隐患

使用<iframe>元素会有安全隐患，这里提出几个减少隐患的方法：

1. 只有在必要时嵌入；
2. 使用 HTTPS: HTTPS 是 HTTP 的加密版本。HTTPS 减少了远程内容在传输过程中被篡改的机会，HTTPS 防止嵌入式内容访问你的父文档中的内容，反之亦然。
3. 始终使用 sandbox 属性：一个允许包含在其里的代码以适当的方式执行或者用于测试，但不能对其他代码库（意外或恶意）造成任何损害的容器称为沙盒。
   未沙盒化（Unsandboxed）内容可以做得太多（执行 JavaScript，提交表单，弹出窗口等）。默认情况下应该使用没有参数的 sandbox 属性来强制执行所有可用的限制，如果绝对需要，可以逐个添加权限（sandbox=""属性值内）。
4. 配置 CSP 指令：CSP 代表 内容安全策略，它提供一组 HTTP 标头（由 web 服务器发送时与元数据一起发送的元数据），旨在提高 HTML 文档的安全性。以阅读 Frederik Braun 的帖子在 X-Frame-Options 安全性标头上来获取有关此主题的更多背景信息。

1.3 <embed> 和 <object> 元素

<embed> 和 <object> 元素的功能不同于 <iframe>——这些元素是用来嵌入多种类型的外部内容的通用嵌入工具，其中包括像 Java 小程序和 Flash，PDF（可在浏览器中显示为一个 PDF 插件）这样的插件技术，甚至像视频，SVG 和图像的内容。

然而，嵌入技术在近几年来一直没有被使用；由于许多原因，Flash 不再受欢迎；PDF 更倾向于被链接而不是被嵌入；其他内容，如图像和视频都有更优秀、更容易元素来处理。

针对插件的情况
对于大多数应用程序，现在大多都停止依赖插件传播内容，开始利用 Web 技术了。

2.位图、矢量图

• 位图使用像素网格来定义 — 一个位图文件精确得包含了每个像素的位置和它的色彩信息。流行的位图格式包括 Bitmap (.bmp), PNG
  (.png), JPEG (.jpg), and GIF (.gif.)

• 矢量图使用算法来定义 — 一个矢量图文件包含了图形和路径的定义，电脑可以根据这些定义计算出当它们在屏幕上渲染时应该呈现的样子。 SVG
  格式可以让我们创造用于 Web 的精彩的矢量图形。

当你放大网页的时候，区别就会变得明显起来 — 随着你的放大，PNG 图片变得像素化了，因为它存储是每个像素的颜色和位置信息 — 当它被放大时，每个像素就被放大以填满屏幕上更多的像素，所以图像就会开始变得马赛克感觉。矢量图像看起来仍然效果很好且清晰，因为无论它的尺寸如何，都使用算法来计算出图像的形状，仅仅是根据放大的倍数来调整算法中的值。

2.1 SVG是什么？

SVG 是用于描述矢量图像的XML语言。它基本上是像 HTML 一样的标记，只是有许多不同的元素来定义要显示在图像中的形状，以及要应用于这些形状的效果。SVG 用于标记图形，而不是内容。非常简单，有一些元素来创建简单图形，如<circle> 和<rect>。更高级的 SVG 功能包括 <feColorMatrix>（使用变换矩阵转换颜色）<animate> （矢量图形的动画部分）和 <mask>（在图像顶部应用模板）。

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="black" />
  <circle cx="150" cy="100" r="90" fill="blue" />
</svg>

优点：

矢量图像中的文本仍然可访问（这也有利于 SEO）。SVG 可以很好地适应样式/脚本，因为图像的每个组件都是可以通过 CSS 或通过JavaScript 编写的样式的元素。

缺点：

SVG 非常容易变得复杂，这意味着文件大小会增加; 复杂的 SVG 也会在浏览器中占用很长的处理时间。SVG可能比栅格图像更难创建，具体取决于尝试创建哪种图像。旧版浏览器不支持 SVG，因此如果需要在网站上支持旧版本的 IE，则可能不适合（SVG从 IE9 开始得到支持）。

2.2 将SVG添加到页面

要通过 <img>元素嵌入 SVG，只需要按照预期的方式在 src 属性中引用它。还需要一个height或width属性（也可不指定）。

<img
    src="equilateral.svg"
    alt="triangle with all three sides equal"
    height="87px"
    width="100px" />

优点：

快速，熟悉的图像语法与alt属性中提供的内置文本等效。可以通过在<a>元素嵌套<img>，使图像轻松地成为超链接。

缺点：

无法使用 JavaScript 操作图像。如果要使用 CSS 控制 SVG 内容，则必须在 SVG 代码中包含内联 CSS 样式。 （从SVG 文件调用的外部样式表不起作用）不能用 CSS 伪类来重设图像样式（如:focus）。

对于不支持 SVG（IE 8 及更低版本，Android 2.3 及更低版本）的浏览器，可以从src属性引用 PNG 或 JPG，并使用srcset属性 只有最近的浏览器才能识别）来引用 SVG。在这种情况下，仅支持浏览器将加载 SVG - 较旧的浏览器将加载 PNG：

<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">

还可以使用 SVG 作为 CSS 背景图像，如下所示。在下面的代码中，旧版浏览器会坚持他们理解的 PNG，而较新的浏览器将加载 SVG：

background: url("fallback.png") no-repeat center;
background-image: url("image.svg");
background-size: contain;

像上面描述的<img>方法一样，使用 CSS 背景图像插入 SVG 意味着它不能被 JavaScript 操作，并且也受到相同的 CSS 限制。如果 SVG 根本没有显示，可能是因为的服务器设置不正确。

还可以在文本编辑器中打开 SVG 文件，复制 SVG 代码，并将其粘贴到 HTML 文档中 - 这有时称为将SVG 内联或内联 SVG。示例：

<svg width="300" height="200">
    <rect width="100%" height="100%" fill="green" />
</svg>

优点

将 SVG 内联减少 HTTP 请求，可以减少加载时间。可以为 SVG 元素分配class和id，并使用 CSS 修改样式，无论是在 SVG中，还是 HTML 文档中的 CSS 样式规则。实际上，可以使用任何 SVG 外观属性 作为 CSS 属性。 内联 SVG 是唯一可以在SVG 图像上使用 CSS 交互（如:focus）和 CSS 动画的方法（即使在常规样式表中）。 可以通过将 SVG标记包在<a>元素中，使其成为超链接。

缺点

这种方法只适用于在一个地方使用的 SVG。多次使用会导致资源密集型维护（resource-intensive maintenance）。
额外的 SVG 代码会增加 HTML 文件的大小。 浏览器不能像缓存普通图片一样缓存内联 SVG。 可能会在<foreignObject>元素中包含回退，但支持 SVG 的浏览器仍然会下载任何后备图像。

如何使用 <iframe> 嵌入 SVG？可以在浏览器中打开 SVG 图像，就像网页一样：

<iframe src="triangle.svg" width="500" height="500" sandbox>
    <img src="triangle.png" alt="Triangle with three unequal sides" />
</iframe>

但这种方法有缺点：

iframe有一个回退机制，如果浏览器不支持iframe，则只会显示回退。
除非 SVG 和当前的网页具有相同的origin，否则不能在主页面上使用 JavaScript 来操纵 SVG。

3.响应式图片

关于响应式图片——如何在不同的屏幕尺寸、分辨率或具有其他类似特性的设备上都呈现良好的图片？

3.1 分辨率切换：不同的尺寸

我们想要显示相同的图片内容，依据设备来决定显示得更大或更小.标准的 <img> 元素传统上只允许给浏览器指定唯一的资源文件。我们可以使用两个新的属性——srcset 和 sizes——来提供更多额外的资源图像和提示，帮助浏览器选择合适的一个资源。

<img
  srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,
         800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy" />

srcset 和 sizes 属性看起来很复杂，但是如果你按照上图所示进行格式化，那么他们并不是很难理解，每一行有不同的属性值。每个值都包含逗号分隔的列表，列表的每一部分由三个子部分组成：

srcset 定义了浏览器可选择的图片设置以及每个图片的大小，每张图片信息的设置和前一个用逗号隔开，每个设置要写：

一个文件名（elva-fairy-480w.jpg）
一个空格
图片的固有宽度（以像素为单位）（480w）。注意，这里使用宽度描述符> w，而非你可能期望的 px。图片的固有宽度 (en-US)是它的真实大小，可以通过检查你电脑上的图片文件找到。

sizes 定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择——这就是我们之前提到的提示。上面的示例中，在每个逗号之前，我们写：

一个媒体条件（(max-width:600px)）一个媒体条件描述了一种屏幕可能处于的状态。上面示例中，我们说“当视口的宽度小于等于 600px 时”。
一个空格 当媒体条件为真时，图像将填充的槽的宽度（480px）。

有了这些属性后，浏览器会：

检查设备宽度 ；
检查 sizes 列表中哪个媒体条件是第一个为真 ；
查看给予该媒体查询的槽大小 ；
加载 srcset 列表中引用的最接近所选的槽大小的图像。

3.2 分辨率切换：相同的尺寸，不同的分辨率

如果要支持多分辨率显示，但希望每个人在屏幕上看到的图片的实际尺寸是相同的，可以使用 srcset 结合 x 语法——一种更简单的语法——而不用 sizes，来让浏览器选择合适分辨率的图片。

<img srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg"
     alt="Elva dressed as a fairy" />

img {
  width: 320px;
}

在这种情况下，就不用到 sizes 属性——浏览器计算出正在显示的显示器的分辨率，然后显示 srcset 引用的最适合的图片。因此，如果访问页面的设备具有标准/低分辨率显示，用一个设备像素表示一个 CSS 像素，那么会加载 elva-fairy-320w.jpg（1x 是默认值，所以你不需要写出来）。如果设备有高分辨率，用两个或更多的设备像素表示一个 CSS 像素，会加载 elva-fairy-640w.jpg。640px 的图像大小为 93KB，320px 的图像的大小仅仅有 39KB。

3.3 美术设计

美术设计问题涉及到更改显示的图像以适应不同的显示尺寸。<picture> 元素允许我们这样实现。

<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />

对上述图片实现美术设计，改用 <picture>，就像 <video> 和 <audio>，<picture> 元素包含了一些 <source> 元素，它使浏览器在不同资源间做出选择，紧跟着的是最重要的 <img> 元素。：

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg" />
  <source media="(min-width: 800px)" srcset="elva-800w.jpg" />
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />
</picture>

• <source> 元素包含一个 media 属性，这一属性包含一个媒体条件。

• srcset 属性包含要显示图片的路径。可以通过一个 <picture> 元素提供多个图片，也可以给每个图片提供多分辨率的图片。

• 必须在 </picture> 之前正确提供一个 <img> 元素以及它的 src 和 alt 属性，否则不会有图片显示。当媒体条件都不返回真的时候它会显示默认图片；如果浏览器不支持 <picture> 元素时，它可以作为后备方案。

这样的代码允许我们在宽屏和窄屏上都能显示合适的图片。

像 WebP 和 AVIF 等新型图片格式可以做到高质量的同时保持较低的文件大小，如今这些格式已有相对广泛的浏览器支持，且几乎没有“历史包袱”。

<picture> 让我们能继续满足老式浏览器的需要。可以在 type 属性中提供 MIME 类型，这样浏览器就能立即拒绝其不支持的文件类型：

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg" />
  <source type="image/webp" srcset="pyramid.webp" />
  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles" />
</picture>

• 不要使用 media 属性，除非需要用到美术设计。
• 在 <source> 元素中，只可以引用在 type 中声明的文件类型。
• 如果必要，可以在 srcset 和 sizes 中使用逗号分割的列表。