什么是SVG？让图形保持锐利的矢量格式
SVG是Scalable Vector Graphics（可缩放矢量图形）的缩写， 在您每天接触的图像格式中，它是个与众不同的存在。JPEG、PNG、WebP和GIF都存储一张固定的像素网格。 而SVG存储的东西完全不同：一组用于绘制图像的指令。正是这一个差别， 让同一个SVG标志文件既能在智能手表上、也能在户外大型广告牌上保持锐利清晰， 也让一套精良的图标合集可以比一张照片缩略图还要小。
用数学而非像素绘成的图
SVG文件是用XML编写的纯文本。用代码编辑器打开它，您会看到一个个描述形状的可读标签 — 带有圆心和半径的<circle>、勾勒曲线的<path>、 指定了填充色的<rect>。浏览器读取这些指令，每次都重新绘制出这些形状。 直到它出现在您屏幕上的那一刻之前，没有任何东西是以像素形式存储的。
这就是"矢量"的含义。因为图像由坐标和曲线定义，而非一张冻结的像素网格， 所以它与分辨率无关。将它放大1000%，浏览器只是把同样的曲线按更大的尺寸 重新计算一遍。永远不会模糊，斜边不会出现锯齿般的阶梯，画质也绝不会有任何损失。 相比之下，栅格图像只容纳了那么多像素；放大它就是在拉伸本就稀少的信息， 这正是放大后的PNG变得发虚、发块的原因。
SVG的拿手好戏
- 标志与品牌符号 — 一个文件就能胜任favicon、页眉，以及适合印刷的大幅主图，且从不发虚。
- 图标 — UI图标系统（菜单、搜索、购物车、箭头）小巧、锐利，还能从周围文字继承颜色。
- 插画与线条艺术 — 边缘干净的扁平、几何或手绘矢量图。
- 图表与示意图 — 数据可视化在任何缩放比例下都清晰易读，只需编辑标记中的数字即可更新。
对于这类扁平的几何图形，SVG文件通常非常小。一个作为PNG时30 KB的标志， 作为SVG时可能只有3 KB，因为您存储的是寥寥几个形状定义，而非数以万计的彩色像素。 字节更少，意味着页面加载更快。
可编辑、可设样式、可做动画
因为SVG不过是标记语言，所以它作为一种图形格外灵活。您可以：
- 用代码编辑它。在文本编辑器里改一个十六进制颜色、挪动一个坐标，或调整描边宽度 — 无需任何设计工具。
- 用CSS为它设样式。当SVG内联嵌入HTML时，它的形状便成为DOM的一部分。您可以设置填充和描边颜色、应用悬停状态， 甚至用一条CSS规则就把图标颜色切换到与深色模式相配。
- 用CSS或JavaScript为它做动画。路径可以被逐渐描绘出来，形状可以变形，加载图标可以旋转 — 全部原生实现，无需视频文件或笨重的动画库。
这正是界面设计师频频选用SVG的原因：图标不是一张锁死的图片， 而是一段可以重新上色、随意移动的活的标记。
普遍的支持
Chrome、Safari、Firefox、Edge等每一款现代浏览器，早在十多年前就已原生渲染SVG。 您可以把SVG放进<img>标签、用作CSS的background-image， 或直接内联到HTML中。到2026年，对于一般的网页用途，无需插件、无需polyfill，也不必担心兼容性。
什么情况下SVG是错误的选择
SVG并非栅格格式的万能替代品，用错场合会严重适得其反。最明显的例子就是照片。 一张照片包含数以百万计的像素，每个像素的色调都略有不同，没有可供描述的干净几何形状。 不存在一组紧凑的曲线能重现一张人脸或一片森林。若强行"矢量化"一张照片， 您得到的要么是庞大到无法处理的文件，要么是一幅涂抹模糊、色阶断裂、丢光了所有真实细节的卡通图。
对于照片以及任何连续色调的图像，栅格格式才是合适的工具 — 一般照片用JPEG， 想要更好的压缩就用WebP/AVIF。有了照片，您该做的是栅格化，而不是矢量化。 SVG的最佳用武之地是扁平、几何、色彩少的图形，一旦图像真正带有照片的性质，它就不再有用武之地。
标志之争：SVG vs PNG，一览
| 标准 | SVG | PNG |
|---|---|---|
| 可缩放至任意尺寸 | 可以 — 无限锐利 | 不行 — 放大即模糊 |
| 文件大小（扁平标志） | 通常更小（几KB） | 更大，随分辨率增长 |
| 可编辑 / 可重新上色 | 可以 — 代码与CSS | 不行 — 仅有扁平像素 |
| 适合照片 | 否 | 是（无损），但文件很大 |
想看更深入的逐项对比，请参阅 SVG vs PNG：该用哪种格式。
一条值得了解的安全提醒
灵活性有其另一面。因为SVG是可执行的XML，一个恶意文件可以嵌入<script>标签 或事件处理程序，在图像于浏览器中内联打开时运行JavaScript。这使得不受信任的SVG成为 一个实实在在的攻击途径 — 例如，某个陌生人上传的SVG随后在您的网站上被内联渲染。 解决办法很直接：对来自不受信任来源的SVG进行净化（sanitize）（剥除脚本、事件处理程序和外部引用），或者把用户提供的SVG作为普通图像文件提供， 而非将其内联。您自己创作的SVG则完全安全。
SVG vs 图标字体
在内联SVG变得容易之前，许多网站以自定义字体的形式提供图标（每个字形就是一个图标）。 图标字体如今仍然可用，但内联SVG已大体胜出：SVG图标更锐利 （字体在小尺寸下的微调可能出现古怪的表现），单个图标支持多种颜色，无障碍性更好， 也不会为了显示一个字形就强迫浏览器下载整个字体文件。对于新项目， 内联SVG图标系统是现代的默认选择。
让SVG文件保持精简
从设计工具导出的SVG往往因编辑器元数据、隐藏图层、过高的小数精度和注释而臃肿， 而这些东西没有一样会影响图像的外观。让文件经过SVGO这类优化工具处理， 就能在不触动可见效果的前提下大幅缩小它。完整的操作流程，请阅读我们的 SVG优化指南。
什么时候改用PNG或JPG
并非每个平台都接受SVG。一些社交网络、市场平台的商品刊登、电子邮件客户端和老旧的内容系统 只接受栅格图像。在这些情况下，您就把SVG栅格化 — 按固定分辨率渲染一次，导出为像素图像。 当您需要透明度时（图标、彩色背景上的标志），请把 SVG转为PNG；当目标只接受不透明照片、 且文件大小很重要时，请把SVG转为JPG。 两者都完全在您的浏览器中运行 — 文件绝不会离开您的设备。 请按显示尺寸的2倍或3倍导出，好让栅格图在高像素密度的屏幕上依然清晰。
速答：您该用SVG吗？
- 标志、图标或扁平插画？ → 该用，选SVG。任何尺寸都锐利，而且体积极小。
- 需要给图形重新上色或做动画？ → 该用，选SVG。它是活的标记。
- 照片或细节丰富的图像？ → 不该用 — 请用JPEG、WebP或AVIF。
- 要显示来自不受信任用户的SVG？ → 先对它进行净化。
- 平台不接受SVG？ → 按2至3倍尺寸栅格化为PNG或JPG。