Optimizador SVG
Optimice el código SVG: vectores más pequeños, representación idéntica.
Actualizado sep. 2026
Cómo usar Optimizador SVG
- Pegue el código SVG (directamente desde la exportación de la herramienta de diseño).
- Lea el resultado optimizado y ahorre tamaño (entre un 30 % y un 70 % es lo habitual).
- Copia el SVG limpio: incorpórelo en HTML o guárdelo como recurso.
- Mantenga
en gráficos significativos</strong>: es la etiqueta del lector de pantalla.</li></ol> </div> </section> <section class="glass-card p-6 sm:p-8"> <h2 class="font-heading text-2xl font-semibold text-gold">¿Cuál es Optimizador SVG?</h2> <div class="prose-tonton mt-4 max-w-none text-cream/80 [&_p]:mb-3 [&_strong]:text-cream"> <p>Un optimizador SVG limpia los archivos vectoriales de todo lo que no se dibuja: metadatos del editor (los sellos Illustrator/Figma/Inkscape se exportan libremente), comentarios, elementos ocultos, atributos de valores predeterminados, precisión excesiva de la ruta (8 decimales donde 2 son suficientes) y agrupaciones redundantes. La representación es idéntica; los archivos comúnmente se reducen entre un 30% y un 70%.</p><p>Los SVG exportados están notoriamente inflados: un simple icono deja una herramienta de diseño con 8 KB con 6 KB de residuos del editor. Dado que los SVG se envían como código (a menudo integrado en HTML), ese residuo es el peso de la página y el ruido DOM multiplicado por cada icono.</p> </div> </section> <section class="glass-card p-6 sm:p-8"> <h2 class="font-heading text-2xl font-semibold text-gold">Sobre el Optimizador SVG</h2> <div class="prose-tonton mt-4 max-w-none text-cream/80 [&_p]:mb-3 [&_strong]:text-cream"> <p>Pegue el código SVG, lea la versión optimizada y el ahorro de tamaño, copie el resultado limpio.</p><p>Qué se limpia y por qué es seguro: metadatos y espacios de nombres del editor (residuos de exportación puros), comentarios y títulos (a menos que los conserve por motivos de accesibilidad; consulte a continuación), elementos invisibles/vacíos, precisión de las coordenadas de ruta más allá de la relevancia visual y transformaciones/grupos plegables. Lo que sobrevive intacto: todo lo que se representa: el dibujo tiene bytes diferentes y píxeles idénticos.</p><p>Notas de implementación: SVG optimizados en línea bellamente en HTML (íconos sin solicitudes; compare la ruta Base64, que generalmente supera a SVG), y una advertencia de accesibilidad: los elementos <code><title></code> sirven para lectores de pantalla, así que consérvelos o vuelva a agregarlos en gráficos significativos (no decorativos). Para sistemas de iconos, optimice una vez en el momento de la confirmación; SVGO en proceso de compilación es el hermano automatizado de esta herramienta. El código se procesa en su navegador.</p> </div> </section> <section class="glass-card p-6 sm:p-8" x-data="{ active: null }"> <h2 class="font-heading text-2xl font-semibold text-gold">Preguntas Frecuentes</h2> <div class="mt-4 divide-y divide-gold/10"> <div class="py-3"> <button @click="active === 0 ? active = null : active = 0" class="flex w-full items-center justify-between gap-4 text-left"> <span class="font-medium text-cream">¿La optimización cambiará el aspecto de mi SVG?</span> <svg class="h-5 w-5 shrink-0 text-gold transition" :class="active === 0 && 'rotate-180'" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/> </svg> </button> <div x-show="active === 0" x-collapse x-cloak class="pt-2 text-sm text-cream/70"> No: solo se eliminan el contenido que no se representa y la precisión redundante. La salida del dibujo es idéntica a los píxeles; diferencia los resultados renderizados si te gusta confirmarlo. </div> </div> <div class="py-3"> <button @click="active === 1 ? active = null : active = 1" class="flex w-full items-center justify-between gap-4 text-left"> <span class="font-medium text-cream">¿Por qué están tan infladas las exportaciones de SVG de herramientas de diseño?</span> <svg class="h-5 w-5 shrink-0 text-gold transition" :class="active === 1 && 'rotate-180'" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/> </svg> </button> <div x-show="active === 1" x-collapse x-cloak class="pt-2 text-sm text-cream/70"> Los editores incorporan sus datos de trabajo (nombres de capas, espacios de nombres del editor, bloques de metadatos, máxima precisión) para que el archivo se vuelva a abrir fielmente en la herramienta. La web no necesita nada de eso; La optimización es eliminar el equipaje del editor. </div> </div> <div class="py-3"> <button @click="active === 2 ? active = null : active = 2" class="flex w-full items-center justify-between gap-4 text-left"> <span class="font-medium text-cream">¿Cuánta precisión de ruta necesito realmente?</span> <svg class="h-5 w-5 shrink-0 text-gold transition" :class="active === 2 && 'rotate-180'" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/> </svg> </button> <div x-show="active === 2" x-collapse x-cloak class="pt-2 text-sm text-cream/70"> 1-2 decimales para los cuadros de vista de íconos típicos: la diferencia visual con respecto a las coordenadas de 7 decimales es literalmente subpíxel. La reducción de la precisión suele ser la mayor ganancia en bytes. </div> </div> <div class="py-3"> <button @click="active === 3 ? active = null : active = 3" class="flex w-full items-center justify-between gap-4 text-left"> <span class="font-medium text-cream">¿Es el SVG en línea mejor que una etiqueta <img>?</span> <svg class="h-5 w-5 shrink-0 text-gold transition" :class="active === 3 && 'rotate-180'" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/> </svg> </button> <div x-show="active === 3" x-collapse x-cloak class="pt-2 text-sm text-cream/70"> En línea para íconos que usted diseña/anima con CSS (la temática currentColor es la característica principal) y para omitir solicitudes; <img>/CSS-url para ilustraciones grandes o repetidas donde gana el almacenamiento en caché. El código optimizado hace que la inserción sea económica de cualquier manera. </div> </div> <div class="py-3"> <button @click="active === 4 ? active = null : active = 4" class="flex w-full items-center justify-between gap-4 text-left"> <span class="font-medium text-cream">¿Qué pasa con los elementos de accesibilidad como <título>?</span> <svg class="h-5 w-5 shrink-0 text-gold transition" :class="active === 4 && 'rotate-180'" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/> </svg> </button> <div x-show="active === 4" x-collapse x-cloak class="pt-2 text-sm text-cream/70"> Manténgalos en gráficos significativos: <título> es lo que anuncian los lectores de pantalla. Los íconos decorativos en su lugar toman aria-hidden="true". Optimice los bytes, no la semántica. </div> </div> </div> </section> </div> <div class="space-y-6"> <aside class="glass-card p-5"> <h2 class="font-heading text-xl font-semibold text-gold">Herramientas relacionadas</h2> <ul class="mt-3 divide-y divide-gold/10"> <li> <a href="https://tonton-tools.com/es/watermark-adder" class="flex items-center gap-3 py-2.5 text-sm text-cream/75 transition hover:text-gold"> <svg class="h-4 w-4 shrink-0 text-gold/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg> <span class="truncate">Sumador de marca de agua</span> </a> </li> <li> <a href="https://tonton-tools.com/es/image-converter" class="flex items-center gap-3 py-2.5 text-sm text-cream/75 transition hover:text-gold"> <svg class="h-4 w-4 shrink-0 text-gold/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg> <span class="truncate">Convertidor de imágenes</span> </a> </li> <li> <a href="https://tonton-tools.com/es/png-to-jpg" class="flex items-center gap-3 py-2.5 text-sm text-cream/75 transition hover:text-gold"> <svg class="h-4 w-4 shrink-0 text-gold/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg> <span class="truncate">PNG a JPG</span> </a> </li> <li> <a href="https://tonton-tools.com/es/image-resizer" class="flex items-center gap-3 py-2.5 text-sm text-cream/75 transition hover:text-gold"> <svg class="h-4 w-4 shrink-0 text-gold/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg> <span class="truncate">Cambiar tamaño de imagen</span> </a> </li> <li> <a href="https://tonton-tools.com/es/base64-to-image" class="flex items-center gap-3 py-2.5 text-sm text-cream/75 transition hover:text-gold"> <svg class="h-4 w-4 shrink-0 text-gold/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg> <span class="truncate">Base64 a imagen</span> </a> </li> <li> <a href="https://tonton-tools.com/es/ico-converter" class="flex items-center gap-3 py-2.5 text-sm text-cream/75 transition hover:text-gold"> <svg class="h-4 w-4 shrink-0 text-gold/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg> <span class="truncate">Convertidor ICO</span> </a> </li> </ul> <a href="https://tonton-tools.com/es/tools/image-tools" class="mt-3 inline-block text-xs font-medium text-gold hover:underline"> Ver todo Herramientas de imagen → </a> </aside> </div> </div> <div class="my-6 flex justify-center" aria-label="Advertisement"> <ins class="adsbygoogle block w-full" style="display:block" data-ad-client="ca-pub-1594540167961527" data-ad-slot="6784859214" data-ad-format="auto" data-full-width-responsive="true"></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div> </div> </main> <footer class="relative mt-20 border-t border-gold/15 bg-charcoal-surface/40"> <div class="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-gold/50 to-transparent"></div> <div class="mx-auto max-w-7xl px-4 py-14 sm:px-6"> <div class="grid gap-10 md:grid-cols-4"> <div class="md:col-span-1"> <a href="https://tonton-tools.com/es" class="inline-block transition hover:opacity-90" aria-label="TontonTools home"> <img src="https://tonton-tools.com/images/logo.png" alt="TontonTools" width="1116" height="269" class="h-11 w-auto"> </a> <p class="mt-4 text-sm text-cream/60"> TontonTools is a free, ad-supported collection of 330+ online tools for SEO professionals, developers, YouTubers, content creators, and students. </p> </div> <div class="md:col-span-2 grid grid-cols-2 gap-6 sm:grid-cols-3"> <a href="https://tonton-tools.com/es/tools/text-tools" class="text-sm text-cream/70 transition hover:text-gold">Herramientas de texto</a> <a href="https://tonton-tools.com/es/tools/youtube-tools" class="text-sm text-cream/70 transition hover:text-gold">Herramientas de YouTube</a> <a href="https://tonton-tools.com/es/tools/seo-tools" class="text-sm text-cream/70 transition hover:text-gold">Herramientas SEO</a> <a href="https://tonton-tools.com/es/tools/domain-ip-tools" class="text-sm text-cream/70 transition hover:text-gold">Herramientas de dominio e IP</a> <a href="https://tonton-tools.com/es/tools/website-management" class="text-sm text-cream/70 transition hover:text-gold">Gestión de sitios web</a> <a href="https://tonton-tools.com/es/tools/web-development" class="text-sm text-cream/70 transition hover:text-gold">Desarrollo web</a> <a href="https://tonton-tools.com/es/tools/image-tools" class="text-sm text-cream/70 transition hover:text-gold">Herramientas de imagen</a> <a href="https://tonton-tools.com/es/tools/calculators" class="text-sm text-cream/70 transition hover:text-gold">Calculadoras</a> <a href="https://tonton-tools.com/es/tools/unit-converters" class="text-sm text-cream/70 transition hover:text-gold">Convertidores de unidades</a> </div> <div> <h3 class="font-heading text-lg text-gold">Empresa</h3> <ul class="mt-4 space-y-2 text-sm"> <li><a href="https://tonton-tools.com/es/about" class="text-cream/70 hover:text-gold">Acerca de</a></li> <li><a href="https://tonton-tools.com/es/contact" class="text-cream/70 hover:text-gold">Contacto</a></li> <li><a href="https://tonton-tools.com/es/blog" class="text-cream/70 hover:text-gold">Bitácora</a></li> <li><a href="https://tonton-tools.com/es/developers" class="text-cream/70 hover:text-gold">API para desarrolladores</a></li> <li><a href="https://tonton-tools.com/es/report-tool" class="text-cream/70 hover:text-gold">Informe una herramienta</a></li> </ul> <h3 class="mt-6 font-heading text-lg text-gold">Legal</h3> <ul class="mt-4 space-y-2 text-sm"> <li><a href="https://tonton-tools.com/es/privacy-policy" class="text-cream/70 hover:text-gold">Política de privacidad</a></li> <li><a href="https://tonton-tools.com/es/terms-of-service" class="text-cream/70 hover:text-gold">Términos de servicio</a></li> <li><a href="https://tonton-tools.com/es/disclaimer" class="text-cream/70 hover:text-gold">Aviso legal</a></li> </ul> </div> </div> <div class="mt-10 flex flex-col items-center justify-between gap-3 border-t border-gold/10 pt-6 text-sm text-cream/60 sm:flex-row"> <p>© 2026 TontonTools. Todos los derechos reservados.</p> <p>Creado por Tonton Business Digital Agency</p> </div> </div> </footer> <div x-data="{ show: false }" x-init="show = ! localStorage.getItem('cookie_consent')" x-show="show" x-cloak x-transition.duration.300ms class="fixed inset-x-0 bottom-0 z-50 p-3 sm:p-4"> <div class="glass-card mx-auto flex max-w-4xl flex-col items-center gap-3 p-4 sm:flex-row sm:gap-4"> <p class="flex-1 text-center text-sm text-cream/70 sm:text-left"> We use cookies for analytics and to keep the tools free via ads. See our <a href="https://tonton-tools.com/es/privacy-policy" class="text-gold hover:underline">Privacy Policy</a>. </p> <div class="flex shrink-0 gap-2"> <button @click="localStorage.setItem('cookie_consent','declined'); show=false" class="btn-ghost text-sm">Decline</button> <button @click="localStorage.setItem('cookie_consent','accepted'); window.loadAnalytics && window.loadAnalytics(); show=false" class="btn-gold text-sm">Accept</button> </div> </div> </div> <script> // Fire a GA4 "tool_used" event the first time a visitor interacts with this tool. (function () { var section = document.getElementById('tool-interface'); if (!section) return; var fired = false; function fire() { if (fired) return; fired = true; window.trackToolUsed && window.trackToolUsed('svg-optimizer', 'image-tools'); } ['input', 'change', 'click', 'submit'].forEach(function (ev) { section.addEventListener(ev, fire, { passive: true }); }); })(); </script> </body> </html>