Cómo cambiar los colores de un SVG y resolver problemas comunes

Hay tres formas reales de cambiar el color de un archivo SVG, y todas son gratuitas. Súbelo a una herramienta online para cambiar colores de SVG y haz clic en la muestra que quieras sustituir. Ábrelo en una aplicación vectorial como Inkscape, selecciona la forma y elige otro relleno. O abre el archivo en un editor de texto y cambia el código hexadecimal, porque un SVG es simplemente texto. Cambiar los colores de un vector tampoco pierde calidad: modificas una instrucción, sin repintar píxeles, así que nada se desenfoca ni se deteriora.

El método adecuado depende de lo que contenga el archivo. Y cuando un SVG se resiste a cambiar de color, casi siempre la causa está dentro del archivo, más que en la herramienta. Esta guía presenta primero los tres métodos y después el diagnóstico: las seis causas comunes por las que un cambio de color no se aplica, incluida aquella que ninguna herramienta de color puede solucionar.

Dónde guarda sus colores un SVG

Un archivo SVG es una lista de formas escritas como texto. Cada forma puede tener un fill para el interior y un stroke para el contorno, como explica la guía de MDN sobre rellenos y trazos SVG. No existe un único «color de la imagen» que puedas sustituir en un solo lugar. Un diseño que parece de un único color en pantalla puede ser un trazado ordenado o cuarenta trazados separados que simplemente comparten el mismo relleno.

De eso se trata. Cada método siguiente es una forma distinta de encontrar las formas y modificar su fill o stroke. También explica por qué los resultados varían tanto entre archivos: cuanto menos numerosas y más limpias sean las formas, más fácil será cambiar sus colores.

Elige tu método

Método 1: una herramienta online para cambiar colores de SVG

1. Abre una herramienta gratuita de color SVG en el navegador y sube el archivo; las mejores también aceptan código SVG pegado.
2. La herramienta enumera los colores que encuentra. Las más útiles agrupan los rellenos idénticos, así que «el azul» es una única muestra aunque cubra decenas de formas.
3. Haz clic en una muestra, elige el color sustituto y observa la vista previa.
4. Descarga el resultado y ábrelo una vez en una pestaña del navegador para comprobarlo.

Este es el método adecuado para la mayoría de las personas en la mayoría de las ocasiones. Comprueba dos cosas antes de confiarle un trabajo real: si también enumera los colores de los trazos y cómo maneja los degradados. Si muestra menos colores de los que ves en pantalla, parte del archivo es un degradado o una imagen incrustada, y un simple cambio de muestra no lo modificará.

Método 2: una aplicación de diseño vectorial

Inkscape es gratuito y hace todo lo que necesita esta tarea; Illustrator y Figma funcionan de forma similar.

1. Abre el SVG y haz clic en la parte que quieras cambiar. Si se selecciona todo el diseño como un bloque, está agrupado: haz doble clic para entrar en el grupo o desagrúpalo.
2. Cambia el relleno en el panel Relleno y borde de Inkscape o en la muestra de relleno de Illustrator o Figma.
3. Cuando un color visible esté repartido entre muchas formas, no hagas clic en ellas una por una. Haz clic derecho en una forma y usa Seleccionar lo mismo → Color de relleno en Inkscape, o la opción documentada de Illustrator Seleccionar → Mismo → Color de relleno. Quedan seleccionadas todas las formas que comparten ese relleno y un único cambio las recolorea todas.
4. Exporta o guarda como SVG simple.

Una aplicación de diseño también te permite ir más allá del color, por ejemplo mover formas o retocar curvas. Para conocer ese conjunto más amplio de herramientas, consulta nuestra guía para editar un SVG.

Método 3: un editor de texto

Como un SVG es texto, sirve cualquier editor: Bloc de notas, TextEdit o VS Code.

1. Abre el archivo .svg y busca fill=.
2. Cambia el valor, por ejemplo de fill="#1e3a5f" a fill="#c2410c", y guarda.
3. Actualiza el archivo en una pestaña del navegador para comprobar el resultado.

