SVGView

Reemplazador de color SVG

Cambia colores en muchos SVGs en segundos para alinear temas y tokens. Ideal para sets de iconos y actualizaciones de marca. Abre archivos SVG online y empieza a procesarlos al instante.

Arrastra y suelta tu archivo SVG

o haz clic para buscar, o pega el código SVG

Solo acepta archivos .svg
Pega el código SVG con Ctrl+V / Cmd+V

¿Por qué usar nuestro reemplazador de color SVG?

Reemplaza fill y stroke

Aplica un único color a todos los fills y strokes para mantener un set consistente. Es ideal para limpiar exports de diferentes fuentes y alinearlos a una misma paleta.

Salida compatible con theming

Cambia a currentColor y los iconos heredarán el color CSS del contenedor. Así encaja con sistemas de temas (claro/oscuro/marca) sin overrides manuales.

Listo para modo oscuro

Con currentColor, el contraste se alinea con tokens de UI y reglas de accesibilidad. Esto ayuda a generar iconos aptos para dark mode sin rediseñar.

Actualizaciones seguras visualmente

Solo cambia valores de color y deja intactos paths, tamaños y layout. Así evitas shifts y mantienes iconos pixel-perfect.

Cambios masivos rápidos

Para librerías grandes, elimina ediciones repetitivas. Aplica una regla una vez y actualiza todos los elementos del archivo con una salida consistente.

Procesamiento local

Todo se ejecuta en el navegador, sin subidas. Es seguro para assets de clientes, productos internos y flujos offline.

Cómo reemplazar colores en un SVG

1

Sube tu SVG

Sube un archivo o pega el marcado. La vista previa carga al instante para que confirmes la paleta actual antes de cambiarla. Abre archivos SVG online y empieza a procesarlos al instante.

2

Elige el color

Selecciona un color nuevo o usa currentColor. La herramienta actualiza todos los fills y strokes sólidos; los valores none se mantienen sin cambios.

3

Exporta el SVG actualizado

Copia o descarga el marcado actualizado. Los nombres de archivo se mantienen, así que es fácil reemplazar iconos en tu repo o design system.

Preguntas frecuentes: Reemplazador de color SVG

¿Puedo reemplazar fill y stroke online?
Sí. La herramienta actualiza fill y stroke a la vez para mantener coherencia entre contornos e interiores. Si necesitas variantes, duplica el archivo y aplica opciones distintas para comparar. Para theming consistente, usa colores del mismo set de tokens y prueba en fondos claro y oscuro.
¿Qué es currentColor en SVG?
currentColor hace que el SVG herede el color CSS del elemento padre. Puedes convertir colores sólidos a currentColor para que los iconos respondan a temas y tokens. Combínalo con variables CSS para un theming consistente.
¿fill=none o stroke=none se mantienen?
Sí. Los valores none se preservan para que las formas transparentes sigan siéndolo. Si ves fills inesperados, revisa estilos inline que podrían sobrescribir atributos y vuelve a ejecutar la herramienta.
¿Se cambian gradientes o patrones?
No. Solo reemplaza valores sólidos. Gradientes y patrones se mantienen para no romper ilustraciones complejas. Si necesitas editar gradientes, hazlo en tu herramienta de diseño y luego aplica reemplazo para los sólidos restantes.
¿Se sube el SVG a un servidor?
No. Se ejecuta localmente en tu navegador, así que los assets no salen de tu dispositivo. Es un flujo seguro para iconos de marca, UI de producto y librerías de clientes.
¿Puedo optimizar después de reemplazar colores?
Sí. Tras reemplazar colores, ejecuta un optimizador o minificador para reducir bytes. Como solo cambian colores, la optimización sigue siendo útil, especialmente en sets grandes.
¿Cómo se manejan estilos inline?
Los estilos inline se tratan igual que los atributos: los colores sólidos se reemplazan de forma consistente. Si quieres más control, convierte estilos a atributos en el archivo fuente antes de reemplazar.
¿Puedo cambiar solo un color específico?
Esta herramienta aplica un reemplazo global a todos los colores sólidos. Para cambios selectivos, duplica el SVG y aísla colores en tu editor, o mantén una base y genera variantes con scripts o clases CSS.
¿Es gratis y no requiere descarga?
Sí. Es gratis, funciona en el navegador y no requiere instalación.
¿Necesito una cuenta?
No. Funciona al instante sin registro y con archivos en local.

Herramientas SVG relacionadas

Después de reemplazar colores, usa estas herramientas para limpiar, sanear o previsualizar tus SVGs.

SVG Formatter

Da formato al marcado para que los cambios sean fáciles de revisar.

Abrir herramienta

SVG Minifier

Reduce espacios y peso una vez completados los cambios de color.

Abrir herramienta

SVG Sanitizer

Elimina scripts y atributos inseguros antes de incrustar iconos.

Abrir herramienta

SVG Viewer

Previsualiza resultados en fondos claro y oscuro para validar contraste.

Abrir herramienta

Blog SVG relacionado

Continúa con guías prácticas sobre flujos SVG, resolución de problemas y producción.