SVG是基于XML的矢量图形格式，使用XML标签定义图形元素，遵循XML语法规则，可通过JavaScript、Python等编程语言动态生成，并支持在浏览器中用DOM操作或服务端返回SVG响应，实现图像的程序化创建与交互。
SVG 本质上是 XML 的一种应用。 可缩放矢量图形（Scalable Vector Graphics，简称 SVG）是一种基于 XML 的文件格式，用于描述二维矢量图形。这意味着每一个合法的 SVG 文档都是一个结构良好的 XML 文档，遵循 XML 的语法规则。
SVG 与 XML 的关系
SVG 使用 XML 标签来定义图形元素，例如矩形、圆形、路径、文本等。由于它完全基于 XML，因此：
- SVG 文件可以用任何文本编辑器打开和编辑
- 支持命名空间（SVG 通常使用 http://www.w3.org/2000/svg 命名空间）
- 可以被 DOM 解析器解析，并在浏览器中动态操作
- 可与 CSS 和 JavaScript 结合实现交互效果
一个最简单的 SVG 示例：
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="blue" />
</svg>
这段代码就是一个标准的 XML 片段，同时也是一个有效的 SVG 图像，绘制了一个蓝色的圆。
如何用代码生成 SVG
你可以使用多种编程语言动态生成 SVG 内容。以下是几种常见方法：
1. 使用 JavaScript 在浏览器中生成
通过创建 SVG 元素并插入 DOM：
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');svg.setAttribute('width', 200);
svg.setAttribute('height', 200);
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('cx', 100);
circle.setAttribute('cy', 100);
circle.setAttribute('r', 80);
circle.setAttribute('fill', 'red');
svg.appendChild(circle);
document.body.appendChild(svg);
这会在页面上动态添加一个红色圆形 SVG。
2. 使用 Python 生成 SVG 字符串
Python 没有内置 SVG 支持，但你可以直接构造字符串或使用库如 svgwrite：
import svgwritedwg = svgwrite.Drawing('example.svg', profile='tiny')
dwg.add(dwg.circle(center=(50, 50), r=40, fill='green'))
dwg.save()
这会生成一个名为 example.svg 的文件。
或者手动拼接 SVG 字符串：
svg_template = '''<svg width="{w}" height="{h}" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="{w}" height="{h}" fill="yellow" stroke="black"/>
</svg>
'''
svg_content = svg_template.format(w=100, h=100)
with open("output.svg", "w") as f:
f.write(svg_content)
3. 在服务端生成 SVG 并返回
比如使用 Node.js 或 Python Flask 返回 SVG 响应：
// Node.js 示例app.get('/chart.svg', (req, res) => {
res.type('image/svg+xml');
res.send(`
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<circle cx="50" cy="50" r="40" fill="purple"/>
</svg>`);
});
这样访问 /chart.svg 就能直接看到图像。
基本上就这些。SVG 是 XML 的具体应用，结构清晰、可读性强，适合程序生成和动态渲染。掌握其语法后，用代码生成 SVG 并不复杂，但容易忽略命名空间和属性大小写等问题。
