Crear iconos SVG en Python

Respuesta rápida: Para crear iconos SVG en Python, use un viewBox cuadrado pequeño, cree formas simples y elementos <path> con create_element_ns(), agrupe elementos relacionados cuando sea necesario, defina los atributos fill y stroke, y guarde el resultado como archivo 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")

En este artículo aprenderá a:

configurar un lienzo SVG de tamaño de icono con un viewBox cuadrado;
combinar formas simples y path data en un icono compacto;
usar grupos y atributos compartidos para un marcado generado más limpio;
guardar iconos SVG reutilizables para UI, diagramas o recursos generados.

Los iconos SVG generados funcionan mejor cuando el sistema de coordenadas es simple, la paleta es limitada y la estructura de formas se puede inspeccionar con facilidad. Un viewBox de 64x64 o 100x100 suele ser suficiente para iconos pequeños.

Bloques de construcción de iconos SVG

Parte del icono	Elemento SVG típico	Notas
Badge de fondo	`<circle>` o `<rect>`	Use una forma rellena simple
Marca del símbolo	`<path>`, `<polyline>` o `<polygon>`	Mantenga path data cortos y legibles
Estilo compartido	`<g>`	Coloque `fill`, `stroke` o `stroke-linecap` comunes en un grupo
Lienzo escalable	`viewBox` raíz	Use un solo sistema de coordenadas para todos los tamaños de icono

Cómo crear iconos SVG en Python

Use este flujo cuando necesite gráficos de iconos generados en lugar de editar un archivo SVG existente:

Cree un SVGDocument.
Defina un viewBox cuadrado, como 0 0 64 64, con set_attribute().
Cree una forma de fondo, como un círculo o rectángulo redondeado, con create_element_ns().
Agregue la marca de primer plano con <path>, <polyline>, <polygon> o formas simples.
Defina los atributos fill, stroke, stroke-linecap y stroke-linejoin con set_attribute(), y agregue cada elemento visible con append_child().
Guarde el SVG con document.save() e inspeccione el resultado en el tamaño final de visualización.

Crear un icono de badge con check

El siguiente ejemplo crea un icono circular simple con marca de verificación. El círculo es el fondo del badge, y la marca de verificación es una <polyline> con extremos y uniones redondeados controlados por stroke-linecap y 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)

Este icono usa pocos elementos, por lo que la salida sigue siendo fácil de editar más tarde. Use este estilo para iconos de estado, badges de interfaz, botones simples y marcadores visuales generados.

La ilustración muestra el resultado de ejecutar el ejemplo: el elemento circular <circle> crea el badge, y la <polyline> blanca crea la marca de verificación. El viewBox de 64x64 mantiene compactas las coordenadas y facilita el escalado del icono.

Crear un icono con una marca de ruta

Use <path> cuando la marca de primer plano no sea una línea simple ni un <polygon>. El siguiente ejemplo crea un pequeño icono de destello con un rectángulo redondeado de fondo y una marca de ruta.

 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)

La marca <path> mantiene compacto el icono. Si su aplicación calcula geometría de iconos a partir de entradas de usuario, mantenga la lógica de creación de ruta cerca de los valores que describen la forma.

La ilustración muestra el icono de destello generado. El <rect> redondeado proporciona el fondo azul, mientras que <path> dibuja la marca de primer plano desde un valor d compacto.

Errores comunes y soluciones

Problema	Solución
El icono se recorta	Deje margen dentro del `viewBox` para `stroke` y esquinas redondeadas
El icono se ve borroso en tamaño pequeño	Use geometría clara, detalle limitado y valores `stroke-width` coherentes
La marca es difícil de recolorear	Mantenga primer plano y fondo como elementos separados
El archivo es demasiado complejo	Prefiera formas simples y path data cortos para iconos de UI
El icono escala mal	Defina un `viewBox` cuadrado estable y evite fijar solo posiciones en píxeles

FAQ

¿Qué viewBox debo usar para iconos SVG?

Un viewBox cuadrado como 0 0 64 64 o 0 0 100 100 suele ser lo más sencillo para iconos generados. Le da un sistema de coordenadas predecible que escala limpiamente.

¿Un icono SVG debe usar rutas o formas básicas?

Use formas básicas cuando el icono pueda construirse con círculos, rectángulos, líneas o polígonos. Use rutas para marcas personalizadas, curvas o contornos complejos compactos.

¿Puedo crear conjuntos de iconos con el mismo flujo?

Sí. Reutilice el mismo viewBox, paleta, valores stroke-width y funciones auxiliares entre iconos para que el conjunto se mantenga visualmente coherente.