SVG
基于 XML 的矢量图像格式,可缩放到任意分辨率而不损失质量。适用于图标、Logo 和图表。
SVG (Scalable Vector Graphics,可缩放矢量图形) 是 W3C 制定的基于 XML 的二维矢量图形描述标准。与由像素网格组成的光栅图像不同,SVG 通过数学坐标和路径指令定义形状,在任何显示尺寸或分辨率下都能保持清晰的边缘。
其 XML 结构可读性强,可在任何文本编辑器中编辑。SVG 元素参与 DOM,支持 CSS 样式设置、JavaScript 交互以及与 Web 应用框架的无缝集成。
- 路径元素:通过坐标指令描述形状,如
<path d="M10 10 L90 90">,支持直线、曲线和圆弧 - 滤镜和渐变:模糊、投影、线性和径向渐变在 XML 标记中声明式定义
- 动画:SMIL 和 CSS 动画无需外部库即可实现轻量级动态图形
文件大小随路径复杂度而非像素尺寸增长,因此 SVG 不适合摄影内容。它在几何图形表现方面表现出色:图标、Logo、图表、地图和 UI 元素。应用 gzip 压缩 (.svgz) 可额外减少 60-80% 的传输大小。对于 Web 交付,SVGO 等工具可去除不必要的元数据并优化路径数据,通常在无视觉变化的情况下减少 30-50% 的文件大小。