Hay tres precauciones. Los colores pueden escribirse como nombres (fill="black") además de valores hexadecimales. Los contornos están en stroke=, no en fill=. Y muchos archivos exportados no ponen el color directamente en la forma: usan clases y sitúan el valor hexadecimal real en un bloque <style> cerca del principio (.st0{fill:#1e3a5f;}). Modifica el hexadecimal de ese bloque y cambiarán todas las formas que tengan esa clase.

Este método destaca con los iconos de un color, donde basta buscar y reemplazar una vez, y para trabajar por lotes en una carpeta. Para una ilustración de cuarenta colores, es la opción lenta.

Si tu SVG está en un sitio web

¿Se puede cambiar el color de un SVG con CSS? La vía más directa consiste en insertar el marcado SVG directamente en el HTML. Entonces fill funciona como propiedad CSS, y asignar currentColor a los rellenos permite que el icono herede el color del texto que lo rodea. Un SVG cargado como <img> externo se trata como una imagen; MDN señala que JavaScript no puede manipular la estructura SVG en esa configuración, y los estilos de la página no seleccionan directamente sus trazados internos.

Si no puedes insertar el archivo directamente, vuelve a los métodos anteriores: cambia el color dentro del propio SVG y recárgalo. Para elegir cómo incluirlo, compara SVG insertado directamente frente a una imagen externa con la misma ilustración y una prueba de CSS en la página.

Para una silueta de interfaz de un único color, las máscaras CSS SVG y las formas transparentes de iconos ofrecen otra vía: pintar el elemento del icono con CSS y conservar los colores de los trazados de la imagen original.

Para un efecto de color reversible, compara feColorMatrix con modificar directamente los rellenos. Un filtro cambia los colores renderizados y conserva los colores originales, algo importante cuando entregas una ilustración editable.

Por qué tu SVG no cambia de color

Esta es la parte que omiten los tutoriales y donde falla la mayoría de los cambios de color. Recorre la tabla de arriba abajo.

Dos de estos casos merecen examinarse con más detalle.

La sorpresa del rectángulo de fondo

Algunos SVG incluyen un rectángulo de fondo del tamaño completo que no se ve sobre una página blanca. Si recoloreas «todo», aparece como un bloque de color detrás del diseño; algunas aplicaciones también lo seleccionan al hacer clic. Es una forma normal: selecciónala y elimínala o dale el color que realmente quieras. Si el rectángulo aparece blanco en otro software, es un problema relacionado pero distinto, explicado en nuestra guía para conservar un fondo transparente.

El SVG que no es un vector

El caso más persistente es este: ninguna forma se puede seleccionar, modificar los rellenos no hace nada y, al ampliar, los bordes se pixelan. Abre el archivo en un editor de texto y, en lugar de elementos <path>, encontrarás una etiqueta <image> con un enorme bloque de texto base64. Es una imagen rasterizada envuelta en un archivo .svg. Los conversores que no trazan realmente producen estos archivos, y ninguna herramienta de color puede ayudar porque no hay formas que repintar. Los filtros que los «colorean» solo tiñen los píxeles, normalmente con malos resultados. Los dos archivos se ven idénticos en pantalla, pero la diferencia es evidente en el código:

<!-- A real vector: a shape with a fill you can change -->
<path fill="#1e3a5f" d="M12 2 L22 20 H2 Z" />
 
<!-- A raster in an .svg shell: one sealed picture, no shapes -->
<image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." />

La solución consiste en volver a la propia imagen, idealmente al PNG o JPG original, y convertirla en un vector real con trazados reales. Nuestra guía sobre SVG que siguen viéndose pixelados explica cómo surgen estos falsos vectores y cómo detectarlos antes de depender de ellos. Cuando existen formas reales, todos los métodos de esta guía empiezan a funcionar.

Cambiar los colores de un archivo de corte: cada color es una capa

Una Cricut o Silhouette trata cada color de tu SVG como una capa, y cada capa significa otra pasada, otra hoja de material y más trabajo para retirar el sobrante. Por eso, cambiar los colores de un archivo de corte es planificar las capas: dar el mismo relleno a dos elementos los reúne en un corte, mientras que separar un color crea una capa nueva.

Eso hace que una operación sea especialmente útil para manualidades: combinar colores casi idénticos. Una ilustración trazada suele tener tres azules casi iguales que añaden capas sin aportar nada perceptible. Combínalos en uno y el archivo se cortará más rápido y será mucho más fácil retirar el sobrante. El flujo de reducción de la paleta SVG explica cómo combinar por función visual sin borrar el contraste ni el significado de las operaciones. Si creas deliberadamente diseños de varias capas, nuestra guía de SVG por capas cubre todo el proceso, y la página sobre SVG para Cricut explica la preparación de ilustraciones para máquinas de corte de principio a fin.

Si necesitas descargas separadas después de cambiar los colores, guarda cada color exacto como un archivo SVG alineado.

Cómo funciona con PerfectVector

Primero, una limitación que conviene aclarar: PerfectVector no edita archivos SVG que ya tienes. Convierte imágenes PNG, JPG y WebP en SVG. Pero una parte sorprendentemente grande de las dificultades para cambiar los colores de un SVG se remonta a esa conversión: el archivo que da problemas suele ser un trazado desordenado o ni siquiera un vector real.

Por eso, cuando el SVG proviene de una imagen o aún conservas la original, la forma más limpia de cambiar los colores empieza en el origen. Convierte la imagen en un SVG pensado para editarse: trazados limpios, pocos nodos y cada color como una forma editable independiente. Después usa el editor de colores integrado antes de descargar para sustituir cualquier color o combinar los similares, trabajando por color en vez de buscar trazados. Consigues la paleta deseada y un archivo más sencillo en una misma operación, y tus primeras conversiones son gratuitas, sin tarjeta de crédito.

Lo que no puede hacer un cambio de color

• Los degradados no son una sola muestra. Un degradado es una transición entre paradas de color. Puedes editar esas paradas, pero un simple «reemplazar este color» quizá solo cambie parte de la transición; por eso las ilustraciones con degradados pueden verse extrañas tras una sustitución poco cuidadosa.
• Los colores de pantalla no son los de impresión. SVG almacena instrucciones de color orientadas a pantalla, mientras que una impresión puede requerir un color de marca exacto, una tinta plana o una composición específica del negro. Si una exportación cambia lo que ves, diagnostica el cambio de color del SVG antes de sustituir la paleta; el formato de producción que solicite la imprenta sigue siendo la referencia de color.
• Cambiar el color no limpia la geometría. Los rellenos nuevos no unen fragmentos estrechos, cierran huecos ni reducen nodos. Un trazado desordenado con colores nuevos sigue siendo un trazado desordenado.

Antes de guardar

• Abre el archivo recoloreado de nuevo en una pestaña del navegador y compáralo con el original.
• Comprueba los contornos: ¿cambiaron los trazos junto con los rellenos donde correspondía?
• Busca un rectángulo de fondo suelto que hayas recoloreado por accidente.
• Para archivos de corte, cuenta las capas después de combinar colores; casi siempre conviene tener menos.
• Conserva una copia intacta del archivo original.

Preguntas frecuentes

¿Cómo cambio el color de un SVG sin Illustrator ni Photoshop? Usa una herramienta gratuita online para cambiar colores de SVG: sube el archivo, haz clic en una muestra y descárgalo. O usa Inkscape, un editor vectorial gratuito de escritorio. Para un icono de un color, también sirve abrir el archivo en cualquier editor de texto y cambiar el valor hexadecimal después de fill=. Ninguna de estas opciones cuesta dinero.

¿Por qué mi SVG sigue negro haga lo que haga? Si está en un sitio web, CSS no puede cambiar los estilos de un SVG cargado mediante una etiqueta img; insértalo directamente o edita el archivo. Si está en un editor, comprueba si hay un grupo que impide acceder a las formas, un trazo que aporta el color o colores definidos en un bloque de estilos. Si nada se puede seleccionar y el zoom muestra píxeles, el archivo es una imagen rasterizada envuelta en un .svg y no tiene formas que recolorear.

¿Se puede cambiar el color de un SVG en Canva? El editor específico de SVG de Canva indica que puedes subir, recolorear y descargar un SVG gratis y sin marca de agua. Las funciones SVG complejas pueden renderizarse de manera distinta en diferentes editores, así que revisa el archivo descargado antes de sustituir el original.

¿Puede un archivo SVG usar más de un color? Sí. Cada forma tiene su propio relleno y trazo, así que un SVG puede contener tantos colores como formas tenga, además de degradados. Por eso cambiar los colores de una ilustración multicolor implica modificar varios rellenos, no una configuración global.

¿Cómo cambio los colores de un SVG para un proyecto de Cricut? Puedes recolorear capas dentro de Cricut Design Space, pero lo hace por capa, no por forma. Para reorganizar qué partes comparten color y, por tanto, se cortan juntas, edita el SVG antes de subirlo: combina los colores que quieras en una misma capa y da un relleno distinto a todo lo que deba cortarse por separado.

¿Cambiar el color de un SVG reduce su calidad? No. El color de un vector es una instrucción de texto: cambiarlo modifica esa instrucción sin tocar la geometría. A diferencia de editar un PNG, puedes cambiar los colores de un SVG tantas veces como quieras sin perder calidad.

Fuentes

1. MDN: rellenos y trazos SVG — Explica fill, stroke, la opacidad y las propiedades relacionadas con el color en SVG.
2. MDN: añadir gráficos vectoriales a la web — Compara SVG insertado directamente con SVG cargado mediante <img>.
3. Adobe Illustrator: seleccionar objetos con el mismo relleno y trazo — Documenta la selección de ilustraciones por atributos de color compartidos.
4. W3C: contenido incrustado en SVG 2 — Define el contenido rasterizado <image> dentro de documentos SVG.
5. Canva: editor SVG — Fuente actual de las afirmaciones de Canva sobre subir, recolorear y descargar SVG.

Cambiar los colores de un SVG es rápido cuando el archivo coopera: elige el método adecuado para lo que tienes y diagnostica el problema antes de pelearte con las herramientas. Y si el problema es el propio archivo, evita esa pelea. Convierte la imagen original en un SVG limpio y editable y elige los colores mientras todavía resulte fácil.