Optimizador de SVG
Limpia y minifica código SVG para reducir el tamaño y acelerar tu web — en el navegador.
Menos decimales significan archivos más pequeños con una diferencia visual casi imperceptible.
Todo se ejecuta en tu navegador. Tus archivos nunca se suben.
Los archivos SVG exportados desde herramientas de diseño son casi siempre de dos a cinco veces más grandes de lo necesario, porque el exportador incluye metadatos del editor, precisión redundante, comentarios y basura invisible que el navegador no necesita para renderizar la imagen. Un SVG es solo XML —texto que describe formas—, así que toda esa sobrecarga se envía a cada visitante y ralentiza la página sin beneficio visual. Este optimizador elimina el desperdicio preservando el resultado renderizado exacto: quita los metadatos, recorta los decimales excesivos y limpia el marcado, normalmente reduciendo el tamaño sustancialmente, todo en tu navegador.
Cómo funciona el optimizador
Pega tu código SVG o sube el archivo, y el optimizador lo analiza y elimina lo que no afecta al renderizado: comentarios y metadatos del editor, grupos vacíos, atributos redundantes y coordenadas con decimales innecesariamente largos. La imagen visible se mantiene idéntica al píxel mientras el archivo encoge. Puedes ver el tamaño antes-y-después y el código limpio en paralelo. Todo corre localmente: tu SVG nunca se sube, lo que importa para logos e iconos propietarios.
Qué se elimina
Metadatos del editor <metadata>, namespaces editor:
Comentarios <!-- Generator: ... -->
Precisión excesiva d="M12.00000001" → "M12"
Elementos vacíos <g></g>, defs sin usar
Atributos redundantes valores por defecto, estilos muertos
Espacios en blanco sangría, saltos de línea
Píxeles renderizados: sin cambio. Tamaño: mucho menor.La mayor victoria suele ser la precisión de coordenadas. Las herramientas de diseño exportan datos de trazado con precisión decimal absurda —un punto en 12,000000001 píxeles— pero una pantalla renderiza en píxeles enteros, así que nada más allá de dos o tres decimales es visible. Redondear esa precisión sola puede recortar un tercio del tamaño de un icono complejo sin cambio visual. La eliminación de metadatos es la otra victoria fácil: una exportación de Illustrator o Figma puede ser mitad declaraciones de comentarios y namespaces que ningún navegador lee.
Lo que conviene saber sobre la optimización de SVG
- 1Los SVG son texto, así que comprimen y cachean como texto. Este es su superpoder sobre los formatos rasterizados: un SVG optimizado se comprime más con gzip en el servidor, escala a cualquier tamaño sin pérdida de calidad y se mantiene nítido en cada densidad de pantalla. Para logos, iconos e ilustraciones simples, un SVG bien optimizado suele ganar incluso a un WebP.
- 2Incrusta los SVG críticos directamente en tu HTML para ahorrar una petición. Un icono pequeño pegado como SVG en línea carga con la página y puede estilizarse y animarse con CSS, sin descarga de archivo separado. Para iconos usados una vez, incrustar el código optimizado suele ser más rápido que enlazar un archivo externo, y esta herramienta te da el código limpio para incrustar.
- 3La optimización es segura porque nunca toca la salida renderizada. A diferencia de la compresión de imagen con pérdida, la optimización de SVG solo quita datos que el navegador ignora —metadatos, precisión que ninguna pantalla puede mostrar, marcado muerto—. La imagen es matemáticamente idéntica tras optimizar, así que no hay compromiso de calidad que sopesar; es pura eliminación de desperdicio.
- 4Cuidado con la sobreoptimización que rompe animaciones o scripts. Las herramientas agresivas pueden quitar IDs y atributos de los que tu CSS o JavaScript depende para apuntar a elementos. Si un SVG está animado o es interactivo, optimiza de forma conservadora y prueba, porque el ID que un optimizador quita como «sin usar» puede ser el gancho del que depende tu animación.
- 5Simplifica el arte antes de optimizar el código. Los mayores ahorros de SVG suelen venir del diseño, no de la exportación: menos nodos, trazados fusionados y capas ocultas eliminadas reducen el archivo en el origen. Un optimizador limpia la exportación, pero un trazado con mil puntos innecesarios se arregla mejor en la herramienta de diseño antes de que llegue al código.
Preguntas frecuentes
¿Optimizar un SVG cambiará cómo se ve?
No. La optimización de SVG solo quita datos que no afectan al renderizado: metadatos del editor, comentarios, marcado muerto y precisión decimal más fina de lo que cualquier pantalla puede mostrar. La imagen visible es matemáticamente idéntica antes y después, lo que hace la optimización de SVG fundamentalmente distinta de la compresión de imagen con pérdida: no hay compromiso de calidad. La única salvedad son los SVG animados o con scripts, donde la optimización agresiva puede quitar IDs que tu código necesita, así que esos deben optimizarse con cuidado y probarse.
¿Por qué mi SVG exportado es tan grande?
Porque las herramientas de diseño incluyen mucho que el navegador nunca necesita: metadatos del editor y declaraciones de namespace, comentarios del generador, grupos vacíos de tu estructura de capas y coordenadas de trazado con mucha más precisión decimal de la que cualquier pantalla puede renderizar. Un logo exportado de Illustrator o Figma puede fácilmente ser mitad sobrecarga. La optimización lo elimina todo, comúnmente reduciendo el tamaño sustancialmente sin cambio en el resultado visible.
¿Es SVG mejor que PNG para logos e iconos?
Normalmente, sí. Un SVG es independiente de la resolución, así que se mantiene perfectamente nítido a cualquier tamaño y en cualquier densidad de pantalla sin necesitar múltiples versiones, y un SVG optimizado suele ser más pequeño que un PNG equivalente para gráficos simples. También puede estilizarse y animarse con CSS. PNG solo gana para imágenes complejas de estilo fotográfico que SVG no puede describir eficientemente; para logos planos, iconos e ilustraciones, el SVG optimizado suele ser la mejor opción.
¿Se sube mi código SVG a algún sitio?
No. La optimización corre enteramente en tu navegador, así que tu SVG se procesa localmente y nunca se transmite, registra ni almacena. Puedes confirmarlo desconectándote de internet; la herramienta sigue funcionando. Esto importa para logos propietarios, activos de marca y cualquier icono que no quieras que salga de tu máquina antes de publicarse.
¿Puedo seguir editando un SVG tras optimizarlo?
Sí, pero puede ser menos cómodo. La optimización quita metadatos específicos del editor y la estructura de capas, así que reabrir un SVG optimizado en una herramienta de diseño funciona pero pierdes las capas y grupos nombrados que hacían la edición organizada. La mejor práctica es mantener tu archivo máster original y editable y optimizar solo la copia que despliegas: así obtienes una salida limpia para la web y una fuente manejable para ediciones futuras.