SVG是什么 如何用XML来绘制可缩放矢量图形

SVG是基于XML的二维矢量图形描述格式，本质是可读、可编辑、可脚本控制的标记文本；必须用根标签包裹，需声明xmlns，推荐显式设置宽高；核心绘图元素是，通过d属性指令绘制任意形状；内联嵌入HTML才能实现CSS/JS操控；响应式关键在viewBox而非单纯CSS缩放。

SVG 是一种基于 XML 的图像格式，用来描述二维矢量图形。它不是“图片文件”意义上的图像（比如 jpg 或 png），而是一段可读、可编辑、可脚本控制的标记文本，浏览器直接解析渲染。 你不需要把它当成“美术资源”，而更该看作“带样式的 DOM 元素集合”。

SVG 标签怎么写？从 开始

所有 SVG 内容必须包裹在 根标签里，它定义画布大小和坐标系：

注意：xmlns 属性不能省——否则部分老浏览器或独立 XML 解析器可能不识别 SVG 元素；width/height 推荐显式设置，避免默认为 300×150 导致意外缩放。

是 SVG 的核心：一条指令画任意形状

矩形、圆、线这些只是语法糖。 才是真正灵活的绘图方式，靠 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 文件

如果用 ，SVG 就变成黑盒图像——无法用 CSS 控制颜色，也不能用 JS 操作内部元素。正确做法是：

• 直接把 SVG 标签内联写进 HTML（如上面两个例子）
• 或用 （支持交互但兼容性略差）
• 或用 （隔离性强但限制多）

内联 SVG 的最大好处：里面的 、 都是真实 DOM 节点，可以加 class、绑定事件、用 fill 或 stroke CSS 属性动态改色。

响应式 SVG 容易被忽略的关键点

很多人以为设了 width="100%" 就自动适配，结果图形被拉伸变形。真正可控的方式是：

• 去掉 width 和 height 属性，只留 viewBox="0 0 200 100"（表示原始坐标系范围）
• 用 CSS 控制容器尺寸，SVG 自动按比例缩放
• 加上 preserveAspectRatio="xMidYMid meet" 防止裁切（默认值，可省略）

没有 viewBox 的 SVG 无法真正响应式；只靠 CSS 缩放会模糊文字和描边——因为它是按像素拉伸位图逻辑处理的，而 SVG 渲染依赖的是坐标系映射。