SVG基础指南
什么是SVG？可缩放矢量图形（Scalable Vector Graphics），基于XML的格式，无限缩放不失真。
适合：Logo、图标、插图、图表、动画、交互图形
不适合：照片和色彩丰富的复杂图像（用JPEG/WebP替代）
优势：无限缩放、简单图形文件体积小、支持CSS/JS动画、对SEO友好（文字可被搜索引擎读取）
使用方式：
1. 内联SVG（最适合动画/交互）
2. <img src="icon.svg">（最简单）
3. CSS background-image（装饰性用途）
1. 内联SVG（最适合动画/交互）
2. <img src="icon.svg">（最简单）
3. CSS background-image（装饰性用途）
<!-- 基础SVG圆形 -->
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="#6c63ff" />
</svg>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="#6c63ff" />
</svg>
| 特性 | SVG | PNG |
|---|---|---|
| 可缩放性 | 无限缩放 | 固定像素 |
| 文件大小（Logo） | 小 | 大 |
| 动画支持 | 是（CSS/JS） | 否 |
| 浏览器支持 | 所有现代浏览器 | 全部 |
| 照片质量 | 差 | 优秀 |