Cómo optimizar un SVG y reducir su tamaño

En resumen: abre el Optimizador de SVG de Imgovo, añade tu SVG (hasta 3 MB), deja activada la opción Quitar comentarios y datos del editor, redondea los números si quieres y compara la vista previa con el original. Después descarga el SVG o copia su código. El archivo se procesa en tu navegador y nunca se sube.

Por qué los SVG engordan

Un logotipo sencillo son solo unas líneas de código. Pero programas de dibujo como Inkscape, Sketch o Illustrator suelen añadir mucho más: comentarios, ajustes del editor, grupos vacíos, atributos vacíos, espacios generosos y coordenadas con muchos decimales. Nada de eso cambia lo que ves, pero todo hay que descargarlo. En una web con muchos iconos, se acumula. Los archivos más pequeños también ayudan a que tus páginas carguen más rápido; para el panorama general, lee Cómo optimizar las imágenes de tu sitio web: tamaño, formato y calidad.

Qué hace el optimizador

• Quita comentarios y datos del editor.
• Quita grupos vacíos y atributos vacíos.
• Quita espacios innecesarios.
• Puede redondear números largos a 3, 2 o 1 decimal, o dejarlos como están.
• Puede conservar el título y la descripción, que usan los lectores de pantalla.
• Conserva el viewBox, las formas, los degradados, los trazados de recorte, las máscaras y los ids que usan otras partes del archivo.

Paso a paso

1. Abre el Optimizador de SVG y suelta un archivo SVG en la página, haz clic para elegirlo o pégalo.
2. En Precisión de los números, elige Dejar los números como están, 3 decimales, 2 decimales o 1 decimal.
3. Deja activada la opción Quitar comentarios y datos del editor. Marca Conservar el título y la descripción si el dibujo es contenido que los lectores de pantalla deben anunciar.
4. Mira la sección Resultado. Muestra el tamaño antes y después y dibuja el original y el resultado uno junto al otro.
5. Lee la línea de comparación. Imgovo dibuja ambos al mismo tamaño y te dice cuánto se diferencian, píxel a píxel.
6. Haz clic en Descargar SVG, o en Copiar el código SVG para pegarlo en tu página.

¿Conviene redondear los números?

Empieza sin redondeo: el dibujo no cambia y se siguen eliminando los datos del editor. Prueba después con 3 decimales y, si la vista previa sigue bien, con 2. Redondear ahorra más espacio, pero puede cambiar ligeramente líneas finas o detalles diminutos. Si Imgovo indica una diferencia que se nota, vuelve a una precisión mayor.

Cambia colores sin abrir un editor

Imgovo lista los colores sólidos escritos directamente en formas y estilos. Elige un color nuevo para cualquiera de ellos y se sustituye cada uso de ese color exacto. Es útil para tener un mismo icono en varios colores de marca.

Los degradados, los colores definidos por hojas de estilo y la palabra currentColor no se tocan. La comparación píxel a píxel se omite cuando cambias colores, porque se espera que el resultado sea distinto.

Texto en un SVG

El texto se dibuja con una fuente. Si el dispositivo de quien lo ve no la tiene, se usa otra y el dibujo cambia. Imgovo muestra una advertencia cuando el archivo contiene texto. Convertir el texto en contornos en tu programa de dibujo evita el problema.

Qué se elimina por seguridad

Un SVG puede contener scripts, páginas web incrustadas, animaciones que pueden cambiar enlaces, enlaces a otros sitios y manejadores de eventos. Imgovo los elimina y un aviso bajo el archivo indica cuántos elementos se quitaron. Es un paso aparte de reducir el tamaño del archivo.

Después de optimizar

• Para convertir el SVG en una imagen de píxeles, usa el Convertidor de SVG.
• Para usarlo como icono de web, añádelo al Generador de favicon, que puede incluir un favicon.svg.
• Guarda siempre tu archivo original. Los datos del editor no se pueden recuperar de la copia optimizada.

Privacidad

El SVG se lee y se reescribe en tu navegador. No se sube nada.

Pruébalo ahora

Abre el Optimizador de SVG, añade un SVG exportado desde tu programa de dibujo y mira cuánto se reduce.