SVG 文件是什么?

SVG 是 Scalable Vector Graphics(可缩放矢量图形)的缩写。它不像 JPG 或 PNG 那样存储一格格彩色像素,而是存储绘制指令:在这里画一个圆,在那里画一条线,用那种颜色画这个形状。因为它基于数学而不是像素,所以任意尺寸都保持锐利,简单图形的文件也很小。

SVG 究竟是什么

用文本编辑器打开一个 SVG,你会发现它就是可读的文本。它用 XML(一种简单的标签格式)写成,每个形状都由数字和单词来描述。path 元素勾勒一条轮廓,rect 画一个矩形,文本元素装着真正可选中的文字。没有任何东西被固化成一格格的点阵。

这就是全部的诀窍。照片的像素数量是固定的,放大就会变得模糊、出现块状。SVG 没有固定分辨率,缩放时只是重新计算一遍数学,所以同一个 Logo 印在名片上和放上广告牌一样清晰。对于只有少数形状的扁平图形,文件通常也非常小,因为你存的是一份简短的配方,而不是数百万个彩色点。

SVG 适合做什么

SVG 最能发挥价值的地方是 Logo、图标和网页图形。一个 Logo 文件就能缩放到你需要的所有尺寸,不必导出十种不同的 PNG。图标在高分辨率屏幕上保持极致清晰。由干净形状构成的图表、示意图和插画也都很适合这种格式。

它不太适合照片。一张人脸或风景照片没有可以描述的规整形状,那种场合 JPG 或 PNG 这类位图格式才是正确的工具。粗略的判断标准:如果你能用笔画出来,SVG 大概合适;如果是相机拍出来的,大概就不合适。

如何打开和编辑 SVG

打开很容易。所有现代浏览器都能读取 SVG,把文件拖进 Chrome、Safari、Firefox 或 Edge 就能立刻看到。不过那只是查看,不是编辑。要修改形状、颜色或文字,你需要一个理解这种格式的矢量编辑器。

有些编辑器需要安装和许可证。你也可以直接在浏览器里完成。Rayzia 可在 rayzia.com/vector/ 免费在线打开和编辑 SVG,文件会一直留在你的设备上,除非你选择保存到云端。你编辑的文档全程都是真正的 SVG,所以导出的就是你画的原样,没有任何转换步骤来搅浑它。

不属于任何公司的开放标准

SVG 不是绑定于某家公司软件的专有格式。它是由 W3C(HTML 和 CSS 背后的同一组织)维护的开放标准,而且已经维护了二十多年。任何工具都可以自由读写它。

从长远看这很重要。封闭格式的文件可能在制作它的软件消失或易主时把你困住。而像 SVG 这样基于文本的开放标准,多年之后仍能在浏览器里打开,你也可以在任何支持它的工具之间迁移,不会丢失自己的作品。

常见问题

SVG 比 PNG 或 JPG 更好吗?

取决于图像本身。对于 Logo、图标和扁平图形,SVG 更胜一筹,因为它任意尺寸都清晰,文件通常也更小。而照片没有可以用数学描述的规整形状,PNG 和 JPG 更合适。

不装专门软件能打开 SVG 吗?

可以。任何现代浏览器都能打开并显示 SVG 文件,把文件拖进 Chrome、Firefox、Safari 或 Edge 就能查看。不过要修改文件内容,你需要一个矢量编辑器。

如何编辑 SVG 文件?

你需要的是矢量编辑器,而不是照片应用。你可以在 Rayzia (rayzia.com/vector/) 的浏览器里免费完成:打开 SVG,编辑形状、文字和颜色,然后导出回 SVG 或 PNG。

在我的网站上使用 SVG 文件安全吗?

安全,而且它们非常适合网页。浏览器原生渲染 SVG,它们在高分辨率屏幕上保持清晰,简单的文件很小,加载很快。SVG 是 W3C 的开放标准,与 HTML 和 CSS 出自同一机构。