在网页中引入SVG矢量图片的几种方式及优缺点分享

什么是矢量图形？

　　矢量图使用算法来定义 — 一个矢量图文件包含了图形和路径的定义，电脑可以根据这些定义计算出当它们在屏幕上渲染时应该呈现的样子。无论它的尺寸大小，都使用算法来计算出图像的形状，仅仅是根据放大的倍数来调整算法中的值。

　　​

　　矢量图形相较于同样的位图，通常拥有更小的体积，因为它们仅需储存少量的算法，而不是逐个储存每个像素的信息。

SVG 是什么？

　　SVG 是用于描述矢量图像的XML语言。它基本上是像 HTML 一样的标记，只是你有许多不同的元素来定义要显示在图像中的形状，以及要应用于这些形状的效果。SVG 用于标记图形，而不是内容。

　　以下代码创建一个圆和一个矩形：

 <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>

　　SVG 的优点：

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

　　SVG 的缺点：

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

SVG 添加的方式

1 快捷方式：

　　要通过 <img>元素嵌入 SVG，你只需要按照预期的方式在 src 属性中引用它。你将需要一个height或width属性（或者如果您的 SVG 没有固有的宽高比）。

 <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">

2 SVG 代码引入

　　可以在文本编辑器中打开 SVG 文件，复制 SVG 代码，并将其粘贴到 HTML 文档中 - 这有时称为将SVG 内联或 内联 SVG 。确保您的 SVG 代码在<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 的浏览器仍然会下载任何后备图像。你需要考虑仅仅为支持过时的浏览器，而增加额外开销是否真的值得。

　　

3 <iframe> 嵌入 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。