Créer des icônes SVG en Python

Réponse rapide: Pour créer des icônes SVG en Python, utilisez un petit viewBox carré, créez des formes simples et des éléments <path> avec create_element_ns(), regroupez les éléments liés si nécessaire, définissez les attributs fill et stroke, puis enregistrez le résultat comme fichier SVG.

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

Dans cet article, vous apprendrez à:

• configurer un canevas SVG de taille icône avec un viewBox carré;
• combiner des formes simples et des path data dans une icône compacte;
• utiliser des groupes et attributs partagés pour un balisage généré plus propre;
• enregistrer des icônes SVG réutilisables pour l’interface, les diagrammes ou les ressources générées.

Les icônes SVG générées fonctionnent mieux lorsque le système de coordonnées est simple, la palette limitée et la structure des formes facile à inspecter. Un viewBox de 64x64 ou 100x100 suffit souvent pour de petites icônes.

Blocs de construction d’une icône SVG

Partie de l’icône	Élément SVG typique	Notes
Badge de fond	<circle> ou <rect>	Utilisez une forme remplie simple
Marque du symbole	<path>, <polyline> ou <polygon>	Gardez les path data courtes et lisibles
Style partagé	<g>	Placez fill, stroke ou stroke-linecap communs sur un groupe
Canevas scalable	viewBox racine	Utilisez un seul système de coordonnées pour toutes les tailles d’icône

Comment créer des icônes SVG en Python

Utilisez ce workflow lorsque vous avez besoin d’une icône générée plutôt que de modifier un fichier SVG existant:

1. Créez un SVGDocument.
2. Définissez un viewBox carré, comme 0 0 64 64, avec set_attribute().
3. Créez une forme d’arrière-plan, comme un cercle ou un rectangle arrondi, avec create_element_ns().
4. Ajoutez la marque de premier plan avec <path>, <polyline>, <polygon> ou des formes simples.
5. Définissez les attributs fill, stroke, stroke-linecap et stroke-linejoin avec set_attribute(), puis ajoutez chaque élément visible avec append_child().
6. Enregistrez le SVG avec document.save() et vérifiez le résultat à sa taille d’affichage finale.

Créer une icône de badge avec coche

L’exemple suivant crée une icône circulaire simple avec coche. Le cercle est l’arrière-plan du badge, et la coche est une <polyline> avec des extrémités et jonctions arrondies contrôlées par stroke-linecap et 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)

Cette icône utilise peu d’éléments, ce qui rend la sortie facile à modifier plus tard. Utilisez ce style pour les icônes d’état, badges d’interface, boutons simples et marqueurs visuels générés.

L’illustration montre le résultat de l’exemple: l’élément circulaire <circle> crée le badge, et la <polyline> blanche crée la coche. Le viewBox de 64x64 garde les coordonnées compactes et facilite la mise à l’échelle de l’icône.

Créer une icône avec une marque de chemin

Utilisez <path> lorsque la marque de premier plan n’est pas une simple ligne ou un <polygon>. L’exemple suivant crée une petite icône de scintillement avec un rectangle arrondi en arrière-plan et une marque de chemin.

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)

La marque <path> garde l’icône compacte. Si votre application calcule la géométrie d’icône à partir d’entrées utilisateur, gardez la logique de construction du chemin près des valeurs qui décrivent la forme.

L’illustration montre l’icône de scintillement générée. Le <rect> arrondi fournit l’arrière-plan bleu, tandis que <path> dessine la marque de premier plan depuis une valeur d compacte.

Erreurs courantes et solutions

Problème	Solution
L’icône est recadrée	Laissez une marge dans le viewBox pour stroke et les coins arrondis
L’icône semble floue en petite taille	Utilisez une géométrie claire, peu de détails et des valeurs stroke-width cohérentes
La marque est difficile à recolorer	Gardez le premier plan et l’arrière-plan comme éléments séparés
Le fichier est trop complexe	Préférez des formes simples et des path data courtes pour les icônes d’interface
L’icône se met mal à l’échelle	Définissez un viewBox carré stable et évitez de coder uniquement des positions en pixels

FAQ

Quel viewBox utiliser pour les icônes SVG?

Un viewBox carré comme 0 0 64 64 ou 0 0 100 100 est généralement le plus simple pour les icônes générées. Il fournit un système de coordonnées prévisible qui se met proprement à l’échelle.

Une icône SVG doit-elle utiliser des chemins ou des formes de base?

Utilisez des formes de base lorsque l’icône peut être construite avec des cercles, rectangles, lignes ou polygones. Utilisez des chemins pour les marques personnalisées, courbes ou contours complexes compacts.

Puis-je créer des jeux d'icônes avec le même workflow?

Oui. Réutilisez le même viewBox, la même palette, les mêmes valeurs stroke-width et les mêmes fonctions d’aide entre les icônes afin que le jeu reste visuellement cohérent.

Articles associés

• Dessiner des formes SVG en Python couvre les éléments de base utilisés dans les icônes générées.
• Dessiner du texte SVG en Python explique quand les libellés ou marques textuelles d’une icône doivent rester du texte SVG éditable.
• SVG viewBox et coordonnées en Python explique les systèmes de coordonnées scalables pour les icônes.
• Travailler avec les chemins SVG en Python explique comment construire et modifier les path data.
• Changer les couleurs SVG en Python montre comment recolorer des graphiques SVG générés ou existants.