Scalable Vector Graphics
SVG 文件格式完整指南
什么是 SVG？
SVG（Scalable Vector Graphics，可缩放矢量图形）是一种基于 XML 的开放标准图形格式，用于描述二维矢量图形。与 JPEG、PNG 等栅格图像格式不同，SVG 使用数学公式和几何描述来定义图形，因此无论放大到多大尺寸，图像始终保持清晰锐利，不会出现像素化或模糊的问题。
SVG 格式由万维网联盟（W3C）于 1999 年首次发布规范，经过多年发展，SVG 1.1 版本于 2003 年成为正式推荐标准，并于 2011 年发布第二版。目前主流浏览器均原生支持 SVG，使其成为现代网页设计和数字图形领域不可或缺的格式。SVG 的设计初衷是为网页提供一种可交互、可动画的矢量图形标准，以弥补早期网络图形格式在缩放性和灵活性上的不足。
技术规格
SVG 文件本质上是一个纯文本的 XML 文档，可以用任何文本编辑器打开和编辑。以下是 SVG 格式的主要技术特性：
- 文件结构：基于 XML 语法，使用标签和属性描述图形元素，如路径（path）、圆形（circle）、矩形（rect）、文本（text）等。
- 色彩支持：支持完整的 CSS 颜色体系，包括 RGB、RGBA、HSL、十六进制颜色值，以及渐变色和图案填充，理论上支持数百万种颜色。
- 分辨率：SVG 本身是与分辨率无关的格式，无固定像素尺寸，可以通过 viewBox 属性灵活控制视口。
- 压缩：原始 SVG 文件为未压缩的文本格式。SVGZ 是经过 gzip 压缩的 SVG 变体，文件体积通常可缩减至原来的 20%–50%。
- 动画支持：支持 SMIL 动画和 CSS 动画，可实现丰富的交互效果。
- 脚本支持：可嵌入 JavaScript，实现动态交互功能。
- 字体：支持内嵌字体或引用系统字体，确保文字显示一致性。
- MIME 类型：image/svg+xml
- 文件扩展名：.svg（未压缩）、.svgz（压缩版本）
常见使用场景
SVG 格式凭借其独特的矢量特性，广泛应用于以下领域：
- 网站图标与 Logo：品牌标志、导航图标（icon）在不同屏幕尺寸下保持清晰，特别适合高分辨率 Retina 屏幕。
- 数据可视化：图表、仪表盘、信息图等，D3.js 等主流可视化库均以 SVG 为核心渲染格式。
- 插图与艺术设计：平面设计师使用 SVG 创作可无限缩放的数字插画。
- UI 界面设计：按钮、背景图案、分隔线等界面元素。
- 地图与示意图：交互式地图、建筑平面图、工程示意图。
- 动画与互动内容：网页加载动画（Loading Animation）、交互式信息展示。
- 印刷与激光雕刻：由于无损缩放特性，SVG 也广泛用于印刷设计和 CNC 激光切割文件。
SVG 的优缺点
| 优点 | 缺点 |
|---|---|
| 无损缩放，任意尺寸下画质清晰 | 不适合存储复杂照片或写实图像 |
| 文件体积小，简单图形远小于对应 PNG | 复杂 SVG 文件（如细节繁多的插图）体积可能很大 |
| 可用文本编辑器直接编辑 | 渲染复杂 SVG 时对浏览器性能要求较高 |
| 支持 CSS 样式与 JavaScript 交互 | 存在跨站脚本（XSS）安全风险，需谨慎处理用户上传的 SVG |
| 主流浏览器原生支持，无需插件 | 不同软件对 SVG 规范的实现存在细微差异 |
| 对 SEO 友好，文字内容可被搜索引擎索引 | 学习曲线相对较陡，手动编写复杂 SVG 难度大 |
如何打开和查看 SVG 文件
SVG 文件可以通过多种方式打开，以下是常用软件和工具：
- 网页浏览器：Google Chrome、Mozilla Firefox、Microsoft Edge、Apple Safari 均可直接在浏览器中打开和预览 SVG 文件。
- Adobe Illustrator：专业矢量图形设计软件，对 SVG 的支持非常完善，是编辑 SVG 的主流工具之一。
- Inkscape：免费开源的矢量图形编辑器，原生支持 SVG 格式，功能强大，是 Adobe Illustrator 的优秀替代品。
- CorelDRAW：另一款专业矢量设计软件，支持 SVG 的导入与导出。
- Figma / Sketch：UI 设计工具，支持导入和导出 SVG，广泛用于界面设计工作流。
- Visual Studio Code：配合 SVG 预览扩展，可在代码编辑器中直接预览 SVG 文件。
- Windows 照片查看器 / macOS 预览：操作系统自带的图片查看工具也支持基本的 SVG 预览。
如何在线转换 SVG 文件
在实际工作中，我们经常需要将 SVG 转换为 PNG、JPEG、PDF 等其他格式，或将其他格式转换为 SVG。Metric Converter 提供免费的在线文件格式转换服务，无需安装任何软件，支持 SVG 与多种图像格式之间的相互转换。
使用在线转换工具时，只需上传您的 SVG 文件，选择目标格式，点击转换即可下载结果文件。这对于需要快速将设计稿转为适合社交媒体或邮件使用的 PNG/JPEG 格式的场景非常实用。需要注意的是，将 SVG 转换为栅格格式（如 PNG）时，建议预先设置合适的输出分辨率，以确保图像质量满足实际需求。
常见问题解答
SVG 和 PNG 有什么区别？应该选择哪种格式？
SVG 是矢量格式，适合图标、Logo、插图等以线条和形状为主的图形，能够无损缩放；PNG 是栅格格式，适合照片或包含大量细节的复杂图像，但放大后会模糊。如果您的图形需要在不同尺寸下使用，或者需要在网页中实现动画效果，选择 SVG 更为合适；如果是截图、照片等写实图像，则选择 PNG 或 JPEG。
SVG 文件在网页中使用安全吗？
SVG 文件可以包含 JavaScript 代码，因此在处理用户上传的 SVG 文件时存在跨站脚本（XSS）攻击风险。对于可信来源的 SVG 文件（如自己设计的图标），直接在网页中使用是安全的。如果需要展示用户上传的 SVG，建议通过服务器端进行净化处理（sanitize），或使用 <img> 标签引用而非内联嵌入，以降低安全风险。
为什么我的 SVG 文件在不同软件中显示效果不一样？
不同软件和浏览器对 SVG 规范的实现程度存在差异，特别是对于滤镜效果、字体渲染、动画等高级特性的支持可能有所不同。建议在设计时尽量使用标准化的 SVG 属性，避免过于依赖特定软件的专有扩展功能。在发布前，建议在多款主流浏览器中测试显示效果。
如何减小 SVG 文件的体积？
可以通过以下几种方式优化 SVG 文件大小：使用 SVGO（SVG Optimizer）等专业优化工具自动移除冗余代码和元数据；手动清理设计软件导出时自动生成的多余属性；合并重复的路径；使用 CSS 复用样式而非内联样式；以及将文件保存为 SVGZ 格式进行 gzip 压缩。经过优化的 SVG 文件体积通常可以减少 30%–70%。