INNOZONA Tools

Optimizar SVG online

Limpia y reduce el peso de tus SVG: elimina datos de editores, comentarios y decimales sobrantes, y quita cualquier código peligroso. Compara el antes y el después antes de descargar.

Se procesa en tu navegador Gratis, sin registro Varios archivos a la vez Elimina scripts
Se añade a la lista como «codigo-pegado.svg».

Paso a paso: Optimizar SVG

  1. Añade tus SVGArrástralos a la zona de carga, haz clic para elegirlos o pega el código directamente en el cuadro de texto.
  2. Revisa los ajustesLos valores por defecto sirven para casi todo. Activa «Quitar width y height» si quieres un SVG adaptable.
  3. Compara el resultadoPulsa «Ver» para comparar el original y el optimizado, revisar los avisos y copiar el código.
  4. DescargaDescarga cada SVG por separado o todos juntos en un ZIP con sus nombres originales.

¿Por qué optimizar un SVG?

Los programas de diseño guardan en el SVG mucha información que el navegador no necesita: capas, guías, metadatos, nombres de espacios de nombres y coordenadas con seis o más decimales. En logotipos e iconos exportados desde Illustrator o Inkscape, esa información puede ser la mitad del archivo o más.

Un SVG más ligero carga antes, ocupa menos si lo incrustas en el HTML o en el CSS y es más fácil de leer y mantener.

Qué hace exactamente el optimizador

  • Limpieza de seguridad (siempre): elimina <script>, atributos de eventos como onload, enlaces javascript:, <foreignObject> y objetos incrustados.
  • Datos de editores: quita los atributos y elementos de Inkscape, Sodipodi, Adobe Illustrator, Sketch y Affinity, además de los espacios de nombres que nadie usa.
  • Comentarios y metadatos: elimina comentarios y el bloque <metadata>. Se respetan <title> y <desc>, que sirven para la accesibilidad.
  • Decimales: redondea los trazados (d), los puntos de polígonos y las medidas. Las coordenadas relativas se calculan sobre la posición ya redondeada, así que el error no se acumula a lo largo del trazado.
  • Espacios: compacta el código sin tocar el texto visible de los elementos <text>.

Cada resultado se comprueba cargándolo como imagen y comparándolo con el original. Si no se muestra bien, se conserva la versión solo limpiada; si cambia visiblemente, verás un aviso para subir los decimales.

SVG adaptable: viewBox, width y height

El atributo viewBox define el sistema de coordenadas del dibujo y nunca se elimina. width y height fijan un tamaño concreto: si los quitas, el SVG ocupará el ancho de su contenedor y podrás controlar su tamaño desde CSS.

Si tu SVG no tiene viewBox, el optimizador lo crea a partir del ancho y el alto antes de quitarlos, para que no se deforme.

Características

Tus archivos no se suben

El SVG se procesa en tu navegador. Nadie más ve tus diseños.

Seguro con SVG de terceros

Elimina scripts y eventos, y muestra las vistas previas como imagen, donde ningún código se ejecuta.

Comparación antes y después

Ves el original y el resultado lado a lado, con el peso de cada uno y el ahorro.

Lotes y código pegado

Optimiza muchos archivos a la vez o pega el código y cópialo ya limpio.

Preguntas frecuentes

¿Se pierde calidad al optimizar un SVG?

Con 3 decimales la diferencia no es visible en tamaños normales. Si tu dibujo es muy pequeño o muy detallado (por ejemplo, un viewBox de 0 a 1), usa 4 o 5 decimales o elige «No redondear». La herramienta te avisa si detecta cambios visibles.

¿Cuánto se reduce el peso?

Depende del origen. Los SVG exportados desde Illustrator, Inkscape o Sketch suelen reducirse entre un 20 y un 60 %. Un SVG que ya pasó por otro optimizador apenas cambiará.

¿Es seguro abrir aquí un SVG de origen desconocido?

Sí. El archivo se analiza como datos, sin mostrarlo en la página, y las vistas previas se cargan como imagen, un modo en el que los navegadores no ejecutan scripts. Además, el resultado sale sin scripts ni eventos.

¿Por qué ha desaparecido parte de mi SVG?

Lo más habitual es que usara <foreignObject> para incrustar HTML, algo que se elimina siempre por seguridad. Algunos SVG de Illustrator lo incluyen como copia alternativa sin efecto en el navegador.

¿Mis archivos se suben a algún servidor?

No. La página trabaja con tus archivos en tu dispositivo. Puedes comprobarlo desconectando internet después de cargarla.

¿Puedo optimizar SVG animados?

Sí. Se conservan las animaciones CSS y SMIL. Solo se eliminan las animaciones que intentan cambiar enlaces o eventos, porque pueden usarse para ejecutar código.

Actualizado: · Equipo de INNOZONA