EN
PT
ES
Optimizador de SVG
Reduce archivos SVG en el navegador. Quita metadatos, colapsa grupos, redondea la precisión numérica y, si quieres, retira width/height para escalado responsivo.
¿Qué hace un optimizador de SVG?
Los archivos SVG exportados por herramientas de diseño (Figma, Sketch, Illustrator, Inkscape) suelen pesar un 30-70% más de lo necesario. Los editores dejan comentarios, metadatos de firma, CSS redundante, grupos vacíos y exceso de precisión numérica que ningún ojo humano percibe. Un optimizador reescribe el mismo dibujo en un SVG menor y equivalente — idéntico píxel a píxel para el renderizador, pero a una fracción del tamaño. Todo ocurre localmente en tu dispositivo — tu SVG nunca se sube, nunca se copia a un servidor, nunca se registra. Esa garantía de privacidad importa para archivos de marca, iconos internos del producto y cualquier SVG que no debería estar en un servidor de terceros. Los predeterminados están afinados para iconos: precisión de 2 decimales, eliminar comentarios y metadatos del editor, colapsar grupos inútiles y mantener el viewBox original para escalado responsivo. Para ilustraciones con curvas sutiles sube la precisión a 3; para sets de iconos responsivos la opción quitar dimensiones elimina los width/height fijos para que el CSS escale los iconos al tamaño que fijes en la hoja de estilo.
Cómo optimizar un SVG
Pega el markup o suelta un archivo .svg en la zona. Ajusta las casillas — los predeterminados son sensatos. Elige la precisión (2 sirve para la mayoría de iconos) y pulsa Optimizar. La previsualización antes/después confirma que nada cambia visualmente. Copia el markup o descarga el archivo.
Consejos para ahorrar más bytes
Usa una sola paleta y evita imágenes ráster embebidas — un PNG en base64 dentro del SVG anula el formato. Convierte texto en path solo cuando necesites un glifo concreto; si no, conserva <text> para que lectores de pantalla y buscadores vean el contenido. Comprime el archivo final con gzip/brotli en tu servidor: el SVG optimizado comprime muy bien, normalmente al 70% del tamaño post-optimización.
Qué hace cada opción
| Opción | Efecto | Notas |
|---|---|---|
| Quitar comentarios | Quita los bloques que dejan los editores. | Casi siempre seguro. Desactiva solo si los comentarios documentan el archivo. |
| Quitar metadatos | Elimina elementos | Seguro — los metadatos son para la herramienta, no para el render. |
| Colapsar grupos inútiles | Quita | Visualmente idéntico, ahorra a menudo 5–15%. |
| Quitar width/height (SVG responsivo) | Elimina width/height para que el CSS dimensione el SVG. | Útil en sistemas de iconos; off por defecto para que el archivo siga siendo independiente. |
| Precisión numérica | Redondea los números de path a N decimales. | 2 es el estándar; 3 para ilustraciones finas; 1 solo en iconos diminutos. |
Preguntas frecuentes
¿La optimización puede romper mi SVG?
¿Se sube algo a tu servidor?
¿Qué pasa con SVG sprites o symbols?
¿Cuál es el tamaño ideal de un icono?
¿Mantener xmlns y viewBox?
xmlns el SVG no se renderiza fuera de HTML5; sin viewBox pierdes el escalado responsivo. Ambos atributos son pequeños y vale la pena conservarlos.