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);

svg.appendChild(circle);
document.body.appendChild(svg);

这会在页面上动态添加一个红色圆形 SVG。

码上飞

码上飞（CodeFlying） 是一款AI自动化开发平台，通过自然语言描述即可自动生成完整应用程序。

138

查看详情

2. 使用 Python 生成 SVG 字符串

Python 没有内置 SVG 支持，但你可以直接构造字符串或使用库如 svgwrite：

import svgwrite

dwg = 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 并不复杂，但容易忽略命名空间和属性大小写等问题。