Create SVG Icons in Python

Quick Answer: To create SVG icons in Python, use a small square viewBox, create simple shapes and <path> elements with create_element_ns(), group related elements when needed, set the fill and stroke attributes, and save the result as an SVG file.

from aspose.svg import SVGDocument

with SVGDocument() as document:
    svg = document.root_element
    svg.set_attribute("viewBox", "0 0 64 64")
    circle = document.create_element_ns("http://www.w3.org/2000/svg", "circle")
    circle.set_attribute("cx", "32")
    circle.set_attribute("cy", "32")
    circle.set_attribute("r", "28")
    svg.append_child(circle)
    document.save("icon.svg")

In this article, you will learn how to:

• set up an icon-sized SVG canvas with a square viewBox;
• combine simple shapes and path data into a compact icon;
• use groups and shared attributes for cleaner generated markup;
• save reusable SVG icons for UI, diagrams, or generated assets.

Generated SVG icons work best when the coordinate system is simple, the palette is limited, and the shape structure is easy to inspect. A viewBox of 64x64 or 100x100 is often enough for small icons.

SVG Icon Building Blocks

Icon part	Typical SVG element	Notes
Background badge	<circle> or <rect>	Use a simple filled shape
Symbol mark	<path>, <polyline>, or <polygon>	Keep path data short and readable
Shared styling	<g>	Put common fill, stroke, or stroke-linecap on a group
Scalable canvas	root viewBox	Use one coordinate system for all icon sizes

How to Create SVG Icons in Python

Use this workflow when you need generated icon artwork rather than editing an existing SVG file:

1. Create an SVGDocument.
2. Set a square viewBox, such as 0 0 64 64, with set_attribute().
3. Create a background shape, such as a circle or rounded rectangle, with create_element_ns().
4. Add the foreground mark with <path>, <polyline>, <polygon>, or simple shapes.
5. Set the fill, stroke, stroke-linecap, and stroke-linejoin attributes with set_attribute(), then append each visible element with append_child().
6. Save the SVG with document.save() and inspect the result at the final display size.

Create a Check Badge Icon

The following example creates a simple circular check icon. The circle is the badge background, and the check mark is a <polyline> with rounded ends and joins controlled by stroke-linecap and stroke-linejoin.

import os
from aspose.svg import SVGDocument

namespace_uri = "http://www.w3.org/2000/svg"

output_folder = "output/"
output_path = os.path.join(output_folder, "check-badge-icon.svg")
os.makedirs(output_folder, exist_ok=True)

with SVGDocument() as document:
    svg = document.root_element
    svg.set_attribute("width", "64")
    svg.set_attribute("height", "64")
    svg.set_attribute("viewBox", "0 0 64 64")

    badge = document.create_element_ns(namespace_uri, "circle")
    badge.set_attribute("cx", "32")
    badge.set_attribute("cy", "32")
    badge.set_attribute("r", "28")
    badge.set_attribute("fill", "#0084A5")
    badge.set_attribute("stroke", "#00637C")
    badge.set_attribute("stroke-width", "4")
    svg.append_child(badge)

    check = document.create_element_ns(namespace_uri, "polyline")
    check.set_attribute("points", "19,33 28,42 46,23")
    check.set_attribute("fill", "none")
    check.set_attribute("stroke", "#ffffff")
    check.set_attribute("stroke-width", "6")
    check.set_attribute("stroke-linecap", "round")
    check.set_attribute("stroke-linejoin", "round")
    svg.append_child(check)

    document.save(output_path)

This icon uses a small number of elements, so the output remains easy to edit later. Use this style for status icons, UI badges, simple buttons, and generated visual markers.

The illustration shows the result of running the example: the circular <circle> element creates the badge, and the white <polyline> creates the check mark. The viewBox of 64x64 keeps the coordinates compact and makes the icon easy to scale.

Create an Icon with a Path Mark

Use <path> when the foreground mark is not a simple line or <polygon>. The next example creates a small sparkle-style icon using a rounded rectangle background and one path mark.

import os
from aspose.svg import SVGDocument

namespace_uri = "http://www.w3.org/2000/svg"

output_folder = "output/"
output_path = os.path.join(output_folder, "spark-icon.svg")
os.makedirs(output_folder, exist_ok=True)

with SVGDocument() as document:
    svg = document.root_element
    svg.set_attribute("width", "64")
    svg.set_attribute("height", "64")
    svg.set_attribute("viewBox", "0 0 64 64")

    background = document.create_element_ns(namespace_uri, "rect")
    background.set_attribute("x", "4")
    background.set_attribute("y", "4")
    background.set_attribute("width", "56")
    background.set_attribute("height", "56")
    background.set_attribute("rx", "12")
    background.set_attribute("fill", "#28B7FF")
    svg.append_child(background)

    spark = document.create_element_ns(namespace_uri, "path")
    spark.set_attribute("d", "M32 13 L38 27 L52 32 L38 37 L32 51 L26 37 L12 32 L26 27 Z")
    spark.set_attribute("fill", "#ff28f4")
    spark.set_attribute("stroke", "#ffffff")
    spark.set_attribute("stroke-width", "3")
    svg.append_child(spark)

    document.save(output_path)

The <path> mark keeps the icon compact. If your application calculates icon geometry from user input, keep the path-building logic close to the values that describe the shape.

The illustration shows the generated sparkle icon. The rounded <rect> provides the blue background, while the <path> draws the foreground mark from one compact d value.

Common Mistakes and Fixes

Problem	Fix
Icon is clipped	Leave margin inside the viewBox for stroke and rounded corners
Icon looks blurry at small size	Use clear geometry, limited detail, and consistent stroke-width values
Mark is hard to recolor	Keep foreground and background as separate elements
File is too complex	Prefer simple shapes and short path data for UI icons
Icon scales poorly	Set a stable square viewBox and avoid hard-coding only pixel positions

FAQ

What `viewBox` should I use for SVG icons?

A square viewBox such as 0 0 64 64 or 0 0 100 100 is usually easiest for generated icons. It gives you a predictable coordinate system that scales cleanly.

Should an SVG icon use paths or basic shapes?

Use basic shapes when the icon can be built from circles, rectangles, lines, or polygons. Use paths for custom marks, curves, or compact complex outlines.

Can I create icon sets with the same workflow?

Yes. Reuse the same viewBox, palette, stroke-width values, and helper functions across icons so the set stays visually consistent.

Related Articles

• Draw SVG Shapes in Python covers the basic elements used in generated icons.
• Draw SVG Text in Python explains when icon labels or text marks should remain editable SVG text.
• SVG viewBox and Coordinates in Python explains scalable icon coordinate systems.
• Work with SVG Paths in Python explains how to build and edit path data.
• Change SVG Colors in Python shows how to recolor generated or existing SVG artwork.