svg 是符合 xml 1.0 规范的文本文档，以 为根元素，标签闭合、属性引号、大小写敏感、需声明命名空间；支持内联、img、object、css 四种嵌入方式；其可解析、可交互、可压缩等能力均源于 xml 特性。
SVG 文件就是 XML 文件——不是“类似”，而是完全符合 XML 1.0 规范的文本文档。它用标准的 XML 标签描述图形，浏览器靠 XML 解析器读取并渲染，因此所有 XML 的特性（如结构化、可嵌套、支持命名空间、可被程序读写）都直接适用于 SVG。
SVG 就是 XML 的一种具体应用
SVG 全称 Scalable Vector Graphics，本质是 XML 的一个子集标准。每个 .svg 文件打开后看到的都是纯文本，开头常带 声明，根元素一定是 ，内部所有标签（如
- 标签必须闭合（
或 ） - 属性值必须加引号（fill="red"，不能写 fill=red）
- 区分大小写（cx 和 CX 是不同属性）
- 需声明命名空间：xmlns="http://www.w3.org/2000/svg"
常用 SVG 基础图形标签
这些标签都定义在 内部，是构建矢量图的最小单元：
-
：画矩形。常用属性：x、y（左上角坐标），width、height（宽高），fill（填充色），stroke（描边色） -
：画圆。关键属性：cx、cy（圆心坐标），r（半径） -
：画椭圆。cx、cy 是中心点，rx、ry 是 x/y 方向半径 -
：画直线。x1、y1 到 x2、y2 确定线段端点 -
：折线。用空格或逗号分隔的坐标对列表，如 points="0,0 50,20 100,0" -
：最灵活的图形标签，通过 d 属性指令（如 M 移动、L 直线、C 贝塞尔曲线）绘制任意形状
如何在网页中使用 SVG 图形
SVG 支持多种嵌入方式，选择取决于是否需要样式控制、脚本交互或复用性：
- 内联 SVG：把 直接写进 HTML 中。优势是能用 CSS 选中子元素（如 svg circle { fill: blue; }），也能用 JavaScript 操作每个节点
-
引用：适合静态图标，
。简单轻量，但无法用 CSS/JS 控制内部图形 - ：如 。保留完整 SVG 功能（包括脚本和事件），适合复杂可交互图表
- CSS 背景图：用 background-image: url(icon.svg)。适合装饰性小图标，不需语义或交互
为什么理解 XML 对用好 SVG 很重要
因为 SVG 的一切能力都源于 XML 特性：
- 可被任何 XML 工具解析、验证或生成（比如用 Python 的 xml.etree.ElementTree 动态创建图标）
- 命名空间（xmlns）让 SVG 能安全混入 HTML 或 MathML，不冲突
- 文本本质意味着可搜索、可版本管理、可 diff、可 gzip 压缩（.svgz 就是压缩版）
- DOM 映射天然——SVG 元素就是真实 DOM 节点，document.querySelector('circle') 可直接获取并修改
