SVG 是矢量格式,图标、图形、插画里用得很多,但不少人遇到两个问题:一是下载的 .svg 双击不知道用什么打开预览,二是 SVG 源码里常含冗余信息(注释、空白、无用属性),体积偏大。这篇把 SVG 的查看和优化讲清楚。
一、SVG 是什么、为什么重要
SVG(可缩放矢量图形)用 XML 描述图形,放多大都不失真,体积通常比位图小,所以是网页图标、Logo、插画的首选格式。但它是文本文件,需要合适的工具来预览和优化。
二、SVG 怎么查看和预览
- 浏览器直接拖入 .svg 文件即可预览(现代浏览器都支持);
- 想编辑/看源码,需要支持 SVG 的编辑器或工具;
- 想转成位图(PNG)给不支持的场景用,需要转换。
星点 SVG 工具支持:上传 SVG → 预览渲染效果 → 查看源码 → 转 PNG 预览。
三、SVG 为什么要压缩
设计师导出的 SVG 常带有:
- 注释();
- 多余空白和换行;
- 无用属性、冗余路径;
- 编辑器附加的元数据(如 Illustrator、Figma 的命名空间)。
这些都会增加体积。清理后体积通常能明显下降,对网页加载和图标库瘦身都有好处。
四、怎么压缩(星点 SVG)
- 上传 .svg;
- 选择压缩(去除注释/空白/无用属性);
- 预览压缩前后效果,确认图形无损坏;
- 下载压缩后的 SVG。
压缩是「无损」的------只去掉冗余,不改动图形的实际绘制结果,所以预览对比后图形应保持不变。
五、常见问题
- 压缩后图形变了 → 说明压缩过度或文件本身有特殊结构,用预览对比检查;
- SVG 转 PNG 变糊 → 转位图时要给足分辨率,SVG 本身是矢量无限清晰,PNG 需要指定尺寸;
- 浏览器不显示 → 检查 XML 是否合法(标签闭合、命名空间)。
SVG 的日常需求就三件事:预览、转位图、压缩瘦身。星点 SVG 工具覆盖这些,本地处理,适合前端处理图标库、设计师交付素材时用。
星点 SVG 查看:xingdian.net/app/image/svg