Cómo ver, cambiar colores y optimizar código SVG online

Cuando generas iconos <svg> con asistentes como Claude o ChatGPT o descargas recursos desde SVGRepo y Figma, revisar el XML en bruto no basta para comprobar proporciones ni contrastes. Un flujo de trabajo en el navegador te permite previsualizar, recolorear, comprimir y exportar el gráfico en segundos.

Vista previa en cuadrícula transparente, fondo claro y oscuro

Pega tu código o arrastra un archivo .svg al Visor y Optimizador SVG. El lienzo detecta automáticamente las dimensiones del viewBox incluso si el archivo no tiene atributos width y height, permitiéndote alternar entre fondos claros, oscuros y transparentes.

Cambia colores en tiempo real sin buscar en el código

En lugar de reemplazar valores hexadecimales manualmente en decenas de etiquetas <path>:

1. Revisa la barra de Colores detectados debajo del lienzo en el Visor y Optimizador SVG.
2. Haz clic en cualquier muestra y mueve el cursor del selector para ver cómo cambia el gráfico en vivo.
3. Si necesitas ajustar primero tu paleta, apóyate en el Selector de Color.

Minifica el XML o exporta en PNG 2x / 4x

Pulsa Optimizar para eliminar comentarios, metadatos y espacios innecesarios, o copia el vector como Data URI para CSS. Si necesitas una imagen rasterizada nítida, elige escala 2x o 4x y descárgala en PNG o WebP, o convierte lotes completos con el Convertidor de Imágenes.