文件格式
什么是 SVG？矢量图格式指南
SVG 是一种基于 XML 的矢量图形格式，放大到任何尺寸都清晰锐利。本文介绍它的历史、结构、安全风险以及与 PNG 之间的转换。
作者: Hemen Dönüştür Editör Ekibi发布日期: 阅读约 8 分钟
SVG 是一种由绘图指令而非像素构成的图片格式。把标志、图标或图表保存为 SVG 时，文件中包含的是“从这个点到那个点画一条曲线，并用这种颜色填充”之类的命令。正因如此，SVG 在任何尺寸下都清晰锐利，文件往往很小，还可以用文本编辑器打开和编辑。本文将介绍 SVG 在 W3C 标准中的地位、文件结构、浏览器和软件支持、安全风险，以及如何在 SVG 与 PNG 或 JPG 之间转换。
什么是 SVG？
SVG（Scalable Vector Graphics，可缩放矢量图形）是一种基于 XML 的 W3C 标准，用于描述二维矢量图形。扩展名为 .svg，MIME 类型为 image/svg+xml。经 gzip 压缩的变体使用 .svgz 扩展名。
光栅格式（JPG、PNG、WebP）把图片存储为固定的像素网格，放大后就能看到像素。SVG 则用数学方式描述形状，由浏览器或程序按屏幕的分辨率重新绘制。MDN 的图片格式指南认为，对于可以用绘图命令表示的图像，尤其是显示尺寸未知或会变化的情况，SVG 是理想的选择，同时指出它一般不适合照片。
历史：SVG 1.0、1.1 与 SVG 2
- 2001 年 9 月 4 日：SVG 1.0 作为 W3C 推荐标准发布。
- 2003 年 1 月 14 日：SVG 1.1 成为推荐标准。1.1 把语言划分为多个模块，使移动端配置等子集更容易定义。
- 2011 年 8 月 16 日：SVG 1.1 第二版发布。这是如今浏览器所依据的稳定版本。
- SVG 2：根据 W3C 的发布历史，工作草案从 2012 年开始陆续发布，第一个候选推荐标准快照于 2016 年 9 月 15 日发布。最新的快照日期为 2026 年 10 月 6 日；该文档仍处于候选推荐标准阶段。
SVG 2 以 1.1 第二版为基础，目标是与 HTML 和 CSS 更好地整合。滤镜、遮罩和字体等部分主题被移到了独立的 CSS 和 FX 模块中。实际上，浏览器只实现了 SVG 2 的一部分，所以不要假定每项功能在所有地方都能用。
SVG 文件的结构
一个简单的 SVG 文件如下所示：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
<circle cx="50" cy="50" r="40" fill="#0b6bcb"/>
<path d="M30 50 L45 65 L72 36" stroke="#fff" stroke-width="8" fill="none"/>
</svg>坐标系：viewBox、width 和 height
viewBox 定义绘图内部的坐标系（这里是 0 到 100）。width 和 height 设定绘图在页面上占据的空间。带有 viewBox 的 SVG 会按比例缩放到你在 CSS 中指定的任何尺寸。没有 viewBox 的文件在调整大小时可能被裁切，这是标志文件最常见的错误之一。
核心元素
- 形状：
rect、circle、ellipse、line、polyline、polygon，以及可以绘制任何图形的path。 - 文字：
text和tspan。文字仍然可以选中和搜索，但如果查看设备上缺少该字体，就会使用替代字体。 - 分组与复用：
g、defs、symbol、use。图标集常常以symbol元素的形式打包在一个文件中。 - 绘制：纯色、线性和径向渐变、图案、裁剪路径、遮罩和滤镜（模糊、投影）。
- 样式与动画：可以用 CSS 设置 SVG 的样式；CSS 动画和 SMIL 动画元素可以加入动态效果。
- 嵌入内容：
image用于光栅图片，foreignObject用于 HTML，script用于 JavaScript。
颜色、透明度、图层与页面
透明在 SVG 中是原生的：没有绘制的地方就是空的，opacity 和 fill-opacity 用于定义半透明。图层用 g 分组表示；Inkscape 和 Illustrator 就是这样保存图层的。颜色默认使用 sRGB，由于颜色以数字形式书写，也不存在通常意义上的位深限制。SVG 不是多页文档格式；多页绘图更适合用 PDF。
在浏览器、系统和软件中的支持
根据 MDN，Chrome、Edge、Firefox、Opera 和 Safari 都支持 SVG。你可以通过 <img>、CSS 的 background-image、直接内联在 HTML 中，或通过 <object> 和 <iframe> 使用它。Inkscape、Adobe Illustrator、Affinity Designer 和 Figma 等矢量工具都能读写 SVG，当前版本的 Microsoft Office 也允许插入 SVG 图形。
在其他地方，支持就比较弱了：许多社交网络、电子邮件客户端、即时通讯应用和上传表单会拒绝 SVG 或不显示预览。部分原因在于下文所述的安全风险。
安全：像对待文档一样对待 SVG
SVG 是 XML 文档，可以包含 script 元素、事件属性（如 onload）和外部引用。MDN 的“SVG as an image”页面说明，当 SVG 通过 <img> 或 CSS 背景使用时，浏览器会禁用 JavaScript，也不会加载图片或样式表等外部资源。但当文件被直接打开，或通过 <iframe>、<object> 或 <embed> 嵌入时，这些限制并不适用。
实际后果是：如果网站允许用户上传 SVG 文件，并直接从自己的域名提供这些文件，那么文件中嵌入的脚本就可能在该网站的上下文中运行（存储型 XSS）。常见的缓解措施有：
- 用清理工具处理上传的 SVG，移除
script、事件属性、foreignObject和外部链接。 - 从单独的域名提供用户文件，配合严格的 Content-Security-Policy，或以下载方式提供（
Content-Disposition: attachment）。 - 如果不需要矢量格式，就在服务器上把上传的 SVG 转换为 PNG，只发布光栅版本。
典型用途
- 标志和品牌素材：一个文件从名片到广告牌都能保持清晰。
- 界面图标：可以用 CSS 着色，在高像素密度屏幕上也绝不模糊。
- 图表、地图和示意图：D3.js 等库会把数据直接绘制成 SVG 元素。
- 网站图标（favicon）：当前浏览器接受通过
<link rel="icon" type="image/svg+xml">提供的 SVG favicon。 - 切割和印刷：激光切割机、刻字机和绣花机都使用矢量路径工作。
优点与缺点
| 优点 | 缺点 |
|---|---|
| 任何尺寸都清晰，与分辨率无关 | 不适合照片和复杂纹理 |
| 简单图形的文件非常小 | 路径很多的绘图会变得笨重，渲染缓慢 |
| 基于文本：可编辑、便于比对差异、压缩效果好 | 脚本和外部引用存在安全风险 |
| 可用 CSS 和 JavaScript 设置样式和交互 | 字体和功能支持因程序而异 |
无障碍友好：title 和 desc 可承载描述 | 常被社交网络和电子邮件客户端拒绝 |
常见问题及解决方法
网站或应用不接受 SVG
最简单的办法是准备一份 PNG 副本。我们的 SVG 转 PNG 工具会在你的浏览器中，按你选择的像素宽度把绘图渲染为透明 PNG。你的文件不会上传，也不会离开你的设备。
文字显示成了其他字体
SVG 默认不嵌入字体；如果查看系统缺少该字体，就会使用替代字体。在图片上下文中，外部字体也不会加载。请在设计工具中把文字转换为轮廓，或者嵌入字体。
SVG 在页面上尺寸不对或被裁切
没有 viewBox，或设置了固定的 width/height 时，缩放的表现会不符合预期。请在根 svg 元素上添加覆盖整个绘图的 viewBox，并在 CSS 中设置尺寸。
文件比预期大
设计工具会把编辑器元数据、过多的小数位和隐藏图层写入 SVG。SVGO 等优化工具可以去掉它们。在服务器上启用 Gzip 或 Brotli 压缩，还能让基于文本的 SVG 进一步变小。
我需要把 PNG 标志变成 SVG
光栅图像无法真正“转换”为矢量图；工具所做的是描摹：识别出形状，再把它们重新绘制为轮廓。我们的 PNG 转 SVG 和 JPG 转 SVG 工具使用 2 到 8 种颜色进行描摹。简单的标志和绘图效果很好，照片效果则比较粗糙。使用这些工具时，文件会通过安全连接上传到我们的服务器，在那里完成描摹，并最迟在 30 分钟内删除。
转换技巧
- 确定目标尺寸：把 SVG 渲染为 PNG 时，选择图片将要显示的最大尺寸，并为高像素密度屏幕再乘以二。在我们的工具中，最长边最多可达 4096 像素；如果宽度留空，较小的绘图会被缩放到最长边为 1024 像素。
- 照片内容用 JPG：如果 SVG 中嵌入了照片且不需要透明度，JPG 或 WebP 会比 PNG 更小；之后可以在图片格式转换工具中转换 PNG。
- 网站图标：如果你的标志是 SVG，favicon 生成工具可以直接使用它，并在图标包中加入
icon.svg。 - 描摹前准备干净的源图：从 PNG 生成 SVG 时，请使用高分辨率、颜色平整、没有噪点的图片。
常见问题
SVG 和 PNG 有什么区别？
PNG 由固定数量的像素组成，放大后会变模糊。SVG 描述的是形状，在任何尺寸下都会被清晰地重新绘制。SVG 适合标志和图标；PNG 或 JPG 适合照片和屏幕截图。
SVG 文件会含有病毒吗？
SVG 不是可执行程序，但可以嵌入 JavaScript。SVG 作为图片（<img>）显示时脚本不会运行，但在浏览器中直接打开文件时脚本可能会运行。对于来源不明的 SVG，请在看图软件中查看或先转换为 PNG，而不要直接打开。
可以把 SVG 插入 Word 或 PowerPoint 吗？
当前版本的 Microsoft Office 支持插入 SVG。对于旧版本，或者文件还要在其他程序中共享时，PNG 副本更稳妥。
SVG 转 PNG 会损失画质吗？
PNG 是无损的，但绘图会被固定为某个像素尺寸。只要选择足够大的宽度，就不会察觉到任何损失；之后再放大 PNG 则会变模糊。
SVG 支持动画吗？
支持。动态效果可以来自 CSS 动画、SMIL 动画元素和 JavaScript。转换为 PNG 后只会得到一帧。
