在 Python 中创建 SVG 图标

快速解答： 要在 Python 中创建 SVG 图标，请使用小型方形 viewBox，用 create_element_ns() 创建简单形状和 <path> 元素，在需要时对相关元素分组，设置 fill 和 stroke 属性，并将结果保存为 SVG 文件。

 1from aspose.svg import SVGDocument
 2
 3with SVGDocument() as document:
 4    svg = document.root_element
 5    svg.set_attribute("viewBox", "0 0 64 64")
 6    circle = document.create_element_ns("http://www.w3.org/2000/svg", "circle")
 7    circle.set_attribute("cx", "32")
 8    circle.set_attribute("cy", "32")
 9    circle.set_attribute("r", "28")
10    svg.append_child(circle)
11    document.save("icon.svg")

在本文中，您将学习如何：

使用方形 viewBox 设置图标大小的 SVG 画布；
将简单形状和 path data 组合成紧凑图标；
使用组和共享属性生成更清晰的标记；
保存可用于 UI、图表或生成资源的可复用 SVG 图标。

当坐标系统简单、调色板有限、形状结构容易检查时，生成的 SVG 图标效果最好。对于小图标，64x64 或 100x100 的 viewBox 通常就足够。

SVG 图标构建块

图标部分	常见 SVG 元素	说明
背景徽章	`<circle>` 或 `<rect>`	使用简单填充形状
符号标记	`<path>`、`<polyline>` 或 `<polygon>`	保持 path data 简短且可读
共享样式	`<g>`	将公共 `fill`、`stroke` 或 `stroke-linecap` 放在组上
可缩放画布	根 `viewBox`	所有图标尺寸使用同一坐标系统

如何在 Python 中创建 SVG 图标

当您需要生成图标图稿，而不是编辑已有 SVG 文件时，请使用以下工作流：

创建 SVGDocument。
使用 set_attribute() 设置方形 viewBox，例如 0 0 64 64。
使用 create_element_ns() 创建背景形状，例如圆或圆角矩形。
使用 <path>、<polyline>、<polygon> 或简单形状添加前景标记。
使用 set_attribute() 设置 fill、stroke、stroke-linecap 和 stroke-linejoin 属性，然后用 append_child() 追加每个可见元素。
使用 document.save() 保存 SVG，并在最终显示尺寸下检查结果。

创建勾选徽章图标

下面的示例创建一个简单的圆形勾选图标。圆是徽章背景，勾选标记是 <polyline>，其圆角端点和连接由 stroke-linecap 和 stroke-linejoin 控制。

 1import os
 2from aspose.svg import SVGDocument
 3
 4namespace_uri = "http://www.w3.org/2000/svg"
 5
 6output_folder = "output/"
 7output_path = os.path.join(output_folder, "check-badge-icon.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10with SVGDocument() as document:
11    svg = document.root_element
12    svg.set_attribute("width", "64")
13    svg.set_attribute("height", "64")
14    svg.set_attribute("viewBox", "0 0 64 64")
15
16    badge = document.create_element_ns(namespace_uri, "circle")
17    badge.set_attribute("cx", "32")
18    badge.set_attribute("cy", "32")
19    badge.set_attribute("r", "28")
20    badge.set_attribute("fill", "#0084A5")
21    badge.set_attribute("stroke", "#00637C")
22    badge.set_attribute("stroke-width", "4")
23    svg.append_child(badge)
24
25    check = document.create_element_ns(namespace_uri, "polyline")
26    check.set_attribute("points", "19,33 28,42 46,23")
27    check.set_attribute("fill", "none")
28    check.set_attribute("stroke", "#ffffff")
29    check.set_attribute("stroke-width", "6")
30    check.set_attribute("stroke-linecap", "round")
31    check.set_attribute("stroke-linejoin", "round")
32    svg.append_child(check)
33
34    document.save(output_path)

这个图标只使用少量元素，因此输出文件以后仍然容易编辑。此风格适用于状态图标、UI 徽章、简单按钮和生成的视觉标记。

下图展示运行示例后的结果：圆形 <circle> 元素创建徽章，白色 <polyline> 创建勾选标记。64x64 的 viewBox 让坐标保持紧凑，并使图标易于缩放。

创建带路径标记的图标

当前景标记不是简单直线或 <polygon> 时，请使用 <path>。下一个示例使用圆角矩形背景和一个路径标记创建小型闪光图标。

 1import os
 2from aspose.svg import SVGDocument
 3
 4namespace_uri = "http://www.w3.org/2000/svg"
 5
 6output_folder = "output/"
 7output_path = os.path.join(output_folder, "spark-icon.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10with SVGDocument() as document:
11    svg = document.root_element
12    svg.set_attribute("width", "64")
13    svg.set_attribute("height", "64")
14    svg.set_attribute("viewBox", "0 0 64 64")
15
16    background = document.create_element_ns(namespace_uri, "rect")
17    background.set_attribute("x", "4")
18    background.set_attribute("y", "4")
19    background.set_attribute("width", "56")
20    background.set_attribute("height", "56")
21    background.set_attribute("rx", "12")
22    background.set_attribute("fill", "#28B7FF")
23    svg.append_child(background)
24
25    spark = document.create_element_ns(namespace_uri, "path")
26    spark.set_attribute("d", "M32 13 L38 27 L52 32 L38 37 L32 51 L26 37 L12 32 L26 27 Z")
27    spark.set_attribute("fill", "#ff28f4")
28    spark.set_attribute("stroke", "#ffffff")
29    spark.set_attribute("stroke-width", "3")
30    svg.append_child(spark)
31
32    document.save(output_path)

<path> 标记使图标保持紧凑。如果应用程序从用户输入计算图标几何，请让路径构建逻辑靠近描述形状的值。

下图展示生成的闪光图标。圆角 <rect> 提供蓝色背景，<path> 使用一个紧凑的 d 值绘制前景标记。

常见错误和修复

问题	修复
图标被裁剪	在 `viewBox` 内为 `stroke` 和圆角留出边距
图标在小尺寸下显得模糊	使用清晰几何、有限细节和一致的 `stroke-width` 值
标记难以重新着色	将前景和背景保留为独立元素
文件过于复杂	对 UI 图标优先使用简单形状和简短 path data
图标缩放效果差	设置稳定的方形 `viewBox`，避免只硬编码像素位置

常见问题

SVG 图标应该使用什么 viewBox？

对于生成的图标，0 0 64 64 或 0 0 100 100 这样的方形 viewBox 通常最容易使用。它提供可预测的坐标系统，并能干净缩放。

SVG 图标应该使用路径还是基本形状？

如果图标可以由圆、矩形、直线或多边形构成，请使用基本形状。对于自定义标记、曲线或紧凑的复杂轮廓，请使用路径。

可以用同一工作流创建图标集吗？

可以。在多个图标之间复用相同的 viewBox、调色板、stroke-width 值和辅助函数，可以让整个图标集保持视觉一致。

在 Python 中绘制 SVG 形状 介绍生成图标中使用的基本元素。
在 Python 中绘制 SVG 文本 解释何时应让图标标签或文本标记保持为可编辑 SVG 文本。
Python 中的 SVG viewBox 和坐标 解释可缩放图标坐标系统。
在 Python 中处理 SVG 路径 说明如何构建和编辑 path data。
在 Python 中更改 SVG 颜色 展示如何为生成的或已有的 SVG 图稿重新着色。

绘制 SVG 文本高级 SVG 编辑