Cambiar colores SVG en Python

Respuesta rápida: Para cambiar colores SVG en Python, cargue el archivo con SVGDocument, encuentre elementos con selectores o búsqueda por nombre de etiqueta, actualice fill, stroke, style o stop-color con set_attribute() y guarde el SVG editado.

1from aspose.svg import SVGDocument
2
3with SVGDocument("document.svg") as document:
4    circle = document.root_element.query_selector("circle")
5    if circle is not None:
6        circle.set_attribute("fill", "#2e86de")
7        circle.set_attribute("stroke", "#1b4f72")
8    document.save("recolored.svg")

En este artículo aprenderá a:

cambiar atributos SVG fill y stroke en Python;
reemplazar un valor de color textual exacto en varios elementos SVG;
actualizar colores guardados dentro de atributos inline style;
editar colores de paradas de gradiente SVG sin cambiar gráficos no relacionados.

Dónde se almacenan los colores SVG

Los colores SVG pueden definirse en varios lugares. Antes de cambiar un archivo, inspeccione el marcado y elija el método de edición que coincida con la forma en que el SVG original almacena el color.

Ubicación del color	Ejemplo	Mejor enfoque de edición
Atributo de presentación	`fill="#ff0000"`	Establecer `fill`, `stroke` u otro atributo de color en el elemento
Estilo inline	`style="fill:#ff0000;stroke:#222"`	Actualizar la propiedad necesaria dentro del atributo `style`
Parada de gradiente	`<stop stop-color="#ff0000">`	Actualizar `stop-color` en elementos `<stop>`
Estilo de grupo heredado	`<g fill="#ff0000">`	Cambiar el atributo del grupo o sobrescribir elementos hijos
Regla CSS	`<style>.logo { fill: red; }</style>`	Editar el texto de la hoja de estilos o convertir la regla en atributos inline

Los ejemplos siguientes usan edición basada en DOM. Esto suele ser más seguro que el reemplazo de texto plano porque apunta a elementos y atributos SVG, no a cada cadena coincidente del archivo.

Cómo cambiar colores SVG en Python

Use este flujo cuando necesite recolorear un archivo SVG y conservar su estructura:

Cargue el archivo SVG con SVGDocument.
Inspeccione dónde se almacena el color, por ejemplo en fill, stroke, inline style o stop-color.
Encuentre el elemento de destino o grupo de elementos con un selector, búsqueda por nombre de etiqueta o recorrido DOM.
Actualice el atributo de color o la declaración de estilo correspondiente.
Guarde el SVG editado y compare la salida con la imagen de origen.

Este artículo usa el archivo de ejemplo change-svg-colors.svg para los ejemplos de código y las ilustraciones. Contiene atributos de color directos, un estilo inline, color de grupo heredado y un gradiente, por lo que la misma entrada puede usarse en todo el artículo. Úselo como data/change-svg-colors.svg al ejecutar los ejemplos.

Cambiar colores Fill y Stroke

