1. 什么是 SVG？
📐
数学课代表：
"Canvas 是用像素点画画（像马赛克），SVG 是用数学公式画画。所以 SVG 怎么放大都不会糊！"
SVG 全称 Scalable Vector Graphics（可缩放矢量图形）。它是 XML 格式的，这意味着你可以在代码里直接修改它。
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="4" fill="green" />
</svg>
2. Canvas vs SVG
这俩兄弟怎么选？来看看他们的简历对比。
| 特性 |
Canvas (画布) |
SVG (矢量) |
| 本质 |
像素 (点阵图) |
形状 (矢量图) |
| 放大 |
会变模糊 (马赛克) |
永远清晰 |
| 修改 |
很难修改已画的内容 |
随时改属性重绘 |
| 事件 |
不支持 (只能监听画布整体) |
支持 (每个形状都能被点击) |
| 适合 |
游戏、复杂动画、照片处理 |
图标、地图、图表 |
3. 常用图形咒语
SVG 里有很多内置的形状，不用自己算坐标。
矩形 <rect>
<rect x="10" y="10" width="80" height="40" />
圆形 <circle>
<circle cx="50" cy="30" r="25" />
椭圆 <ellipse>
<ellipse rx="40" ry="20" ... />
线条 <line>
<line x1="10" y1="10" x2="90" y2="50" ... />