SVG 是 Scalable Vector Graphics（可缩放矢量图形）的缩写。它是 W3C 制定的开放标准，用于将图片描述为指令而不是像素：在这里画一个圆、沿着这条曲线走、用这种颜色填充那个形状、用那种字体显示这个词。因为图片是一组绘制指令，它可以在任意尺寸下重绘而不会变糊或出现锯齿，所以标志、图标、地图和图表经常使用 SVG。
SVG 如何存储图片
SVG 文件本质上是 XML：可读的文本，可以用任何编辑器打开。<path> 元素包含一串精简的绘图指令，<rect>、<circle> 和 <polygon> 分别绘制矩形、圆形和多边形，<text> 保存真实可选中的文本，而 <g> 用于对元素分组，以便一起移动或统一设置样式。viewBox 属性定义坐标系，使整幅图在缩放时仍能保持清晰。
因为是文本，SVG 的压缩效果非常好；压缩成 gzip 的 SVG（有时使用扩展名 .svgz）通常只有原始大小的一小部分。作为文本还意味着 SVG 可以使用 CSS 设置样式、添加动画以及编写脚本。浏览器会把它视为文档的一部分，而不是一个不透明的图片。
这种能力也带来了需要了解的安全层面：SVG 可以包含 <script> 元素。凡是接收 SVG 作为用户上传的地方，都必须对其进行清理，或以无法执行脚本的方式提供，这也是为什么有些网站虽然接受各种栅格格式，却拒绝 SVG。
SVG 并不适合作为照片的容器。你可以在其中嵌入一张栅格图片，但那只是把像素图片包在 XML 里，并不能获得 SVG 的缩放优势。
SVG 携带哪些元数据
SVG 有专门的 <metadata> 元素，而标准没有规定其中必须包含什么，所以编辑器会在里面写入大量信息。最常见的是使用 Dublin Core 术语保存 RDF：dc:title、dc:creator、dc:date、dc:description、dc:rights 以及许可证 URI。<title> 和 <desc> 元素也可以放在根元素上，或任何单独的形状上，同时作为供屏幕阅读器使用的无障碍文本。
接下来是编辑器自身的记录信息，通常占用空间最大。Inkscape 会写入一整套以自己命名的命名空间：文档窗口的几何尺寸、上次保存时的缩放级别和光标位置、参考线、网格设置、图层名称和可见性，以及 inkscape:version 字符串。Illustrator 会嵌入一个 XMP 数据包，包含它自己的文档标识符和历史记录。这些内容都不会参与绘制。
由此有两个实用结论。编辑器数据很容易占据文件的大部分，因此在发布前先用优化器处理 SVG，通常能将体积减半。而且图层名称是你自己写的文本：<g inkscape:label="client logo v3 REJECTED"> 在图片里不可见，但在文件中完全可见。
何时使用 SVG
将 SVG 用于所有“绘制”而不是“拍摄”的内容：标志、图标、示意图、图表、插画、地图。它是网页的合适选择，一个文件就能适配所有屏幕分辨率；对于打印，它也可以按任何尺寸缩放。
将 PNG 或 JPG 用于照片以及任何具有连续色调的图像。当你需要一张能在不支持或不完全支持 SVG 的旧版或简化软件中打开的图片时，同时导出一份扁平的栅格副本。发布前请删除编辑器写入的元数据，既能减小文件大小，也能避免把不适合公开的图层名称暴露出去。