Utilia
Categorías ▾
Idioma: es ▾

Optimizador de SVG

Optimiza y minifica archivos SVG online con SVGO, en tu navegador. Elige un ajuste, compara el resultado y consulta el ahorro de tamaño y con gzip.

Plugins

Quitar el viewBox impide que el dibujo se escale, y acortar o quitar los ID rompe el CSS, el JavaScript, los <use> o los enlaces de anclaje que los usan. Usa el ajuste Seguro para los SVG que se usan en código, sprites o animaciones.

Cómo optimizar un SVG

  1. Suelta un archivo SVG en la zona de carga o haz clic en ella para elegirlo. También puedes pegar el código en el cuadro Código SVG.
  2. Elige un Ajuste predefinido: Seguro, Equilibrado (el predeterminado) o Máximo. La lista Plugins muestra exactamente qué pasos activa cada ajuste.
  3. Afina si hace falta: la Precisión decimal (de 0 a 8 cifras), Varias pasadas y Formatear (código indentado) si quieres un código legible. En cuanto cambias un plugin, la precisión o las pasadas, el ajuste pasa a Personalizado.
  4. Haz clic en Optimizar SVG. Un archivo soltado se optimiza al instante y, una vez que hay un resultado, cualquier cambio de ajustes vuelve a lanzar la optimización automáticamente.
  5. Revisa las cifras de Tamaño original, Tamaño optimizado, Ahorro y Con gzip, y compara los dos dibujos uno al lado del otro.
  6. Haz clic en Copiar para copiar el Código SVG optimizado o en Descargar SVG optimizado para guardarlo como nombre.min.svg.

La optimización la hace SVGO 4, el optimizador de SVG de código abierto (MIT) de referencia, presente en la mayoría de las herramientas de compilación web. Su versión para navegador se carga la primera vez que haces clic y funciona íntegramente en tu dispositivo: tu SVG nunca se sube.

Por qué pesan tanto los SVG de los programas de diseño

Un SVG exportado desde Illustrator, Inkscape, Figma o Sketch lleva mucho más que el dibujo. Los editores añaden sus propios espacios de nombres y atributos (nombres de capas, guías, ajustes de exportación), un bloque <metadata>, comentarios como «Generator: Adobe Illustrator», coordenadas con seis o más decimales, grupos que contienen un único elemento y colores largos como #ffffff. Nada de esto cambia lo que dibuja el navegador. SVGO lo elimina, redondea los números, reescribe los trazados con comandos más cortos, acorta los colores y fusiona o desagrupa los elementos redundantes. Una reducción del 40–60 % es habitual en iconos e ilustraciones exportados.