Use este flujo cuando el SVG almacena colores directamente en los atributos fill o stroke. El ejemplo carga change-svg-colors.svg, encuentra el primer círculo, cambia su fill y stroke y guarda el resultado como un nuevo archivo SVG.

 1import os
 2from aspose.svg import SVGDocument
 3
 4input_folder = "data/"
 5output_folder = "output/"
 6input_path = os.path.join(input_folder, "change-svg-colors.svg")
 7output_path = os.path.join(output_folder, "circle-recolored.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10with SVGDocument(input_path) as document:
11    svg_element = document.root_element
12    circle = svg_element.query_selector("circle")
13
14    if circle is not None:
15        circle.set_attribute("fill", "#2e86de")
16        circle.set_attribute("stroke", "#1b4f72")
17        circle.set_attribute("stroke-width", "4")
18
19    document.save(output_path)

El código sigue este flujo de edición de color SVG:

Carga el archivo SVG como SVGDocument.
Encuentra el elemento de destino con query_selector().
Actualiza los atributos fill, stroke y stroke-width con set_attribute().
Guarda el SVG editado con SVGDocument.save().

La ilustración siguiente muestra el archivo SVG de origen (a) y el resultado después de cambiar los atributos fill, stroke y stroke-width del círculo (b). Los demás elementos permanecen sin cambios, por lo que el efecto del primer ejemplo se ve con claridad.

SVG original y resultado tras cambiar los colores fill y stroke del círculo

Reemplazar un color específico en muchos elementos

Use este enfoque cuando quiera reemplazar un valor de color textual exacto en muchos elementos SVG. El ejemplo cambia cada atributo fill o stroke que coincide exactamente con el color antiguo.

 1import os
 2from aspose.svg import SVGDocument
 3
 4input_folder = "data/"
 5output_folder = "output/"
 6input_path = os.path.join(input_folder, "change-svg-colors.svg")
 7output_path = os.path.join(output_folder, "sample-blue.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10old_color = "#ff0000"
11new_color = "#0057b8"
12
13with SVGDocument(input_path) as document:
14    for element in document.get_elements_by_tag_name("*"):
15        for attribute_name in ("fill", "stroke"):
16            if element.has_attribute(attribute_name):
17                value = element.get_attribute(attribute_name).strip()
18                if value.lower() == old_color.lower():
19                    element.set_attribute(attribute_name, new_color)
20
21    document.save(output_path)

Este ejemplo compara el color como valor de texto. Cambia #ff0000 y #FF0000, pero no trata red, rgb(255,0,0) y #f00 como el mismo color. Si la entrada usa varios formatos de color, normalice esos valores en un paso previo propio o procese cada escritura explícitamente.

Cambiar colores en atributos Inline Style

Algunas herramientas SVG guardan colores dentro del atributo style en lugar de atributos directos fill o stroke. En ese caso, actualice la declaración CSS necesaria y conserve el resto del estilo inline.

 1import os
 2from aspose.svg import SVGDocument
 3
 4
 5def set_style_property(style_text, property_name, property_value):
 6    declarations = []
 7    updated = False
 8
 9    for part in style_text.split(";"):
10        part = part.strip()
11        if not part:
12            continue
13        if ":" not in part:
14            declarations.append(part)
15            continue
16
17        name, value = part.split(":", 1)
18        if name.strip().lower() == property_name.lower():
19            declarations.append(f"{name.strip()}: {property_value}")
20            updated = True
21        else:
22            declarations.append(f"{name.strip()}: {value.strip()}")
23
24    if not updated:
25        declarations.append(f"{property_name}: {property_value}")
26
27    return "; ".join(declarations)
28
29
30input_folder = "data/"
31output_folder = "output/"
32input_path = os.path.join(input_folder, "change-svg-colors.svg")
33output_path = os.path.join(output_folder, "badge-recolored.svg")
34os.makedirs(output_folder, exist_ok=True)
35
36with SVGDocument(input_path) as document:
37    badge = document.root_element.query_selector(".badge")
38
39    if badge is not None:
40        style = badge.get_attribute("style")
41        style = set_style_property(style, "fill", "#0f766e")
42        style = set_style_property(style, "stroke", "#134e4a")
43        badge.set_attribute("style", style)
44
45    document.save(output_path)

La función auxiliar cambia solo las propiedades de estilo solicitadas. Esto evita un error común en el que el código reemplaza todo el atributo style y elimina accidentalmente opacity, ancho de trazo, fuente o estilos relacionados con transform guardados en el mismo atributo.

Cambiar colores de paradas de gradiente

Los colores de gradiente suelen almacenarse en elementos <stop>. Para recolorear un gradiente, actualice los atributos stop-color en lugar de cambiar el fill de la forma que referencia el gradiente.

 1import os
 2from aspose.svg import SVGDocument
 3
 4input_folder = "data/"
 5output_folder = "output/"
 6input_path = os.path.join(input_folder, "change-svg-colors.svg")
 7output_path = os.path.join(output_folder, "change-svg-gradient-colors.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10new_gradient_colors = ["#2563eb", "#22c55e", "#facc15"]
11
12with SVGDocument(input_path) as document:
13    stops = document.get_elements_by_tag_name("stop")
14
15    for index, stop in enumerate(stops):
16        color = new_gradient_colors[min(index, len(new_gradient_colors) - 1)]
17        stop.set_attribute("stop-color", color)
18
19    document.save(output_path)

Si el gradiente contiene más stops que colores en la lista, el ejemplo reutiliza el último color. En código de producción, puede asignar colores por offset, por posición en el gradiente o por un valor stop-color existente.

La ilustración siguiente compara el gradiente SVG original (a) con el resultado después de actualizar los valores stop-color en las paradas de gradiente (b). El círculo, el elemento con estilo inline y el color heredado del grupo permanecen sin cambios, por lo que la imagen se centra solo en la edición del gradiente.

SVG original y resultado tras cambiar los colores de las paradas de gradiente

Errores comunes y soluciones

Problema	Causa probable	Solución
El color no cambió	El color está almacenado en `style`, una regla CSS, un gradiente o un grupo padre	Inspeccione el marcado SVG y actualice el lugar real donde se almacena el color
Solo cambió un elemento	El código usó `query_selector()` y encontró solo la primera coincidencia	Para muchas actualizaciones de atributos, prefiera la búsqueda por nombre de etiqueta como se muestra arriba. Use `query_selector_all()` solo para cambios compatibles con los nodos devueltos, como actualizaciones de texto.
Se perdieron estilos inline	Se sobrescribió todo el atributo `style`	Actualice solo la propiedad CSS necesaria y conserve las demás declaraciones
El color del gradiente no cambió	El color visible viene de elementos `<stop>` del gradiente	Actualice `stop-color` en los nodos `<stop>` dentro del gradiente
Se omitieron colores coincidentes	El archivo usa escrituras distintas, como `red`, `#f00` o `rgb(255,0,0)`	Procese cada formato de color esperado o normalice los colores antes de comparar valores
El archivo de salida no cambió	El documento editado no se guardó o se abrió el archivo equivocado	Llame a `document.save(output_path)` después de las ediciones y verifique la ruta de entrada

FAQ

¿Cómo cambio el color fill de SVG en Python?

Cargue el SVG con SVGDocument, encuentre el elemento con document.root_element.query_selector() o get_elements_by_tag_name(), luego llame a element.set_attribute("fill", "#2e86de") y guarde el documento con document.save(output_path).

¿Cómo cambio el color stroke de SVG en Python?

Cargue el SVG con SVGDocument, seleccione el elemento que dibuja el contorno y llame a element.set_attribute("stroke", "#1b4f72"). Si el contorno falta o es demasiado fino, establezca también stroke-width, por ejemplo element.set_attribute("stroke-width", "4"), y guarde el SVG.

¿Puedo reemplazar un color en todo el archivo SVG?

Sí. Recorra los elementos relevantes y actualice valores coincidentes de fill, stroke, style o stop-color. La coincidencia como texto funciona solo cuando la escritura del color en el SVG coincide con el valor que compara el código.

¿Por qué cambiar fill no afecta a mi SVG?

El color visible puede venir de un inline style, una regla CSS, un gradiente o un estilo heredado del padre. Inspeccione el marcado SVG antes de elegir la edición.

¿Puedo cambiar colores de gradiente SVG?

Sí. Cargue el SVG con SVGDocument, recorra las paradas de gradiente con document.get_elements_by_tag_name("stop"), actualice cada stop con stop.set_attribute("stop-color", new_color) y guarde el archivo editado con document.save(output_path).