Trabajar con rutas SVG en Python

Respuesta rápida: Para trabajar con rutas SVG en Python, cargue el archivo con SVGDocument, encuentre un elemento <path> con Element.query_selector(), reemplace su atributo d con set_attribute() y guarde el SVG editado.

1from aspose.svg import SVGDocument
2
3with SVGDocument("document.svg") as document:
4    path = document.root_element.query_selector("#wave-path")
5    if path is not None:
6        path.set_attribute("d", "M40 125 C90 65 150 65 200 125 S310 185 370 95")
7    document.save("edited.svg")

En este artículo aprenderá a:

reemplazar todo el atributo d de un <path> SVG;
crear path data desde valores de forma más fáciles, como coordenadas, tamaños o puntos;
agregar un segmento de ruta controlado a una plantilla conocida;
decidir cuándo editar path data y cuándo usar el atributo transform.

Los SVG path data se almacenan en el atributo d de un elemento <path>. Contienen comandos de dibujo como M para mover, L para línea, C para curva Bézier cúbica, Q para curva cuadrática y Z para cerrar la ruta. Editar este valor cambia la geometría real de la ruta, no solo su posición renderizada.

Use la edición de path data cuando necesite cambiar el contorno en sí. Si solo necesita mover, rotar o escalar una forma existente, use el atributo transform en su lugar. Consulte Mover, rotar y escalar elementos SVG en Python para flujos de transformación.

Conceptos básicos de edición de path data

El flujo más seguro es reemplazar todo el valor d por una cadena de ruta válida conocida. Esto es útil para iconos, diagramas generados, marcas simples y archivos SVG de plantilla donde la ruta tiene un ID estable.

Tarea	Edite esto	Úselo cuando
Cambiar el contorno de la ruta	atributo `d`	La geometría de la forma debe cambiar
Mover o escalar el mismo contorno	atributo `transform`	La forma debe conservar sus coordenadas originales
Generar ruta desde parámetros de forma	atributo `d` construido desde coordenadas, tamaños o puntos	La entrada del usuario es más fácil como valores de forma que como comandos de ruta
Recolorear o cambiar estilo de la ruta	`fill`, `stroke`, `style`	Solo cambia la apariencia

Cómo editar SVG path data en Python

Use este flujo breve cuando un SVG existente contenga un elemento <path> y necesite cambiar su geometría:

Cargue el archivo SVG con SVGDocument.
Encuentre el <path> objetivo por ID, nombre de etiqueta u otro selector estable, por ejemplo con query_selector().
Prepare un valor d válido. Puede escribir la cadena de ruta completa, construirla desde parámetros de forma como coordenadas, tamaños o puntos, o agregar un segmento conocido en una plantilla controlada.
Establezca los nuevos datos de ruta con set_attribute(), por ejemplo set_attribute("d", path_data).
Guarde el SVG editado con document.save() y abra el archivo de salida para verificar la nueva geometría.

Los ejemplos siguientes siguen estos mismos pasos con distintas fuentes para el nuevo valor d.

Reemplazar SVG path data

