svg是基于xml的二维矢量图形描述格式，本质是可读、可编辑、可脚本控制的标记文本；必须用根标签包裹，需声明xmlns，推荐显式设置宽高；核心绘图元素是，通过d属性指令绘制任意形状；内联嵌入html才能实现css/js操控；响应式关键在viewbox而非单纯css缩放。
jpg 或 png），而是一段可读、可编辑、可脚本控制的标记文本，浏览器直接解析渲染。
你不需要把它当成“美术资源”，而更该看作“带样式的 DOM 元素集合”。
SVG 标签怎么写？从 <svg></svg> 开始
所有 SVG 内容必须包裹在 <svg></svg> 根标签里，它定义画布大小和坐标系：
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="80" height="40" fill="blue" /> <circle cx="150" cy="50" r="20" fill="red" /> </svg>
注意：xmlns 属性不能省——否则部分老浏览器或独立 XML 解析器可能不识别 SVG 元素；width/height 推荐显式设置，避免默认为 300×150 导致意外缩放。
<path></path> 是 SVG 的核心：一条指令画任意形状
矩形、圆、线这些只是语法糖。<path></path> 才是真正灵活的绘图方式，靠 d 属性中的一串命令（如 M 移动、L 直线、C 贝塞尔曲线）拼出轮廓：
-
M 10 10表示“移动到 (10,10)” -
L 90 10 L 90 50 L 10 50 Z构成一个矩形（Z表示闭合路径） - 复杂图标、字体轮廓、地图边界基本都靠
<path d="..."></path>实现
手写 d 字符串容易出错，建议用设计工具（Figma、Illustrator）导出 SVG 后提取 <path></path>，再微调。
嵌入 HTML 时，别用 <img alt="SVG是什么 如何用XML来绘制可缩放矢量图形" > 加载 SVG 文件
如果用 <img src="icon.svg" alt="SVG是什么 如何用XML来绘制可缩放矢量图形" >，SVG 就变成黑盒图像——无法用 CSS 控制颜色，也不能用 JS 操作内部元素。正确做法是：
- 直接把 SVG 标签内联写进 HTML（如上面两个例子）
- 或用
<object></object>（支持交互但兼容性略差） - 或用
<iframe></iframe>（隔离性强但限制多）
内联 SVG 的最大好处：里面的 <circle></circle>、<text></text> 都是真实 DOM 节点，可以加 class、绑定事件、用 fill 或 stroke CSS 属性动态改色。
响应式 SVG 容易被忽略的关键点
很多人以为设了 width="100%" 就自动适配，结果图形被拉伸变形。真正可控的方式是：
- 去掉
width和height属性，只留viewBox="0 0 200 100"（表示原始坐标系范围） - 用 CSS 控制容器尺寸，SVG 自动按比例缩放
- 加上
preserveAspectRatio="xMidYMid meet"防止裁切（默认值，可省略）
没有 viewBox 的 SVG 无法真正响应式；只靠 CSS 缩放会模糊文字和描边——因为它是按像素拉伸位图逻辑处理的，而 SVG 渲染依赖的是坐标系映射。
