Desarrollador / Colores de SVG
Cambiador de colores SVG: recolorea y copia SVG
Inspecciona los colores SVG explícitos y sus recuentos de uso, edita paradas de degradado y reglas CSS de color sencillas, y descarga el SVG o copia su código.
Cambiador de colores SVG: recolorea y copia SVG: Encuentra tokens de color explícitos en los atributos fill, stroke, stop-color, color, flood-color y lighting-color, en estilos en línea y en reglas de estilo sencillas. Los colores con nombre, los códigos hexadecimales cortos, rgb() y hsl() se normalizan. Los reemplazos conservan los demás bytes originales siempre que el saneamiento no requiera cambios. Funciona al 100 % en tu navegador, sin subir archivos a ningún servidor.
- Categoría
- Herramientas de desarrollo
- Se ejecuta
- En tu navegador
- Coste
- Gratis · sin registro
- Disponibilidad
- Lista para usar
Funciona por completo en tu navegador
Pintura SVG
Los valores de color y las referencias a servidores de pintura se utilizan en los rellenos, trazos y paradas de degradado de SVG. Especificación: https://www.w3.org/TR/SVG2/painting.html
Sintaxis de color
El analizador admite colores con nombre, hex, rgb(), hsl() y currentColor. El canal alfa se conserva cuando se proporciona. Las variables CSS y los espacios de color avanzados quedan fuera del alcance del analizador de esta herramienta. Especificación: https://www.w3.org/TR/css-color-4/
Cómo se usa
- Suelta un SVG o pega su marcado.
- Usa cada selector de color o introduce un reemplazo; también puedes recolorear todos los tokens a la vez.
- Compara el antes y el después, y descarga o copia el SVG sanitizado.
Privacidad y límites
El código SVG permanece en tu navegador. Las vistas previas son imágenes aisladas, y se eliminan el contenido no seguro y los recursos externos.
Herramientas relacionadas
Preguntas frecuentes
¿Qué cuenta el recuento de uso?
Los tokens de color explícitos del marcado, no el número de píxeles renderizados ni de elementos que reciben un estilo heredado.
¿Se admiten los degradados?
Sí. Los colores de las paradas de degradado se pueden cambiar sin reemplazar los ID ni las referencias de los degradados.
¿Qué hace currentColor?
Usa el valor de color CSS heredado cuando el SVG se inserta en línea. En una vista previa de imagen normalmente usa negro, salvo que el propio SVG defina un color.
¿Se resuelven todos los colores CSS?
No. No se resuelven las variables CSS, los espacios de color avanzados, los valores predeterminados heredados ni los resultados calculados de los selectores. Se admiten declaraciones y selectores sencillos.
Herramienta gratuita · se ejecuta en tu navegador · sin cuenta