HTML5 SVG
SVG（Scalable Vector Graphics，可缩放矢量图形）用 XML 标签来描述图形，是 HTML5 时代在网页中绘制"放大也不糊"的图形的利器。图标、地图、流程图，都是它的用武之地。
什么是 SVG
SVG 图形由点、线、面等数学对象组成，与分辨率无关——无论放大多少倍都清晰锐利，这是它和位图（如 PNG、JPG）最本质的区别。SVG 既可以内嵌在 HTML 里直接用标签绘制，也能保存成独立的 .svg 文件。
基础图形元素
| 元素 | 作用 | 关键属性 |
|---|---|---|
| rect | 矩形 | x、y、width、height、rx（圆角半径） |
| circle | 圆 | cx、cy、r |
| ellipse | 椭圆 | cx、cy、rx、ry |
| line | 直线 | x1、y1、x2、y2 |
| polyline | 折线 | points（点序列） |
| polygon | 多边形 | points（点序列） |
| path | 任意路径 | d（路径数据） |
公共属性：样式怎么设置
fill 设置填充色，stroke 设置描边色，stroke-width 设置线宽，此外还有 fill-opacity、stroke-dasharray 等高级属性：
<svg width="300" height="120">
<rect x="10" y="10" width="120" height="60"
fill="orange" stroke="red" stroke-width="3"/>
<circle cx="230" cy="40" r="30" fill="#00FF00"/>
<line x1="10" y1="100" x2="290" y2="100"
stroke="blue" stroke-width="2"/>
</svg>
在浏览器中显示为：一个橙色矩形、一个绿色圆形和一条蓝色横线。
path：最强大的绘图指令
path 用 d 属性描述路径：M 移到某点、L 画直线、H/V 画水平/垂直线、C 画贝塞尔曲线、Z 闭合路径。例如用三条直线围成一个三角形：
<svg width="100" height="100">
<path d="M50 10 L90 90 L10 90 Z"
fill="yellow" stroke="black"/>
</svg>
在浏览器中显示为：一个黄底黑边的三角形。
SVG 与 Canvas 对比
| 对比项 | SVG | Canvas |
|---|---|---|
| 本质 | 用标签描述矢量图形 | 用脚本逐像素绘制 |
| 放大 | 不失真 | 位图会变模糊 |
| 事件 | 每个图形可单独绑定事件 | 要自己根据坐标判断 |
| 适用场景 | 图标、地图、简单动画 | 大量图形、游戏、逐帧动画 |
易错点
- SVG 坐标原点在左上角、y 轴向下，和数学中的坐标系方向相反。
- 属性写错不会报错，只是图形"不显示"，先检查 fill 与 stroke 是否写全。
- 内联 SVG 的显示尺寸由 width/height 或 CSS 决定，别忘了设置。
- 极老的浏览器（IE8 及更早）不支持 SVG，需要兼容时可考虑降级方案。
小结：SVG 用 XML 标签画矢量图，放大不模糊、图形可交互，适合图标与图形类场景；与 Canvas 的分工可以概括为"矢量静态优先 SVG，密集动态用 Canvas"。