SVG vs PNG：向量格式与点阵格式的抉择

SVG（Scalable Vector Graphics）和 PNG（Portable Network Graphics）都是网页设计的常用格式，但它们从根本上就是两种不同的图形类型。SVG 是以数学公式描述的向量图，PNG 是记录每个像素的点阵图。了解两者的本质差异，是选择正确格式的关键。

缩放特性：SVG 的核心优势

SVG 可无限缩放而不失真，因为它储存的是形状的数学描述，而非固定像素。无论在手表萤幕还是 4K 显示器上，SVG 图形都保持完美清晰。这使 SVG 成为 Logo、图示、插图和资讯图表的理想选择。PNG 则是固定解析度格式，放大后会出现明显的像素化失真。在高 DPI 设备（如 Retina 萤幕）上显示 PNG 时，通常需要提供 2x 甚至 3x 的大尺寸版本。

档案大小

对于简单图形（如 Logo、图示），SVG 通常比 PNG 小得多。一个简单的向量图示可能只有 1–5KB，而同样清晰度的 PNG 可能需要 10–50KB（加上各种萤幕解析度版本）。然而对于复杂的插图或照片，SVG 会因为大量路径节点变得非常大，此时 PNG 更合适。

透明度支援

两个格式都原生支援透明度。PNG 支援完整的 8-bit Alpha 通道，处理半透明效果非常精确。SVG 可透过 CSS 或属性设定不透明度，也支援复杂的遮罩和渐变透明效果。

动画

SVG 支援 CSS 动画和 SMIL 动画，可直接在浏览器中实现流畅的向量动画，无需额外的图片资源。PNG 本身不支援动画，需搭配 APNG 规范，但支援程度有限。

网页使用方式

SVG 可作为图片嵌入（`<img src=”icon.svg”>`），也可直接内嵌 HTML 程式码，后者允许用 CSS 和 JavaScript 动态修改颜色、路径等属性，是 UI 元件库的首选。PNG 只能作为图片标签或 CSS 背景使用，无法以程式码修改其内容。

设计工具支援

Figma、Illustrator、Sketch 等主流设计工具都完整支援 SVG 汇入汇出。SVG 作为设计原始码可在工具间无损传输。PNG 几乎所有图像工具都支援，是通用的截图和合成格式，但汇出后即为静态点阵图，无法再编辑向量细节。

比较总表

特性	SVG	PNG
缩放	无限缩放不失真	固定解析度，放大失真
简单图形的档案大小	极小（1-5KB）	较大（需多种解析度）
复杂图像（照片）	不适合	适合
透明度	支援	支援
动画	支援（CSS/SMIL）	APNG（有限）
可用 CSS/JS 修改	是	否
浏览器相容性	所有现代浏览器	100%
适用场景	Logo、图示、插图、UI 元件	截图、照片、复杂插图

结论

规则很简单：几何图形、Logo、图示、UI 元件用 SVG；照片、截图、复杂插图用 PNG（或 JPG/WebP）。许多现代设计系统同时使用两者：SVG 负责所有可缩放图示和插图，PNG 或 WebP 负责照片和复杂影像。

在浏览器里直接完成，档案不会离开你的电脑：图片格式转换