矢量图形 #

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

SVG #

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

<svg version="1.1" width="300" height="200">
  <circle cx="150" cy="100" r="90" fill="pink"></circle>
</svg>

页面效果：

优点：

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

缺点：

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

页面中添加 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）。