什么是 SVG 文件？如何转换它？

你下载了一个 logo 或图标,保存到电脑上却是 logo.svg。用普通的看图软件打开,可能连预览都出不来。想上传到只接受"普通"图片的地方,网站直接拒绝了。SVG 文件并没有损坏,它只是和 JPG、PNG 完全不同的一类图像文件,搞清楚这个区别,才能真正用对它。

SVG 到底是什么#

SVG 全称 Scalable Vector Graphics(可缩放矢量图形),这个名字已经说明了一切:它是由数学形状(线条、曲线、点、填充)构成的图像,而不是一格格像素。JPG 或 PNG 把图像存成固定的像素数组,放大到一定程度就会看到方块状的锯齿。SVG 存的是绘制形状的指令,所以查看器可以在任意尺寸下重新绘制它,从 16 像素的网站图标到整面墙那么大的横幅,每次都能保持清晰锐利。

从底层看,SVG 文件其实是纯文本,准确说是 XML,所以你可以用文本编辑器打开它,直接读到里面的形状定义。这也意味着 SVG 压缩效率极高,体积可以非常小:一个简单的图标往往只有几 KB,比同样内容的 PNG 还要小。

为什么 logo 和图标里到处都是 SVG#

有三个特性让 SVG 成为除照片以外几乎所有场景的默认选择:

• 无限缩放且不损失质量。 一个 logo 既要在名片上清晰,也要在广告牌上清晰。一个 SVG 文件就能同时满足两者;换成位图格式,每种尺寸都得单独准备一份高分辨率文件。
• 简单图形的文件体积极小。 纯色图标、logo 和线条画编码成矢量路径,比编码成像素网格高效得多。
• 可以直接用代码编辑和设置样式。 因为是文本格式,SVG 的颜色、描边甚至动画都能直接用 CSS 和 JavaScript 控制,这是任何位图格式都做不到的。

这就是为什么几乎每个网站的 logo、导航图标和插画都以 SVG 形式发布,而照片始终是 JPG 或 WebP。矢量和位图格式其实不是在争同一个位置,它们是为完全不同类型的内容设计的。

SVG 不擅长什么#

SVG 的优势也是它的局限:它只适用于由可描述形状组成的图像。一张日落照片没有干净的路径可以描述,只有数百万个各不相同的像素值,所以照片只能依赖 JPG 这类位图格式。试图把一张照片"转换"成 SVG,既不会让文件变小,也不会让它更清晰,结果要么是充满大量微小形状、体积臃肿的文件,要么是丢失细节、模糊不清的描摹图。把 SVG 留给你绘制出来的图形,把位图格式留给你拍摄出来的一切。

如何把 SVG 转换成 PNG 或 JPG#

把矢量文件转换成位图文件的过程叫光栅化:按指定的像素尺寸渲染这些形状,再把结果固化成一张像素网格图。当你需要把 SVG 发到只认"普通"图片的地方时,比如社交媒体上传、邮件签名,或者拒绝接受 .svg 上传的老旧表单,就需要做光栅化。

不用装任何软件、最靠谱的免费方法是这样:

1. 在浏览器中打开 SVG 文件(Chrome、Firefox、Edge 都能原生渲染 SVG,把文件拖进新标签页即可)。
2. 右键点击渲染出来的图像,选择"图片另存为",格式选 PNG。
3. 有些浏览器只会按 SVG 的默认尺寸保存。如果需要特定的像素尺寸,可以在 Figma 或 Inkscape 这类免费工具中打开 SVG,按自己选定的分辨率导出。

拿到 PNG 之后,通常接下来会做两件事。如果文件比网页所需的大,用压缩图片工具处理一下,可以在不明显改变画质的情况下把体积缩小,因为即便是导出分辨率很高的图标,也可能携带了超出实际需要的字节数。如果你要用 logo 制作网站图标,PNG 转 ICO 可以把这份导出的 PNG 转换成浏览器和书签栏所需的 .ico 格式;建议先把 SVG 导出为 256x256 或更大尺寸,这样图标在任何尺寸下都能保持清晰。

SVG、PNG、JPG 一览对比#

如果你想比较 PNG 和其他位图格式,我们的WebP 文件详解对此有更深入的介绍;而这里讨论的矢量与位图之争,是在选定 PNG 或 JPG 之前就要先做的决定。

打开 SVG 文件安全吗#

多数情况下是安全的,但有一点值得注意:因为 SVG 基于 XML,浏览器又支持在 SVG 内嵌入 <script> 标签,理论上一个恶意 SVG 是可以携带可执行代码的。对于从正规来源下载的 logo,这几乎不构成风险,但这也是部分邮件客户端和 CMS 平台默认屏蔽 SVG 上传的原因;如果可以避免,不要直接在浏览器标签页里打开来自不可信来源的 SVG。把这类 SVG 先转换成 PNG,用一个只做像素光栅化、不会执行内嵌脚本的工具处理,就能完全规避这个风险。

常见问题#

用什么程序可以打开 SVG 文件? 任何现代浏览器(Chrome、Firefox、Safari、Edge)都能直接打开并显示 SVG 文件,只要把文件拖进新标签页即可;Figma、Inkscape、Adobe Illustrator 等设计工具也能打开它进行编辑。

可以免费把 SVG 转换成 PNG 吗? 可以,在浏览器中打开 SVG 并保存渲染出的图像,或者用 Inkscape、Figma 这类免费工具按自己选定的像素尺寸导出,都能免费转换成 PNG,不需要任何付费软件。

为什么有些网站不让我上传 SVG 文件? 很多上传表单和 CMS 平台会专门屏蔽 SVG,因为它能嵌入可执行的脚本代码,这是位图格式不具备的安全风险,所以它们要求你先把 SVG 转换成 PNG 或 JPG。

SVG 比 PNG 更好吗? 对于 logo、图标和插画来说 SVG 更好,因为它可以缩放到任意尺寸而不模糊,体积还小;而对于照片、截图以及无法用形状描述的连续像素细节图像来说,PNG 更合适。

把 SVG 转换成 PNG 会损失质量吗? 只要导出的 PNG 像素尺寸足够满足用途,就不会损失任何细节,但生成的 PNG 会固定在那个分辨率上,和原始 SVG 不同,再放大就会模糊。

可以编辑 SVG 文件的颜色吗? 可以,因为 SVG 是纯文本,它的颜色和形状既能在文本编辑器中修改,也能在 Figma、Inkscape 这类设计工具中调整,如果它嵌在网页里,还能用 CSS 动态控制。

不管你是需要一个在任何尺寸下都清晰的图标,还是只想要一份表单能接受的 PNG,转换 SVG 只需要一步导出。拿到位图文件之后,压缩图片和 PNG 转 ICO 就能帮你搞定剩下的工作:免费、私密,完全在浏览器里运行。也可以去博客的全部文件格式指南看看。