Cómo cambiar colores, texto y trazados de un SVG online

Cambias el color de la forma, guardas, y el borde del dibujo sigue del color de antes. No es un fallo del editor: en un SVG el relleno y el trazo son dos propiedades independientes, y tocar una no arrastra la otra. Casi todos los problemas al cambiar colores, texto y trazados de un SVG online nacen de esa confusión inicial.

La buena noticia es que cada resultado visual tiene una propiedad concreta detrás. Identificarla antes de tocar nada evita la mitad de las correcciones posteriores.

Relleno, trazo y opacidad son tres cosas distintas

El relleno pinta el interior de la forma. El trazo pinta la línea que la recorre. La opacidad decide cuánto se transparenta una de las dos o el conjunto. Son propiedades separadas y se editan por separado, aunque en pantalla parezcan un único color.

Un caso típico: un icono con el relleno en rojo y el trazo en negro. Cambiar el relleno a verde deja el trazo negro, y el resultado se ve raro hasta que se ajustan los dos. Si el trazo tiene un ancho de dos unidades y el dibujo se muestra diez veces más grande, esa línea se renderiza a veinte píxeles. El trazo no se queda fino por mucho que se agrande el icono.

La opacidad tampoco es un color más claro. Al 50 % sobre un fondo blanco el resultado se parece a un tono pastel, pero sobre un fondo oscuro cambia por completo, porque el fondo participa en la mezcla. En términos de canal alfa, medio transparente son 128 de 255, no una versión lavada del mismo color.

Valores que se pueden comprobar

Los colores de un SVG se escriben en notación hexadecimal, y esa notación tiene una equivalencia directa con RGB. #FF0000 es rgb(255, 0, 0), rojo puro. #336699 es rgb(51, 102, 153), un azul grisáceo.

Esa correspondencia sirve para dos cosas. La primera, comprobar que el color que se aplicó es el que se quería y no un valor parecido. La segunda, comparar dos archivos sin abrirlos en el editor: si el hexadecimal coincide, el color coincide.

Degradados que siguen siendo editables

El editor trata los degradados como rellenos editables, no como imágenes pegadas encima. Eso significa que se puede mover el punto de origen, cambiar los colores de las paradas y ajustar la dirección sin volver a generarlo.

La consecuencia práctica es que un degradado no hay que reconstruirlo cada vez que cambia la paleta. Y también que un degradado mal definido se nota al ampliar, no al mirarlo en pequeño.

Texto vivo o texto convertido en contornos

El texto se mantiene como texto mientras no se convierta. Eso permite seguir editando el contenido y la tipografía. El precio es que el aspecto final depende de la fuente disponible en el momento de renderizar: si el archivo se abre en un equipo que no la tiene, la línea se compone con otra y el texto se recoloca.

Convertir el texto en contornos conserva la apariencia y elimina esa dependencia. A cambio, las letras dejan de ser caracteres: ya no se pueden seleccionar, buscar ni corregir. Para un logotipo cerrado suele ser lo correcto. Para un rótulo que todavía cambia, no.

Trazados: mover nodos sin deformar la curva

Un trazado se define por nodos y por las tangentes que salen de ellos. Mover un nodo cambia la posición; mover su tangente cambia la curvatura. Confundir ambas cosas produce ese efecto de goma que se ve en los dibujos retocados a medias.

Tres reglas que funcionan casi siempre. Añadir un nodo antes de intentar domar una curva rebelde. Comprobar si el trazado está cerrado antes de editarlo, porque un trazo abierto se comporta distinto al rellenar. Y trabajar con las operaciones booleanas para unir o restar formas en lugar de mover nodos a mano hasta que encajen.

Errores que se ven en el archivo final

El primero es cambiar el relleno y olvidar el trazo, o al contrario. El segundo es usar la opacidad como si fuera un color más claro. El tercero es convertir el texto en contornos demasiado pronto y descubrir después que había una errata.

Hay un cuarto error más silencioso: editar el archivo que ya está publicado. Conviene trabajar siempre sobre una copia y comprobar el resultado exportado, porque el editor muestra una interpretación del SVG y el navegador de destino muestra otra.

Probar los cambios sobre una copia

La forma más segura de practicar es duplicar el archivo, abrirlo en el Editor vectorial y cambiar una propiedad por vez, comprobando el efecto antes de pasar a la siguiente. Ese orden convierte el aprendizaje en algo acumulativo.

Si el flujo entero todavía no está claro, la guía sobre cómo editar archivos SVG online en tu navegador explica la secuencia de la primera sesión. Y cuando el problema no es el color sino el tamaño, la guía para redimensionar un SVG sin perder calidad ataca la escala y los trazos. Hay más material de este tipo en la biblioteca de guías.