svg是浏览器直接解析的xml代码，需用带命名空间的根标签定义容器，配合rect、circle等基础标签或path路径绘制矢量图形，并嵌入html中以支持css和js操作。
SVG不是一张“图”，而是一段能被浏览器直接读懂的XML代码。写好<svg></svg>根标签，加上几个基础图形标签，就能立刻看到清晰、可缩放的矢量图形——不需要安装软件，也不依赖图片文件。
必须写对的根标签和命名空间
<svg></svg>是所有SVG内容的容器，就像之于网页。它必须显式声明命名空间，否则老浏览器或独立解析器可能无法识别元素：
- xmlns="http://www.w3.org/2000/svg"不能省略，这是SVG的标准命名空间
- width和height建议明确设置，避免浏览器默认使用300×150导致意外尺寸
- 如果希望图形自动适配不同屏幕，viewBox比单纯调CSS更可靠（例如
viewBox="0 0 200 100"）
用几行代码画出常见形状
矩形、圆、线这些图形都有专属标签，属性直观易懂：
-
<rect x="10" y="10" width="80" height="40" fill="blue"></rect>：左上角在(10,10)，宽高80×40，蓝色填充 -
<circle cx="150" cy="50" r="20" fill="red"></circle>：圆心在(150,50)，半径20，红色填充 -
<line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"></line>：从原点画一条斜线，黑色、粗2像素
路径：真正灵活的绘图方式
所有基础图形本质都是<path></path>的简化写法。它的d属性是一串指令，比如：
-
M 10 10表示“移动到坐标(10,10)” -
L 90 10 L 90 50 L 10 50 Z表示画三条直线并闭合，构成矩形 - 复杂图标、曲线轮廓、地图边界几乎都靠
<path d="..."></path>实现 - 手写
d字符串容易出错，推荐用Figma或Illustrator导出SVG后提取再微调
嵌入HTML才能真正用起来
SVG只有放进HTML文档里，才能被CSS控制样式、被JavaScript操作行为：
- 直接把
<svg>...</svg>写在里，浏览器会立即渲染 - 可以给
<rect></rect>加class="icon"，再用CSS定义.icon { fill: #333; transition: fill 0.2s; } - 也可以用JS获取
document.querySelector('circle')，动态修改cx或fill
