什么是 SVG？矢量图基础知识、优缺点及使用场景
关于可缩放矢量图形（Scalable Vector Graphics）你需要了解的一切——它如何工作、为什么重要，以及何时应该优先选择它而非位图格式。
立即转换什么是 SVG？
你每天都在接触 SVG 文件——网站 Logo、应用图标、动态插图和交互式图表中都有它的身影。但 SVG 到底是什么？它又为何成为现代网页中如此广泛使用的格式？
SVG 全称为 Scalable Vector Graphics（可缩放矢量图形）。它是一种基于 XML 的图像格式，通过数学指令而非像素网格来描述视觉元素。SVG 文件并不保存屏幕上每个点的颜色值，而是包含人类可读的代码，用以定义形状、路径、曲线、颜色和文本。浏览器或图像查看器读取这些指令后，可以在任何尺寸下渲染图形——从微小的 favicon 到巨幅广告牌——而不会损失任何质量。
SVG 规范由 W3C（World Wide Web Consortium，万维网联盟）维护，该组织同样负责 HTML 和 CSS 标准。这意味着 SVG 是一个开放标准，在所有现代浏览器、操作系统和设计工具中都有广泛支持。由于 SVG 文件本质上是纯文本，因此可以像源代码一样进行创建、编辑和版本控制。
如果你有一张位图——PNG、JPG 或 WebP——并希望将其转换为矢量图，一种名为描摹（tracing）的技术可以将原始形状近似转化为 SVG 路径。Any2SVG 是一款免费的图片转 SVG 在线工具，它利用 Canvas 和 ImageTracer.js 直接在你的浏览器中完成描摹过程，因此你的文件永远不会离开你的设备。
SVG 与位图的区别
SVG 与 PNG、JPG 或 WebP 等位图格式之间的根本区别在于数学运算与像素。位图是一个固定的彩色像素网格。将其放大超过原始分辨率，就会得到模糊、带锯齿的结果。而 SVG 文件存储的是绘图指令——"在此中心点以此半径画一个圆"——因此渲染器可以在目标尺寸下重新计算每一条边。
这一区别在文件大小、可编辑性和性能方面都有实际影响。如需详细对比，请参阅我们的指南：位图与矢量图：有什么区别？
| 特性 | SVG（矢量） | 位图（PNG/JPG/WebP） |
|---|---|---|
| 定义方式 | 数学路径和形状 | 彩色像素网格 |
| 缩放 | 无限——不损失质量 | 放大后质量下降 |
| 文件大小（简单图形） | 非常小（通常不到 5 KB） | 因像素数据而较大 |
| 文件大小（照片） | 非常大且不实用 | 有损压缩效率高 |
| 可编辑性 | 在代码或设计工具中编辑形状、颜色、文本 | 仅支持像素级编辑 |
| 动画 | 内置 CSS 和 SMIL 动画支持 | 需要 GIF、APNG 或视频 |
| 无障碍 | 支持标题、描述和 ARIA 角色 | 仅限 alt 文本 |
由于 SVG 是基于文本的格式，你可以在代码编辑器中打开它，更改颜色值、调整路径或添加动画——所有这些都无需专业软件。这使得 SVG 在注重一致性和自动化的设计系统中尤为有价值。
SVG 的优缺点
优点
- 完美的可缩放性。SVG 在任何屏幕上都能清晰渲染——从低密度显示器到 4K Retina 屏幕——无需生成多种尺寸的图片。
- 简单图形文件极小。以 SVG 格式保存的 Logo 或图标通常只有同等 PNG 的几分之一大小，这意味着更快的页面加载速度。
- 完全可编辑。通过编辑 XML 属性即可更改颜色、描边或形状。设计令牌（design tokens）和主题可以通过编程方式应用。
- 支持动画。SVG 元素可以通过 CSS 过渡、SMIL 或 GSAP 等 JavaScript 库实现动画——无需视频文件或精灵图。
- 无障碍友好。SVG 支持
<title>和<desc>元素以及 ARIA 属性，为屏幕阅读器提供关于图形的有意义信息。 - SEO 友好。搜索引擎可以索引 SVG 内部的文本内容，内联 SVG 还有助于页面语义化。
缺点
- 不适合照片。用矢量路径表示数百万种颜色变化会产生庞大且不实用的文件。对于照片，JPG 或 WebP 仍然高效得多。
- 细节越多，复杂度越高。包含数千条路径的高细节插图会产生大型 SVG 文件，解析和渲染速度都会变慢。
- 学习门槛。手动编辑 SVG 代码需要熟悉 XML 语法、路径命令和坐标系统。
- 安全考虑。由于 SVG 可以包含脚本，用户上传的 SVG 文件在网页上呈现之前必须进行安全过滤。
如需格式对比详情，请阅读我们的 SVG 与 PNG 对比文章。
何时使用 SVG
选择正确的图像格式取决于内容本身。SVG 在特定场景中表现出色，而在其他场景中则力不从心。下表提供了一个快速决策指南。
| 使用场景 | 是否推荐 SVG？ | 原因 |
|---|---|---|
| Logo 和品牌标识 | 是 | 在任何尺寸下都必须保持清晰，从 favicon 到印刷品 |
| 图标和 UI 元素 | 是 | 文件极小，可通过 CSS 设置主题，分辨率无关 |
| 插图和信息图表 | 是 | 可缩放、可动画、导出后仍可编辑 |
| 图表和数据可视化 | 是 | 可编程生成，支持 JS 交互 |
| 照片 | 否 | 位图格式处理连续色调的效率远远更高 |
| 复杂纹理或渐变 | 很少 | 路径数量激增，抵消了文件大小和性能优势 |
如果你有需要转换为矢量格式的 PNG Logo 或图标，我们的 PNG 转 SVG 教程将引导你逐步完成转换过程。操作非常简单：上传图片、调整描摹设置、下载干净的 SVG——全部在浏览器内完成。
开始转换
SVG 是现代可缩放、轻量且无障碍网页图形的标准。无论你是在构建设计系统、优化页面速度，还是仅仅需要一个在每台设备上都清晰显示的 Logo，只要不是照片，SVG 都是正确的选择。
准备好将你的位图转换为干净的矢量图了吗？Any2SVG 可以直接在浏览器中将 PNG、JPG、WebP、GIF、BMP、TIFF 和 AVIF 文件转换为 SVG——无需上传至远程服务器、无需注册账户、没有文件数量限制。调整颜色量化、路径简化和输出尺寸，然后下载单个 SVG 或批量 ZIP 文件。