SVG-Icons in Python erstellen

Kurze Antwort: Um SVG-Icons in Python zu erstellen, verwenden Sie eine kleine quadratische viewBox, erstellen einfache Formen und <path>-Elemente mit create_element_ns(), gruppieren verwandte Elemente bei Bedarf, setzen die Attribute fill und stroke und speichern das Ergebnis als SVG-Datei.

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

In diesem Artikel lernen Sie, wie Sie:

eine icongroße SVG-Zeichenfläche mit quadratischer viewBox einrichten;
einfache Formen und path data zu einem kompakten Icon kombinieren;
Gruppen und gemeinsame Attribute für saubereres generiertes Markup verwenden;
wiederverwendbare SVG-Icons für UI, Diagramme oder generierte Assets speichern.

Generierte SVG-Icons funktionieren am besten, wenn das Koordinatensystem einfach, die Palette begrenzt und die Formstruktur leicht prüfbar ist. Eine viewBox von 64x64 oder 100x100 reicht für kleine Icons oft aus.

Bausteine eines SVG-Icons

Icon-Teil	Typisches SVG-Element	Hinweise
Hintergrund-Badge	`<circle>` oder `<rect>`	Verwenden Sie eine einfache gefüllte Form
Symbolmarke	`<path>`, `<polyline>` oder `<polygon>`	Halten Sie path data kurz und lesbar
Gemeinsames Styling	`<g>`	Legen Sie gemeinsames `fill`, `stroke` oder `stroke-linecap` auf eine Gruppe
Skalierbare Zeichenfläche	Wurzel-`viewBox`	Verwenden Sie ein Koordinatensystem für alle Icon-Größen

SVG-Icons in Python erstellen

Verwenden Sie diesen Workflow, wenn Sie generierte Icon-Grafik brauchen, statt eine vorhandene SVG-Datei zu bearbeiten:

Erstellen Sie ein SVGDocument.
Setzen Sie eine quadratische viewBox, zum Beispiel 0 0 64 64, mit set_attribute().
Erstellen Sie eine Hintergrundform, zum Beispiel einen Kreis oder ein abgerundetes Rechteck, mit create_element_ns().
Fügen Sie die Vordergrundmarke mit <path>, <polyline>, <polygon> oder einfachen Formen hinzu.
Setzen Sie die Attribute fill, stroke, stroke-linecap und stroke-linejoin mit set_attribute() und hängen Sie jedes sichtbare Element mit append_child() an.
Speichern Sie das SVG mit document.save() und prüfen Sie das Ergebnis in der endgültigen Anzeigegröße.

Check-Badge-Icon erstellen

Das folgende Beispiel erstellt ein einfaches rundes Check-Icon. Der Kreis ist der Badge-Hintergrund, und das Häkchen ist eine <polyline> mit abgerundeten Enden und Ecken, gesteuert über stroke-linecap und 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)

Dieses Icon verwendet nur wenige Elemente, sodass die Ausgabe später leicht bearbeitet werden kann. Nutzen Sie diesen Stil für Status-Icons, UI-Badges, einfache Buttons und generierte visuelle Marker.

Die Abbildung zeigt das Ergebnis des Beispiels: Das runde <circle>-Element erzeugt den Badge, und die weiße <polyline> erzeugt das Häkchen. Die viewBox von 64x64 hält die Koordinaten kompakt und macht das Icon leicht skalierbar.

Icon mit Pfadmarke erstellen

Verwenden Sie <path>, wenn die Vordergrundmarke keine einfache Linie und kein <polygon> ist. Das nächste Beispiel erstellt ein kleines Funkel-Icon mit abgerundetem Rechteck als Hintergrund und einer Pfadmarke.

 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)

Die <path>-Marke hält das Icon kompakt. Wenn Ihre Anwendung Icon-Geometrie aus Benutzereingaben berechnet, halten Sie die Pfadlogik nah an den Werten, die die Form beschreiben.

Die Abbildung zeigt das generierte Funkel-Icon. Das abgerundete <rect> liefert den blauen Hintergrund, während <path> die Vordergrundmarke aus einem kompakten d-Wert zeichnet.

Häufige Fehler und Lösungen

Problem	Lösung
Icon wird abgeschnitten	Lassen Sie innerhalb der `viewBox` Rand für `stroke` und abgerundete Ecken
Icon wirkt bei kleiner Größe unscharf	Verwenden Sie klare Geometrie, begrenzte Details und konsistente `stroke-width`-Werte
Marke ist schwer umzufärben	Halten Sie Vordergrund und Hintergrund als getrennte Elemente
Datei ist zu komplex	Bevorzugen Sie einfache Formen und kurze path data für UI-Icons
Icon skaliert schlecht	Setzen Sie eine stabile quadratische `viewBox` und vermeiden Sie reine Pixelpositionen

FAQ

Welche viewBox sollte ich für SVG-Icons verwenden?

Eine quadratische viewBox wie 0 0 64 64 oder 0 0 100 100 ist für generierte Icons meist am einfachsten. Sie gibt Ihnen ein vorhersehbares Koordinatensystem, das sauber skaliert.

Sollte ein SVG-Icon Pfade oder Grundformen verwenden?

Verwenden Sie Grundformen, wenn das Icon aus Kreisen, Rechtecken, Linien oder Polygonen aufgebaut werden kann. Verwenden Sie Pfade für eigene Marken, Kurven oder kompakte komplexe Konturen.

Kann ich Icon-Sets mit demselben Workflow erstellen?

Ja. Verwenden Sie dieselbe viewBox, Palette, stroke-width-Werte und Hilfsfunktionen über mehrere Icons hinweg, damit das Set visuell konsistent bleibt.

SVG-Icons in Python erstellen

Bausteine eines SVG-Icons

SVG-Icons in Python erstellen

Check-Badge-Icon erstellen

Icon mit Pfadmarke erstellen

Häufige Fehler und Lösungen

FAQ

Welche viewBox sollte ich für SVG-Icons verwenden?

Sollte ein SVG-Icon Pfade oder Grundformen verwenden?

Kann ich Icon-Sets mit demselben Workflow erstellen?

Verwandte Artikel