为什么越来越多的项目选择 SVG？它到底好在哪里？这一节我们聊聊 SVG 的优势和适合的使用场景。
这是 SVG 最大的卖点。矢量图的本质是数学公式，放大多少倍都是清晰的。
同一个 SVG，不同尺寸，边缘始终清晰
<svg viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10" fill="#3498db"/>
</svg>
同样的代码，设置不同的 width/height，图形质量完全一样。这在响应式设计中特别有用。
简单的图形，SVG 文件通常比 PNG 小很多。一个纯色图标可能只有几百字节。
图标对比（500x500 像素）：
PNG: 15KB
SVG: 0.5KB
复杂图形另说，但图标、简单插图这类，SVG 优势明显。
SVG 是文本格式，里面的文字内容可以被搜索引擎读取。对 SEO 很友好。
<svg>
<text x="10" y="20">这是一段可搜索的文字</text>
</svg>
相比之下，PNG 里的文字搜索引擎是看不到的。
SVG 可以用 CSS 控制样式，包括颜色、描边、透明度等。还能用 JavaScript 操作。
鼠标悬停试试
.svg-icon {
transition: all 0.3s;
}
.svg-icon:hover {
fill: #e74c3c;
transform: scale(1.2);
}
SVG 有三种动画方式：
SVG 支持 <title> 和 <desc> 标签，屏幕阅读器可以读出来。这对无障碍访问很重要。
<svg>
<title>下载图标</title>
<desc>一个向下的箭头，表示下载功能</desc>
<path d="..."/>
</svg>
优点说完了，也得承认 SVG 的不足：
1. 复杂图形性能差
几万个节点的 SVG，渲染会很慢。这种场景 Canvas 更合适。
2. 不适合照片
照片用 SVG 描述，文件会非常巨大。照片还是用 JPG/WebP 吧。
3. 旧浏览器支持有限
IE8 及以下不支持 SVG。不过现在基本不用考虑了。
这是 SVG 最常见的用途。一套图标，多种颜色，无限缩放。
菜单
搜索
用户
设置
折线图、饼图、柱状图，用 SVG 绑制非常方便。D3.js、ECharts 都是基于 SVG 或 Canvas 的。
加载动画、进度条、微交互效果。
需要适配多种屏幕尺寸的图形，比如 Logo、插图。
SVG 是矢量格式，打印出来和屏幕显示一样清晰。
这些场景 Canvas 或 WebGL 更合适。
SVG 的优势：
适合场景：