Los ejemplos de código usan python-edit-svg-path-data.svg como archivo de entrada. En el primer flujo, el código encuentra #wave-path, reemplaza su atributo d por una nueva curva y guarda el resultado como path-data-replaced.svg.

 1import os
 2from aspose.svg import SVGDocument
 3
 4input_folder = "data/"
 5output_folder = "output/"
 6input_path = os.path.join(input_folder, "python-edit-svg-path-data.svg")
 7output_path = os.path.join(output_folder, "path-data-replaced.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10new_path_data = "M30 140 C85 60 155 80 220 120 S320 180 380 90"
11
12with SVGDocument(input_path) as document:
13    wave_path = document.root_element.query_selector("#wave-path")
14
15    if wave_path is not None:
16        wave_path.set_attribute("d", new_path_data)
17
18    document.save(output_path)

El código cambia la geometría de la ruta ondulada. No cambia stroke ni fill, por lo que el estilo visual se mantiene igual mientras cambia la forma de la curva. La imagen siguiente compara el SVG de origen (a) con path-data-replaced.svg (b).

SVG original y resultado editado después de reemplazar SVG path data

Crear path data desde coordenadas de rectángulo

Escribir el atributo d a mano resulta incómodo cuando la entrada procede de un formulario, una base de datos, un diseño de gráfico u otra parte de una aplicación. Los usuarios y los datos de aplicación suelen describir un rectángulo como x, y, width y height, no como comandos de ruta SVG.

El siguiente ejemplo mantiene ese modelo de entrada fácil para el usuario. Toma coordenadas de rectángulo, las convierte en comandos de ruta, escribe esos comandos en el #marker-path existente y guarda el resultado como path-data-from-rectangle.svg. El marcador de origen es un triángulo, pero la nueva geometría se genera intencionalmente como rectángulo. Esto resulta útil cuando una plantilla debe conservar un elemento <path> mientras la aplicación o la interfaz recoge valores simples de rectángulo. Los conjuntos de iconos, máscaras y plantillas reutilizables a menudo esperan rutas, incluso si los datos de entrada son más fáciles de describir como una caja.

 1import os
 2from aspose.svg import SVGDocument
 3
 4input_folder = "data/"
 5output_folder = "output/"
 6input_path = os.path.join(input_folder, "python-edit-svg-path-data.svg")
 7output_path = os.path.join(output_folder, "path-data-from-rectangle.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10rect_x = 60
11rect_y = 20
12rect_width = 80
13rect_height = 60
14
15rect_path_data = (
16    f"M{rect_x} {rect_y} "
17    f"H{rect_x + rect_width} "
18    f"V{rect_y + rect_height} "
19    f"H{rect_x} Z"
20)
21
22with SVGDocument(input_path) as document:
23    marker_path = document.root_element.query_selector("#marker-path")
24
25    if marker_path is not None:
26        marker_path.set_attribute("d", rect_path_data)
27
28    document.save(output_path)

El código no pide al usuario que escriba comandos M, H, V o Z. Acepta valores normales de rectángulo y genera SVG path data válidos a partir de ellos. El <path> existente conserva fill, stroke y otros atributos, mientras solo cambia la geometría guardada en d.

La imagen siguiente compara el SVG de origen (a) con path-data-from-rectangle.svg (b).

SVG original y resultado editado después de crear path data desde coordenadas de rectángulo

Agregar un segmento de ruta en una plantilla controlada

Puede agregar comandos a path data existentes cuando la ruta de entrada es una plantilla controlada y sabe dónde termina la ruta actual. El ejemplo siguiente lee el valor d actual de #wave-path, agrega un segmento de línea y guarda path-data-extended.svg.

 1import os
 2from aspose.svg import SVGDocument
 3
 4input_folder = "data/"
 5output_folder = "output/"
 6input_path = os.path.join(input_folder, "python-edit-svg-path-data.svg")
 7output_path = os.path.join(output_folder, "path-data-extended.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10with SVGDocument(input_path) as document:
11    wave_path = document.root_element.query_selector("#wave-path")
12
13    if wave_path is not None:
14        current_path_data = wave_path.get_attribute("d").strip()
15        wave_path.set_attribute("d", current_path_data + " L395 95")
16
17    document.save(output_path)

Use este enfoque solo cuando la ruta de origen sea predecible. En archivos SVG arbitrarios, path data pueden contener comandos relativos, varios subtrazados, comandos abreviados o formas cerradas. En esos casos, reemplazar todo el valor d o usar un analizador de rutas SVG dedicado es más seguro que editar texto de comandos por suposición.

La imagen siguiente compara el SVG de origen (a) con path-data-extended.svg (b). El segmento de línea añadido continúa desde el final de la ruta ondulada original; por eso esta técnica solo debe usarse cuando se conocen el punto final y el contexto del comando.

SVG original y resultado editado después de agregar un segmento a SVG path data

Errores comunes y soluciones

Problema	Solución
La ruta desaparece	Compruebe que el nuevo valor `d` sea SVG path data válido y empiece con un comando de movimiento como `M`
La ruta se mueve pero la forma no cambia	Editó `transform` en lugar de `d`; edite `d` cuando deba cambiar la geometría
El archivo de salida no cambia	Guarde el documento después de editar y abra la ruta de salida, no el SVG de entrada
Los comandos agregados crean una forma extraña	Agregue comandos solo si conoce el punto final actual y el tipo de comando; de lo contrario, reemplace todo el valor `d`
El rectángulo aparece en el lugar incorrecto	Revise los valores `x`, `y`, `width` y `height` antes de crear la cadena `d`
Las curvas se ven distintas de lo esperado	Verifique si la ruta usa comandos cúbicos `C`, cuadráticos `Q`, suaves `S` o `T`, o comandos relativos en minúscula

FAQ

¿Cómo edito SVG path data en Python?

Cargue el SVG con SVGDocument, encuentre el elemento <path> objetivo y llame a set_attribute("d", new_path_data). Guarde el documento después de actualizar el atributo d.

¿Qué es el atributo d de SVG?

El atributo d almacena comandos de ruta que definen la geometría de un elemento <path>. Comandos como M, L, C, Q y Z describen movimientos, líneas, curvas y rutas cerradas.

¿Debo editar path data o usar transform?

Edite d cuando deba cambiar el contorno real. Use transform cuando solo necesite mover, rotar o escalar el contorno existente sin reescribir sus coordenadas.

¿Puedo agregar comandos a SVG path data existentes?

Sí, pero solo con entradas controladas donde se conocen el punto final actual y el contexto del comando. Para archivos SVG arbitrarios, reemplace todo el valor d o analice los path data antes de modificarlos.

¿Puedo editar todas las rutas con query_selector_all()?

No para el flujo con set_attribute("d", ...) mostrado en este artículo. En Aspose.SVG for Python via .NET, los elementos devueltos por query_selector_all() pueden ser objetos Node que no exponen set_attribute(). Para actualizar el atributo d en muchas rutas, use document.get_elements_by_tag_name("path"), recorra los elementos devueltos y llame a set_attribute() en cada uno.