SVG全称是可缩放矢量图形，它本质上就是一种用来描述图形的XML应用语言。也就是说，每一个SVG文件都是符合XML语法规则的文本文档，浏览器或绘图工具通过解析这些标签来渲染出线条、形状和文字。
SVG文档的XML基本结构
一个标准的SVG文件必须以XML声明开头，并且拥有一个根元素<svg>。这和普通XML文档要求单一根节点是一致的。下面的代码展示了一个最小可用的SVG文档：
<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> <circle cx="50" cy="50" r="40" fill="red" /> </svg>
XML语法在SVG中的体现
- 所有标签必须正确闭合，如
<line/>或<g></g>。 - 属性值必须用英文双引号包裹，不能省略。
- 标签必须合理嵌套，不能交叉重叠。
- SVG使用命名空间
xmlns来表明自己属于W3C定义的矢量图形词汇集。
为什么SVG要建立在XML之上
因为XML本身就是一种结构化、可扩展且平台无关的文本格式。SVG借助XML获得了以下优势：
| 优势 | 说明 |
|---|---|
| 可读性 | 开发者可以直接用文本编辑器修改图形，无需专用软件 |
| 可编程 | 可以用JavaScript动态创建或修改<rect>等节点 |
| 可压缩 | 纯文本特性让SVG在传输前可被GZIP有效压缩 |
用代码动态生成SVG元素
在浏览器环境中，我们也能通过DOM接口按照XML规则插入SVG节点：
// 创建SVG命名空间下的矩形元素
const svgNS = 'http://www.w3.org/2000/svg';
const rect = document.createElementNS(svgNS, 'rect');
rect.setAttribute('width', 80);
rect.setAttribute('height', 50);
rect.setAttribute('fill', 'blue');
document.querySelector('svg').appendChild(rect);
小结
SVG与XML是应用语言和元语言的关系。掌握SVG的XML语法基础，不仅能帮我们手写和调试图形，还能在图表库、地图标注等场景中更自如地处理矢量内容。只要记住标签闭合、属性引号和命名空间这几点，就能写出规范的可缩放矢量图形文件。