概述

SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。

SVG 文件可以直接插入网页，成为 DOM 的一部分，然后用 JavaScript 和 CSS 进行操作。

  1. <!DOCTYPE html>
  2. <html>
  3. <head></head>
  4. <body>
  5. <svg
  6.   id="mysvg"
  7.   xmlns="http://www.w3.org/2000/svg"
  8.   viewBox="0 0 800 600"
  9.   preserveAspectRatio="xMidYMid meet"
  10. >
  11.   <circle id="mycircle" cx="400" cy="300" r="50" />
  12. <svg>
  13. </body>
  14. </html>

上面是 SVG 代码直接插入网页的例子。

SVG 代码也可以写在一个独立文件中，然后用<img>、<object>、<embed>、<iframe>等标签插入网页。

  1. <img src="circle.svg">
  2. <object id="object" data="circle.svg" type="image/svg+xml"></object>
  3. <embed id="embed" src="icon.svg" type="image/svg+xml">
  4. <iframe id="iframe" src="icon.svg"></iframe>

CSS 也可以使用 SVG 文件。

  1. .logo {
  2.   background: url(icon.svg);
  3. }

SVG 文件还可以转为 BASE64 编码，然后作为 Data URI 写入网页。

  1. <img src="data:image/svg+xml;base64,[data]">