Cambiar colores de un SVG

Sobre cambiar los colores de un SVG

Un SVG es texto. En algún punto de su interior, una forma dice fill="#1f2937", y esa es toda la razón de que el icono sea gris oscuro. Cambia esos siete caracteres y el icono será lo que tú quieras.

El problema es encontrarlos. Una exportación real de Illustrator o Figma no pone sus colores en un sitio obvio: los reparte entre atributos fill, atributos style, un bloque <style> lleno de reglas de clase y las paradas de un degradado. Abre el archivo en un editor de texto y estarás buscando, entre mil líneas, las once que importan.

Esta herramienta lee el archivo entero, reúne cada color que usa y los ordena en una tabla. Cambia el color de la derecha de una fila y cambian con él todas las formas que lo usaban, en la vista editada, según eliges. Lo que vuelve es tu archivo con nuevos valores de color: nada más tocado.

Dos formas de cambiar un color

• Por color: la tabla bajo las imágenes lista cada color distinto del archivo: a la izquierda lo que es, a la derecha en qué se convierte. Cada fila empieza en su propio original, así que nada cambia hasta que tú lo digas. Cambia uno y todos sus usos cambian a la vez. Es lo que quieres para «pon en verde las partes azules» y para recolorear un icono a una paleta de marca.
• Por forma: pulsa cualquier forma de la imagen y coloréala sola, aunque comparta color con otras veinte. Su relleno y su contorno reciben valores propios, y nada más se mueve.

Las dos se complementan: primero ajusta la paleta, luego arregla la forma que tenía que ser distinta.

Todo de un solo color

Con diferencia, el trabajo más frecuente. Llega un icono en cinco grises y lo necesitas en blanco liso para una cabecera oscura, en negro liso para imprimir, o en un color de marca para una serie de botones.

Elige un color, pulsa Aplicar, y todos los colores del archivo pasan a ser ese. Las formas sin relleno se quedan sin relleno, así que los contornos siguen siendo contornos y los huecos siguen siendo huecos.

Dónde busca los colores

• fill y stroke escritos como atributos
• Las mismas propiedades dentro de un atributo style
• bloques <style>: reglas de clase como .cls-1 { fill: #231f20; }, que es como Illustrator escribe casi todas sus exportaciones
• stop-color dentro de los degradados, para recolorear un degradado parada a parada
• flood-color y lighting-color en los filtros

Se entienden los colores escritos de cualquier forma que CSS permita: #f00, #ff0000, rgb(255,0,0), rgba(255,0,0,.5) y nombres como red o darkslategray. La transparencia se conserva: una forma medio transparente sigue medio transparente en su nuevo color.

Lo que no toca

• Los degradados y patrones como tales. Las paradas de un degradado se pueden recolorear; el degradado en sí no se convierte en un color plano, y una forma rellena con url(#pattern) se deja como está.
• Los mapas de bits incrustados. Un PNG pegado dentro de un SVG es una foto, no una forma, y no tiene relleno que cambiar. Para eso usa Selector de color de imagen o un editor de imágenes.
• Todo lo que no sea un color. Opacidad, grosor de trazo, transformaciones y texto salen tal y como entraron.

No se sube nada

El archivo se lee, se recolorea y se reescribe dentro de tu navegador. Nunca llega a un servidor, lo que importa cuando el archivo es un logotipo sin publicar, la marca de un cliente o una obra bajo acuerdo de confidencialidad.

También significa que no hay espera de subida ni límite de tamaño, y que la herramienta sigue funcionando sin conexión una vez cargada la página.

Una excepción deliberada a «no se cambia nada»: si el archivo contiene un bloque <script>, se quita, y la página te lo dice. Una imagen no tiene por qué llevar código ejecutable, y esta herramienta tiene que dibujar el archivo para enseñártelo.

Para qué se usa

• Recolorear un juego de iconos a una paleta de marca sin abrir un programa de diseño
• Dejar un logotipo en blanco liso para una cabecera oscura, o en negro liso para imprenta
• Arreglar la única forma que salió del color equivocado
• Sacar versiones clara y oscura del mismo gráfico
• Cambiar las paradas de un degradado sin reconstruirlo
• Probar colores deprisa, porque la imagen se actualiza según eliges

Conviene saber

• Las dos vistas son el archivo antes y después, dibujadas a la misma escala, y la editada es el documento de verdad, así que lo que ves es exactamente lo que se descarga
• Un cambio forma a forma se escribe como un simple atributo fill o stroke cuando eso basta, y como un style en línea solo si una regla <style> del archivo fuera a imponerse: la herramienta comprueba qué ha pasado de verdad en vez de suponerlo
• Los colores se agrupan por su valor, así que #FFF, #ffffff y white son una sola fila
• Cada fila tiene su propio deshacer, y Devolver todos los colores deja el archivo como llegó
• Un archivo con cientos de colores casi siempre es una foto vectorizada; solo se listan los más usados
• Para recortar el espacio vacío alrededor del resultado, usa Recortar SVG
• Para convertir el resultado en PNG, usa SVG a PNG

Cómo se usa

• Haz clic en Haz clic para subir o arrastra tu SVG al recuadro
• Cada color del archivo aparece como una fila de la tabla, el original a la izquierda
• Ajusta el color de la derecha —con el selector o escribiendo un hexadecimal— para cambiarlo allí donde se use
• O pulsa una forma de la imagen editada para colorear solo esa
• Usa Todo de un solo color para una versión lisa de un color
• Pulsa Descargar SVG, o Copiar el código SVG para pegarlo directamente en una página

Herramientas relacionadas

• Recortar SVG — quitar el espacio vacío alrededor del resultado
• SVG a PNG — convertir el SVG recoloreado en un mapa de bits
• SVG a JPG — un SVG como imagen plana
• Imagen a SVG — vectorizar antes un logotipo
• Paleta de colores de una imagen — sacar una paleta de una foto
• Contraste de color — comprobar que los colores elegidos se leen bien