Dibujar formas SVG en Python

Respuesta rápida: Para dibujar formas SVG en Python, cree un SVGDocument, defina el tamaño y el viewBox de la raíz SVG, cree elementos de forma con create_element_ns(), establezca atributos de geometría y estilo con set_attribute(), agregue cada forma a la raíz y guarde el SVG.

1from aspose.svg import SVGDocument
2
3with SVGDocument() as document:
4    svg = document.root_element
5    rect = document.create_element_ns("http://www.w3.org/2000/svg", "rect")
6    rect.set_attribute("width", "80")
7    rect.set_attribute("height", "50")
8    svg.append_child(rect)
9    document.save("shapes.svg")

En este artículo aprenderá a:

crear elementos de forma SVG en Python;
establecer atributos de geometría para rect, circle, ellipse, line, polyline y polygon;
aplicar atributos fill y stroke a formas generadas;
guardar un dibujo SVG completo construido con varios elementos.

Las formas SVG son los bloques más simples para diagramas, iconos, gráficos, badges e ilustraciones generadas. Cada forma tiene sus propios atributos de geometría: un rectángulo usa x, y, width y height; un círculo usa cx, cy y r; un polígono usa una lista points. Para una explicación más amplia del marcado SVG, consulte la guía SVG Shapes.

Conceptos básicos de formas SVG

Elemento	Atributos de geometría principales	Úselo para
`<rect>`	`x`, `y`, `width`, `height`, `rx`	Cajas, paneles, tarjetas y rectángulos redondeados
`<circle>`	`cx`, `cy`, `r`	Puntos, badges, marcadores e iconos circulares
`<ellipse>`	`cx`, `cy`, `rx`, `ry`	Óvalos o marcadores no circulares
`<line>`	`x1`, `y1`, `x2`, `y2`	Un segmento recto
`<polyline>`	`points`	Segmentos abiertos conectados
`<polygon>`	`points`	Formas cerradas como triángulos y estrellas

Cómo dibujar formas SVG en Python

Use este flujo cuando necesite generar un dibujo SVG a partir de primitivas de forma:

Cree un SVGDocument.
Defina los atributos width, height y viewBox en la raíz SVG.
Cree cada forma con document.create_element_ns(namespace_uri, qualified_name).
Establezca atributos de geometría y estilo con set_attribute().
Agregue cada forma visible a la raíz SVG con append_child().
Guarde el documento con document.save(output_path).

Dibujar rectángulos, círculos y elipses

Use rectángulos, círculos y elipses cuando la ilustración pueda describirse mediante valores simples de centro, tamaño y radio. El siguiente ejemplo crea una pequeña escena con un rectángulo de fondo a tamaño completo, un círculo como objeto principal y una elipse como sombra suave.

 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, "svg-basic-shapes.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10with SVGDocument() as document:
11    svg = document.root_element
12    svg.set_attribute("width", "300")
13    svg.set_attribute("height", "200")
14    svg.set_attribute("viewBox", "0 0 300 200")
15
16    rectangle = document.create_element_ns(namespace_uri, "rect")
17    rectangle.set_attribute("width", "300")
18    rectangle.set_attribute("height", "200")
19    rectangle.set_attribute("fill", "#e6eafa")
20    svg.append_child(rectangle)
21
22    circle = document.create_element_ns(namespace_uri, "circle")
23    circle.set_attribute("cx", "150")
24    circle.set_attribute("cy", "75")
25    circle.set_attribute("r", "50")
26    circle.set_attribute("fill", "#2e86de")
27    circle.set_attribute("stroke", "#0d47a1")
28    circle.set_attribute("stroke-width", "8")
29    svg.append_child(circle)
30
31    ellipse = document.create_element_ns(namespace_uri, "ellipse")
32    ellipse.set_attribute("cx", "150")
33    ellipse.set_attribute("cy", "155")
34    ellipse.set_attribute("rx", "70")
35    ellipse.set_attribute("ry", "20")
36    ellipse.set_attribute("fill", "#90a4ae")
37    ellipse.set_attribute("opacity", "0.35")
38    svg.append_child(ellipse)
39
40    document.save(output_path)

El SVG guardado contiene solo elementos DOM generados. Este enfoque resulta útil cuando una aplicación calcula las posiciones de las formas y después escribe el archivo SVG final.

La ilustración muestra cómo trabajan juntos los tres elementos: <rect> cubre todo el viewBox como fondo claro, <circle> crea el objeto azul y la <ellipse> semitransparente situada debajo se percibe como una sombra.

Escena SVG con fondo de rectángulo claro, círculo azul y sombra de elipse semitransparente creada en Python

Dibujar líneas, polilíneas y polígonos

Use line para un segmento, polyline para una línea abierta conectada y polygon para una forma cerrada. El atributo points es una lista de pares de coordenadas separados por espacios.

 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, "svg-lines-polygons.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10with SVGDocument() as document:
