Cómo usar el extractor y editor de colores SVG
- Elige o suelta un archivo SVG, o pega el código SVG en el cuadro.
- En la lista de colores, pulsa el cuadro de color que hay a la derecha de un color y elige uno nuevo. También puedes cambiarlo todo a la vez con invertir, escala de grises, un solo color o desplazamiento de tono.
- Mira la vista previa y luego copia el código, guarda el SVG o guarda un PNG con el ancho que quieras.
Dónde guarda sus colores un SVG
Un SVG es un archivo de texto que describe una imagen con puntos, líneas y formas, así que los colores también se guardan como texto. Los lugares típicos son los atributos fill y stroke de las formas, los atributos style y las reglas dentro de una etiqueta style cerca del principio del archivo. Esta herramienta gratuita recorre todos esos lugares para encontrar colores y agrupa los colores repetidos en una sola fila con un recuento.
Cuando cambias un color, solo se sustituye el texto de los lugares donde estaba escrito y el resto del código queda intacto. Así, las paradas de los degradados y los colores de los trazos cambian juntos mientras las formas y las posiciones siguen como estaban. En los colores con transparencia, solo se usa el RGB del color nuevo y se conserva la transparencia original.
Los SVG de iconos a menudo no indican ningún color y se dibujan en negro, o usan currentColor, que significa el color de texto actual. Estos archivos pueden mostrar una lista vacía, por eso hay una opción para poner un relleno por defecto en el svg raíz. Es la forma más rápida de cambiar el color de un icono de un solo color.
Ideas y límites
Cuando cambia el color de tu marca, puedes recolorear el SVG del logotipo y guardar una versión nueva sin abrir un programa de diseño. Copiar la lista de colores también deja constancia de qué color se cambió por cuál.
Si un icono gratuito descargado no encaja con el ambiente de tu sitio, unifícalo en un solo color. El botón de todos a un solo color convierte un icono con muchos colores en un icono de un solo color. El botón de escala de grises ayuda al preparar un borrador de impresión.
Invertir es útil para probar rápidamente un logotipo sobre fondos oscuros. Una inversión simple no siempre queda bien, así que cambia el fondo de la vista previa a oscuro para comprobarlo y vuelve a elegir uno o dos colores si hace falta.
El desplazamiento de tono sirve para hacer versiones de temporada o de evento de una misma ilustración. Se conservan la luminosidad y la saturación, así que el contraste entre las formas no se desploma. Mueve el control deslizante y guarda en la posición que prefieras.
Esta herramienta solo cambia los colores escritos como texto dentro del SVG. Si hay incrustada una foto, como un PNG o un JPG, sus colores no se pueden cambiar, y los archivos que definen colores con variables CSS no se reconocen en la variable. Los colores creados por efectos de filtro complejos pueden no aparecer en la lista.
Al guardar un PNG, tú fijas el ancho y la altura se calcula con la proporción original. Como es arte vectorial, se mantiene nítido en tamaños grandes, así que elige un tamaño generoso para la impresión o las pantallas de alta resolución.
Si varios archivos deben seguir la misma regla de color, copia la lista de colores del primer archivo y elige los mismos colores en el siguiente. El botón de copiar la lista de colores es práctico para anotar qué color se cambió y cómo. Es gratis para usarlo muchas veces y ningún archivo se queda en un servidor, así que experimenta con tranquilidad.
Consejos para cambiar colores con seguridad
- Guarda primero el SVG original con otro nombre.
- En la lista de colores, los que tienen un recuento alto suelen ser el fondo o el cuerpo principal.
- Después de invertir o desplazar el tono, comprueba sobre fondos oscuros y claros.
- Si un icono es de un solo color negro, la opción de relleno por defecto es la más sencilla.
- Si el SVG viene de una fuente desconocida, lee la nota sobre los scripts.
Preguntas frecuentes
¿Mi SVG se sube a un servidor?
No. El archivo se lee y se procesa solo en tu navegador y nunca se envía a ningún sitio. La vista previa se dibuja solo como imagen, así que los scripts que haya dentro del SVG no se ejecutan.
¿Qué colores encuentra?
Encuentra atributos de color como fill, stroke y stop-color, y las mismas propiedades dentro de los atributos style y de las etiquetas style. Admite #RGB, #RRGGBB, rgb() y nombres de color como red, y el mismo color escrito de distintas formas se agrupa en uno con un recuento.
No aparece ningún color en la lista.
Los SVG de iconos a menudo no indican un color y se dibujan en el negro por defecto. Activa la opción de relleno por defecto y elige un color, y se aplica al svg raíz. Las partes que usan currentColor cambian al mismo color.
¿Qué pasa con los colores con transparencia?
En los colores con transparencia, como rgba() o el hexadecimal de 8 dígitos, solo se aplica el RGB del color nuevo y se conserva la transparencia original. Los valores stop-color de los degradados cambian del mismo modo.
¿En qué se diferencian el desplazamiento de tono y invertir?
El desplazamiento de tono conserva la luminosidad y la saturación y gira solo el tono, cambiando de golpe el ambiente general. Invertir da la vuelta a cada color hacia su opuesto, lo cual es útil para hacer una versión para fondos oscuros. Puedes deshacer cualquiera de los dos con el botón Restablecer.
Notas y limitaciones
Un SVG es un archivo de texto, así que un archivo de una fuente desconocida puede contener scripts. La vista previa de esta herramienta no ejecuta scripts, pero comprueba el origen antes de abrir en otro lugar un SVG editado. Los archivos se procesan solo en el navegador y no se envían a un servidor.