知识科普 · 阅读约8分钟
PNG和SVG的区别：SVG是什么，该用哪个？
PNG是一张像素网格，SVG是一份图形清单。就这一个区别，决定了它们各自有多清晰、多小、多好改。这里讲的是：SVG到底是什么、PNG为什么不是矢量图，以及什么时候选哪个。
01 · 先说结论
像素与图形
要缩放的图稿用SVG，真正是“一幅画”的图片用PNG。
PNG（Portable Network Graphics，便携式网络图形）把图片保存成固定尺寸的彩色像素网格，无损压缩，可以带透明通道。它是位图（栅格图）格式。放大后，像素只会变大，看起来就是模糊或者出现锯齿。SVG（Scalable Vector Graphics，可缩放矢量图形）则把图片保存成对图形的描述：“这里一个圆，这条曲线填这种渐变，这里是这段文字”，由渲染器按需要的尺寸重新画出来。它是矢量图格式，永远不会发虚。
所以Logo更适合存成SVG，而照片更适合存成PNG、JPG或WebP：Logo确实就是几个图形，而照片确实就是上百万个略有差别的点。
| PNG | SVG | |
|---|---|---|
| 类型 | 位图（像素） | 矢量图（图形），以XML文本保存 |
| 放大后 | 变模糊或出现马赛克 | 任何尺寸都清晰 |
| 文件大小 | 随像素数增长 | 随复杂程度增长；Logo和图标很小 |
| 照片和纹理 | 适合（照片文件较大） | 不适合：要么里面嵌位图，要么变成海报效果 |
| 透明 | 支持，完整透明通道 | 支持，原生 |
| 编辑 | 在图片编辑软件里逐像素修改 | 在矢量编辑软件或文本编辑器里移动节点、改填充 |
| 样式和动画 | 无 | 内联到网页时可以用CSS、脚本和动画 |
| 兼容性 | 到处都支持 | 所有主流浏览器和设计软件；邮件和部分上传入口不够完善 |
02 · SVG是什么
一张可以用记事本打开的图片
SVG里的“S”和“V”（可缩放、矢量），就是它的全部思想。
SVG文件是一份小小的文本文档，遵循W3C的标准格式。用记事本打开一个SVG，你会看到类似下面这样的内容，这就是一张完整、有效的图片：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="#8B5CF6"/>
</svg>因为是文本，SVG可以手工编辑、搜索，能被网络服务器很好地压缩，可以用脚本生成，也可以放进版本管理。因为它描述的是图形，所以支持真正的渐变、半透明、裁剪、文字，并且在内联到网页时，可以用CSS设置样式、做动画。1000像素时有40 KB的PNG Logo，存成SVG往往只有几KB。
两点实用的提醒。第一，SVG里可以包含脚本，所以和打开其他文档一样，只打开来源可信的文件；通过<img>标签加载的SVG，浏览器不会运行其中的脚本。第二，SVG里可以嵌入位图，这样的文件其实不是真正的矢量图，清晰度不会因此提高。AnyToSVG生成的SVG只包含路径和渐变，每种颜色一条路径，从不嵌入位图。
03 · PNG是矢量图吗
不是：而“PNG转矢量图”指的是描摹
一张圆的图片，并不是一个圆。
不管100%显示时多清晰，PNG都不是矢量格式。一张PNG的Logo里有上百万个彩色像素，但里面没有任何信息说明其中哪些点组成了一个圆、一个字母或者一条曲线。图片编辑软件里也没有哪个设置能把它变成图形：把logo.png直接改名为logo.svg，得到的是一个打不开的坏文件。
人们搜索“PNG转矢量图”“PNG转SVG”，指的其实是描摹：软件检查像素，找出不同颜色区域之间的边界，再把它们重新构建成曲线。对于Logo、图标、剪贴画、线稿、签名这类颜色平整的图稿，效果几乎完美，因为图形本来就在那里等着被找出来；对于照片，得到的是风格化的海报，因为照片里没有清晰的图形，只有渐变的色调。位图和矢量图的区别一文一步步讲了描摹能做什么、不能做什么，图片转矢量图页面则讲了其他位图格式。
04 · 这些情况选SVG
图稿需要缩放或者修改
- Logo和品牌标志：要在网站图标、网页顶部和横幅上以不同大小出现。
- 网页图标和界面图形：一个文件适配所有屏幕密度，还能用CSS改颜色。
- 插画、示意图、图表和地图：由纯色图形和线条组成的内容。
- 切割文件：Cricut、Silhouette、国产刻字机、即时贴切割机和激光雕刻机需要的是轮廓，而不是点阵。
- 要放大的印刷图稿，以及设计师之后还要修改的一切。
05 · 这些情况选PNG
图片本质上就是一幅“画”
- 截图，以及任何文字必须和渲染结果完全一致的内容。
- 照片、带纹理或厚涂风格的作品：需要透明或无损质量时用PNG，更看重体积时用JPG或WebP。
- 社交平台分享图、邮件签名、应用商店图标：上传入口和邮件客户端常常不接受SVG。
- 有成千上万个小图形的复杂图稿，这时SVG会比位图还大。
- 像素画，因为方方正正的像素本身就是设计。
多数项目最后两种都会用：SVG作为母版文件，再导出几份PNG，给那几个只认位图的地方使用。
06 · 互相转换
PNG转SVG，以及SVG转回PNG
一个方向是描摹，另一个方向只是“画出来”。
PNG转SVG：描摹
把PNG拖进PNG转SVG转换器（或者直接打开转换器）。它在浏览器里运行，自己选好彩色或黑白模式、统计颜色、识别平滑的渐变，大约一秒就把SVG和原图并排显示出来。如果Logo放在纯色背景上，就勾选透明背景；把颜色数滑块调到色块和设计一致，然后下载。专门转Logo请看Logo转SVG，JPG请看JPG转SVG。
SVG转PNG：渲染
这个方向不需要描摹，只需要决定尺寸，因为矢量图在画出来之前并没有像素。用浏览器、Inkscape、Figma或Illustrator打开SVG，按需要的宽度导出PNG（高密度屏幕建议导出2倍或3倍）。AnyToSVG转换器里的PNG按钮，就是对它刚描摹好的SVG做这件事，提供1倍、2倍或4倍；它们不是通用的SVG转PNG工具。
质量怎么样？
PNG转SVG的质量，取决于PNG里的图形本身。500像素以上、颜色平整的Logo几乎可以完美转换；很小、很模糊或者是拍下来的Logo，转出来也是很小、很模糊或者歪斜的矢量图。SVG转PNG则不会损失任何东西，除了你自己选择的分辨率。
SVG文件是什么？
SVG（Scalable Vector Graphics，可缩放矢量图形）是一种图片格式，它把画面描述成图形：线条、曲线、填充和文字，并以纯文本的XML写成。因为它保存的是图形而不是像素，所以可以缩放到任何尺寸而不失真，所有现代浏览器都能显示。
PNG是矢量图吗？
不是。PNG是位图（栅格图）格式：它保存的是固定尺寸的彩色像素网格。PNG里可以有一幅矢量图形的“画面”，但文件本身并没有图形。想得到矢量图，必须对PNG做描摹，这正是PNG转SVG所做的事。
SVG比PNG好吗？
对于Logo、图标、示意图这类色块平整的图稿，是的：它在任何尺寸下都清晰，而且通常更小。对于照片、截图和带纹理的作品则不是，应该用PNG（或JPG、WebP）。没有谁在任何情况下都更好，它们适合不同的图片。
SVG文件比PNG小吗？
简单的图稿通常小得多，因为几条路径比一百万个像素占的空间少得多。图形很多、渐变复杂或带纹理的图片，SVG反而可能比同样的PNG还大。
用PNG的地方都能换成SVG吗？
不完全能。浏览器、设计软件、刻字机和大多数网站都支持SVG；但不少邮箱客户端、社交平台的上传入口、应用商店的图标上传，以及Open Graph分享预览图，仍然要求PNG或JPG，所以这些地方要留一份位图。
SVG支持透明背景吗？
支持。除非你自己画了背景，否则SVG本身就是透明的，单个填充也可以是半透明的。PNG同样支持完整的透明通道，所以Logo用这两种格式的都很常见。
PNG转SVG怎么才能不损失质量？
描摹是根据像素重新构建图形，所以颜色平整的PNG（比如Logo和图标）转出来几乎和原图一致，照片则会变成风格化的海报。把PNG拖进PNG转SVG转换器，在对比视图里检查，再下载SVG就行。
SVG怎么转成PNG？
用浏览器、Inkscape、Figma或Illustrator打开SVG，按需要的尺寸导出或截图。AnyToSVG转换器里的PNG按钮，是把刚描摹好的SVG按1倍、2倍或4倍渲染出来，它们不是通用的SVG转PNG工具。
边读边试
转换器免费，无需注册，大约一秒就能把SVG和原图并排对比给你看。