SVG 是什么格式?矢量图原理、优缺点与打开方法
讲清 SVG 是什么、矢量图为什么能无限缩放不失真、和 PNG 等位图的区别与适用场景,以及怎么打开和转换 SVG。
SVG(可缩放矢量图形)是 1999 年由 W3C 制定的开放矢量格式,用 XML 代码描述形状、路径和颜色而非像素,因此能无限放大缩小都不失真、体积通常很小,最适合 logo、图标和插画;但不适合照片类复杂图像。
SVG 是什么
SVG(Scalable Vector Graphics,可缩放矢量图形)是 W3C 在 1999 年制定的开放标准。它本质是一段 XML 文本代码,用数学方式描述图形里的点、线、曲线、形状和颜色,而不是像 JPG / PNG 那样逐个记录像素。
矢量 vs 位图
位图(JPG / PNG)由固定数量的像素组成,放大就会糊、出现马赛克;SVG 是矢量,图形由公式定义,放大多少倍都保持锐利清晰,文件还通常更小。
矢量图为什么无限缩放不失真
因为 SVG 存的不是「画好的像素」,而是「怎么画的说明书」。比如一个圆,SVG 只记录圆心、半径和颜色;无论你把它放到多大,浏览器都按公式重新绘制,边缘永远平滑。
还有什么好处?
SVG 是纯文本,可以直接用代码编辑、能加 CSS 动画和交互、体积通常很小,非常适合响应式网页的图标和 logo。
SVG 的优缺点
- 矢量无限缩放不失真,适配任意分辨率
- 体积通常很小,加载快
- 可用代码编辑,支持动画与交互
- 开放标准,所有现代浏览器支持
- 不适合照片等复杂连续色调图像
- 复杂图形节点过多时体积反而变大
- 可内嵌脚本,引入不可信 SVG 有 XSS 风险需消毒
- 老旧浏览器支持有限
什么时候用 SVG
logo / 图标 / 插画
需要任意尺寸都清晰时,SVG 是首选。
响应式网页图形
一份 SVG 适配所有屏幕密度,无需多套位图。
照片 / 复杂连续色调
改用 JPG / WebP;SVG 不适合像素照片。
如何打开和转换 SVG
SVG 常见问题
SVG 是矢量(公式描述,无限缩放不失真),PNG 是位图(像素组成,放大会糊)。logo、图标用 SVG;照片、复杂图像用 PNG。
所有现代浏览器都能直接打开 SVG;设计软件(Illustrator、Inkscape、Figma)可编辑;也可以用文本编辑器查看它的 XML 源码。
可以。把 SVG 按指定尺寸栅格化为 PNG 即可用于不支持矢量的场景。在唯丹图本地转换,不上传。
SVG 可以内嵌脚本,打开不可信来源的 SVG 存在 XSS 风险。建议只使用可信来源,或经过消毒处理后再用。