格式与压缩
什么是 SVG 格式？为什么设计师推荐它？
搞懂 SVG 为什么"放大不糊"、"文件超小"、"能动起来"。从矢量原理到实际应用，设计师和前端都该了解的格式知识。
#SVG #vector #design #formats #guide
SVG（Scalable Vector Graphics，可缩放矢量图形）是一种用形状、路径和文字描述图像，而不是用像素存储图像的格式。它广泛用于 Logo、图标、插画和界面图形，因为无论缩放到多大都保持清晰，还可以用 CSS 控制样式。
矢量图与位图
PNG 和 JPEG 等位图格式存储固定的像素网格，放大后会变模糊或出现马赛克。矢量格式存储形状的数学描述，因此缩放时不会损失质量。
| 特性 | SVG（矢量） | PNG / JPEG（位图） |
|---|---|---|
| 缩放 | 任意尺寸都清晰 | 放大可能模糊 |
| 文件大小 | 简单图形通常很小 | 取决于分辨率 |
| 可编辑性 | 可以作为代码编辑 | 需要像素编辑 |
| 动画 | 支持原生 SVG 动画 | 通常需要其他方式 |
SVG 的优点
- 与分辨率无关：既能用于小图标，也能用于大屏展示。
- 文件较小：简单图形通常压缩得很好。
- 可样式化：颜色、描边和效果可以用 CSS 控制。
- 可访问性好：SVG 中的文字可以被辅助技术读取。
- 可编程编辑：SVG 是文本格式，可以用代码生成或修改。
SVG 的局限
- 不适合照片：复杂照片包含太多细节，不适合用矢量高效表示。
- 渲染差异：不同浏览器和编辑器对高级特性的支持可能不同。
- 安全问题：SVG 可能包含脚本，打开不可信文件前应先做安全处理。
什么时候使用 SVG
适合使用 SVG：
- Logo 和品牌标识
- 图标和界面图形
- 插画和示意图
- 图表和信息图
- 动画图形
适合使用 PNG、JPEG、WebP 或 AVIF：
- 照片
- 复杂扫描件
- 纹理和细节丰富的插画
创建和编辑 SVG
你可以使用矢量编辑器创建 SVG，直接编写代码，或借助工具生成。PictKit 的 SVG 编辑工具 可以粘贴 SVG 代码、调整颜色和路径、优化文件体积，并在需要位图版本时导出 PNG 或 WebP。
SVG 优化建议
- 删除未使用的分组、属性和元数据。
- 在视觉效果不变的前提下简化路径。
- 避免坐标中出现过多小数位。
- 使用 CSS 或符号复用重复元素。
- 设置明确的宽度和高度，避免布局抖动。
SVG 采用清单
- Logo、图标和简单插画使用 SVG。
- 照片、扫描件和复杂纹理使用位图格式。
- 需要多尺寸清晰缩放时选择 SVG。
- 希望用 CSS 控制颜色时选择 SVG。
- 旧系统不支持 SVG 时提供 PNG 回退。
当图片足够简单、能从矢量表示中获益，并且需要在一个设计系统中复用，SVG 的价值最大。
常见问题
SVG 适合做 Logo 吗？ 适合。Logo 可以从清晰缩放、小体积和统一品牌色更新中获益。
可以在 HTML 中使用 SVG 吗？ 可以。你可以把 SVG 直接嵌入 HTML，也可以作为图片源使用。
为什么 SVG 在不同地方显示不一样？ 高级滤镜、字体或裁剪特性在不同浏览器中可能表现不同。请测试关键使用场景。
SVG 可以包含动画吗？ 可以。SVG 支持通过 CSS、JavaScript 或 SMIL 动画实现动画效果。