11    svg = document.root_element
12    svg.set_attribute("width", "520")
13    svg.set_attribute("height", "300")
14    svg.set_attribute("viewBox", "0 0 520 300")
15
16    line = document.create_element_ns(namespace_uri, "line")
17    line.set_attribute("x1", "30")
18    line.set_attribute("y1", "20")
19    line.set_attribute("x2", "130")
20    line.set_attribute("y2", "290")
21    line.set_attribute("stroke", "#4387be")
22    line.set_attribute("stroke-width", "10")
23    svg.append_child(line)
24
25    polyline = document.create_element_ns(namespace_uri, "polyline")
26    polyline.set_attribute("points", "100,100 160,50 220,100 280,50 340,100 400,50")
27    polyline.set_attribute("fill", "none")
28    polyline.set_attribute("stroke", "#fb6796")
29    polyline.set_attribute("stroke-width", "5")
30    svg.append_child(polyline)
31
32    polygon = document.create_element_ns(namespace_uri, "polygon")
33    polygon.set_attribute("points", "360,290 430,20 500,290")
34    polygon.set_attribute("fill", "#86a9b9")
35    polygon.set_attribute("stroke", "#fb6796")
36    polygon.set_attribute("stroke-width", "5")
37    svg.append_child(polygon)
38
39    document.save(output_path)

La línea y la polilínea usan stroke porque dibujan contornos. El polígono usa tanto fill como stroke porque crea un área cerrada.

La ilustración muestra la diferencia entre los tres elementos. <line> dibuja un único segmento recto, <polyline> dibuja un zigzag abierto a partir de la lista points y <polygon> cierra sus puntos automáticamente para formar un triángulo relleno.

Línea SVG, zigzag de polilínea abierta y triángulo de polígono relleno creados con Aspose.SVG for Python

Errores comunes y soluciones

Problema	Solución
La forma no aparece	Asegúrese de que el elemento se haya agregado a la raíz SVG con `append_child()`
La forma está fuera del área visible	Revise `viewBox`, coordenadas, `width` y `height`
La línea es invisible	Defina `stroke` y `stroke-width`; `fill` no hace visible una línea
El polígono parece abierto o incorrecto	Verifique los pares de coordenadas de `points` y su orden
El rectángulo redondeado no aparece redondeado	Defina `rx` o `ry` en el elemento `<rect>`

FAQ

Las respuestas siguientes usan el mismo patrón DOM que los ejemplos: crear el elemento SVG con document.create_element_ns(namespace_uri, element_name), establecer sus atributos de geometría y estilo, agregarlo a la raíz SVG y guardar el documento.

¿Qué elementos de forma SVG puedo crear en Python?

Puede crear formas SVG básicas como rect, circle, ellipse, line, polyline y polygon. Use estos elementos para cajas, badges, marcadores, diagramas simples, líneas conectadas, triángulos y otras formas con bordes rectos.

¿Cómo dibujo un rectángulo SVG con Python?

Use un elemento rect y defina x, y, width y height. Agregue atributos de estilo como fill, stroke o rx, añada el rectángulo a la raíz SVG y guarde el documento.

¿Cómo dibujo un círculo SVG con Python?

Use un elemento circle con cx, cy y r. Agregue atributos fill o stroke, añada el círculo a la raíz SVG y guarde el SVG.

¿Cómo dibujo una elipse SVG con Python?

Use un elemento ellipse con cx y cy para el centro; después defina rx y ry para los radios horizontal y vertical. Agregue fill, stroke u opacity antes de añadir el elemento a la raíz SVG.

¿Cómo dibujo una línea SVG con Python?

Use un elemento line y defina x1, y1, x2 y y2. Una línea necesita stroke y normalmente stroke-width; establecer solo fill no la hará visible.

¿Cómo dibujo una polilínea SVG con Python?

Use un elemento polyline y defina el atributo points con pares de coordenadas, por ejemplo "30,120 70,75 115,110". Establezca fill="none" cuando solo quiera el contorno conectado.

¿Cómo dibujo un triángulo SVG con Python?

Use un elemento polygon con tres pares de coordenadas en el atributo points, por ejemplo "50,10 90,80 10,80". Agregue fill y stroke, añada el polígono a la raíz SVG y guarde el SVG.

¿Cómo creo un rectángulo redondeado SVG con Python?

Use un elemento rect y defina rx o ry además de x, y, width y height. Los valores rx y ry controlan el radio de las esquinas.

¿Por qué mi forma SVG no es visible?

Una forma suele ser invisible si no se agregó a la raíz SVG, está fuera del viewBox o no tiene los atributos de pintura necesarios. Para líneas y polilíneas, defina stroke y stroke-width; para formas cerradas, defina fill, stroke o ambos.

¿Cuándo debería usar polygon en lugar de path?

Use polygon para formas cerradas creadas con segmentos rectos. Use <path> cuando la forma necesite curvas, comandos mixtos, varios subtrazados o geometría más compleja.