Ajustes y plugins con riesgo

  • Seguro aplica el ajuste por defecto de SVGO, pero conserva los ID, <desc>, los trazados separados y las reglas <style>, con 3 decimales y una sola pasada. Úsalo para SVG referenciados desde CSS o JavaScript, sprites y animaciones.
  • Equilibrado es el ajuste por defecto de SVGO, con 3 decimales y varias pasadas. Sirve para la mayoría de los iconos e ilustraciones mostrados como imágenes.
  • Máximo añade Quitar </strong>, <strong>Quitar scripts y atributos de eventos</strong>, <strong>Quitar width/height (conservar viewBox)</strong> y <strong>Sustituir xlink:href por href</strong>, con 2 decimales y varias pasadas.</li> </ul> <p>Ningún ajuste quita el viewBox. <strong>Quitar viewBox</strong> está solo para casos especiales: sin él, el dibujo ya no puede escalarse al tamaño que le des en CSS.</p> <p>Ten en cuenta lo que pueden romper los demás plugins:</p> <ul> <li><strong>Acortar y quitar ID no usados</strong> renombra ID como <code>#icon-home</code> a <code>a</code>. Cualquier selector CSS, consulta JavaScript, referencia de sprite <code><use href="#…"></code>, ancla de página o animación SMIL/CSS que apunte al nombre antiguo deja de funcionar.</li> <li><strong>Quitar <title></strong> y <strong>Quitar <desc></strong> borran el nombre y la descripción accesibles. Consérvalos en iconos y gráficos con significado que los lectores de pantalla deben anunciar.</li> <li>Una <strong>Precisión decimal</strong> baja puede deformar los iconos pequeños: las curvas se ondulan y los bordes se desplazan. Revisa siempre la comparación visual; 3 es un valor seguro.</li> <li><strong>Fusionar trazados</strong> une trazados contiguos en uno, así que un efecto hover o una animación dirigida a un trazado concreto pierde su objetivo.</li> </ul> <h2>Consejos</h2> <ul> <li>Guarda una copia maestra sin optimizar para editarla y trata el <code>.min.svg</code> como código compilado.</li> <li>Activa gzip o brotli en tu servidor: los formatos de texto como SVG se comprimen muy bien, y la cifra <strong>Con gzip</strong> muestra lo que realmente descargan los visitantes (aparece si tu navegador admite <code>CompressionStream</code>).</li> <li>Un SVG en línea se puede estilizar con CSS y animar, pero no se almacena en caché por separado; un SVG en <code><img></code> se guarda en caché, pero no se puede estilizar desde la página.</li> </ul></div> <section class="mt-10" aria-labelledby="faq"> <h2 id="faq" class="text-2xl font-semibold">Preguntas frecuentes</h2> <div class="mt-4 divide-y divide-line rounded-xl border border-line bg-surface"> <details class="faq group"> <summary>¿Se sube mi SVG a un servidor?</summary> <div class="prose px-5 pb-5"><p>No. SVGO se ejecuta en tu navegador. Lo único que se descarga es el propio código del optimizador, la primera vez que optimizas.</p></div> </details> <details class="faq group"> <summary>¿Por qué la vista previa se muestra como imágenes?</summary> <div class="prose px-5 pb-5"><p>SVG es un formato de documento que puede contener JavaScript y cargar archivos externos. Las dos vistas previas se renderizan como <code><img></code> a partir de URL blob locales, y en ese modo los navegadores nunca ejecutan scripts ni cargan recursos externos, así que previsualizar aquí un SVG de origen dudoso es seguro. Aun así, el código optimizado conserva los scripts salvo que actives <strong>Quitar scripts y atributos de eventos</strong> (incluido en <strong>Máximo</strong>).</p></div> </details> <details class="faq group"> <summary>Mi SVG optimizado ya no se escala. ¿Qué ha pasado?</summary> <div class="prose px-5 pb-5"><p>Probablemente se quitó el viewBox, con <strong>Quitar viewBox</strong> o antes con otra herramienta. Vuelve a optimizar el original con ese plugin desactivado.</p></div> </details> <details class="faq group"> <summary>¿Por qué ha dejado de funcionar mi sprite de iconos o mi animación?</summary> <div class="prose px-5 pb-5"><p><strong>Acortar y quitar ID no usados</strong> o <strong>Fusionar trazados</strong> han cambiado los elementos a los que se refiere tu código. Usa el ajuste <strong>Seguro</strong>, que conserva ambos.</p></div> </details> <details class="faq group"> <summary>El archivo optimizado no es más pequeño. ¿Por qué?</summary> <div class="prose px-5 pb-5"><p>Seguramente el SVG ya estaba minificado. Prueba <strong>Máximo</strong> o una <strong>Precisión decimal</strong> más baja, y desactiva <strong>Formatear (código indentado)</strong>.</p></div> </details> </div> </section> <section class="mt-10" aria-labelledby="related"> <h2 id="related" class="text-2xl font-semibold">Herramientas relacionadas</h2> <ul class="card-grid mt-4"><li><a class="card" href="/es/svg-a-png/"> <span class="card-title">Convertir SVG a PNG</span> <span class="card-text">Convierte SVG a PNG, JPG o WebP en tu navegador a cualquier anchura, altura, escala o DPI, con fondo transparente o de color. Por lotes y en ZIP.</span> </a></li> <li><a class="card" href="/es/imagen-a-svg/"> <span class="card-title">Convertir imagen a SVG</span> <span class="card-text">Convierte un logotipo o dibujo PNG o JPG en trazados vectoriales SVG en tu navegador. Ajustes, número de colores y filtro de motas, sin subir nada.</span> </a></li> <li><a class="card" href="/es/comprimir-imagenes/"> <span class="card-title">Comprimir imágenes</span> <span class="card-text">Comprime imágenes JPG, PNG y WebP con un control de calidad, compara el tamaño antes y después y procesa fotos por lotes sin subirlas.</span> </a></li> <li><a class="card" href="/es/formateador-css/"> <span class="card-title">Formateador y minificador CSS</span> <span class="card-text">Embellece CSS desordenado con una indentación limpia o minifícalo con csso, y compara el tamaño antes y después. Funciona en tu navegador, no se sube nada.</span> </a></li> </ul> </section> </article> <div class="hidden lg:block"> <div class="sticky top-24"><aside class="ad-slot ad-slot-sidebar" data-ad-slot="sidebar" aria-label="Publicidad"><span class="ad-label">Publicidad</span></aside> </div> </div> </div> </main> <footer class="mt-16 border-t border-line bg-surface"> <div class="mx-auto grid max-w-6xl gap-8 px-4 py-10 sm:grid-cols-3 text-sm"> <div> <p class="font-semibold">Utilia</p> <p class="mt-2 text-muted">Herramientas online gratis que funcionan en tu navegador. Tus datos se quedan en tu dispositivo.</p> </div> <nav aria-label="Categorías"> <p class="font-semibold">Herramientas</p> <ul class="mt-2 space-y-1"><li><a class="link-muted" href="/es/herramientas-de-texto/">Herramientas de texto</a></li><li><a class="link-muted" href="/es/herramientas-para-desarrolladores/">Herramientas para desarrolladores</a></li><li><a class="link-muted" href="/es/web-seo-marketing/">Web, SEO y marketing</a></li><li><a class="link-muted" href="/es/colores-diseno/">Colores y diseño</a></li><li><a class="link-muted" href="/es/editar-imagenes/">Edición de imágenes</a></li><li><a class="link-muted" href="/es/pdf-documentos/">PDF y documentos</a></li><li><a class="link-muted" href="/es/calculadoras-matematicas/">Calculadoras matemáticas</a></li><li><a class="link-muted" href="/es/calculadoras-financieras/">Calculadoras financieras</a></li><li><a class="link-muted" href="/es/fecha-hora/">Fecha y hora</a></li><li><a class="link-muted" href="/es/conversor-de-unidades/">Conversores de unidades</a></li><li><a class="link-muted" href="/es/calculadoras-de-salud/">Salud y fitness</a></li><li><a class="link-muted" href="/es/hogar-cocina-coche/">Hogar, bricolaje, cocina y coche</a></li><li><a class="link-muted" href="/es/generadores/">Generadores</a></li><li><a class="link-muted" href="/es/pruebas-de-dispositivo/">Pruebas de dispositivo y navegador</a></li><li><a class="link-muted" href="/es/audio-video/">Audio y vídeo</a></li><li><a class="link-muted" href="/es/educacion-idiomas/">Educación e idiomas</a></li><li><a class="link-muted" href="/es/juegos/">Juegos</a></li></ul> </nav> <nav aria-label="Información"> <p class="font-semibold">Información</p> <ul class="mt-2 space-y-1"> <li><a class="link-muted" href="/es/acerca-de/">Acerca de</a></li> <li><a class="link-muted" href="/es/contacto/">Contacto</a></li> <li><a class="link-muted" href="/es/privacidad/">Política de privacidad</a></li> <li><a class="link-muted" href="/es/condiciones-de-uso/">Condiciones de uso</a></li> </ul> </nav> </div> <p class="border-t border-line py-4 text-center text-xs text-muted">© 2026 Utilia</p> </footer> </body> </html>