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