HTML SVG 矢量图形
学习用SVG绘制可缩放图形和图标 · 难度：进阶 · +15XP
HTML SVG 矢量图形
SVG是可缩放矢量图形，放大不失真，适合图标和插图。
基本形状
<svg width="200" height="200">
<rect x="10" y="10" width="80" height="60" fill="#2563eb" rx="5"/>
<circle cx="150" cy="40" r="30" fill="#ef4444"/>
<line x1="10" y1="100" x2="190" y2="100" stroke="#333" stroke-width="2"/>
<text x="60" y="170" fill="#333">SVG Demo</text>
</svg>SVG vs Canvas
| SVG | Canvas |
|---|---|
| 矢量，缩放不失真 | 位图，缩放模糊 |
| 每个元素可交互 | 整体像素操作 |
| 适合图标/UI | 适合游戏/动画 |
???? 练习
- 画一个笑脸SVG
- 画一个简单柱状图