{"id":208,"date":"2026-08-11T16:13:57","date_gmt":"2026-08-11T19:13:57","guid":{"rendered":"https:\/\/freeanimationpower.org\/blog\/?p=208"},"modified":"2026-08-11T16:13:57","modified_gmt":"2026-08-11T19:13:57","slug":"adelgazador_magico_svgo_optimizacion","status":"publish","type":"post","link":"https:\/\/freeanimationpower.org\/blog\/adelgazador_magico_svgo_optimizacion\/","title":{"rendered":"El Adelgazador Magico: Como SVGO Hace que tus Dibujos Ocupen Menos sin Perder Calidad"},"content":{"rendered":"

\"\"<\/h1>\n

\u00bfTe ha pasado que tienes que empacar para un viaje, tu maleta esta a reventar, y te sientas encima para cerrarla? Luego descubres un truco: enrollas la ropa en lugar de doblarla, metes los calcetines dentro de los zapatos, y de repente cabe todo y hasta sobra espacio. No botaste nada. Solo lo organizaste mejor.<\/p>\n

SVGO hace exactamente eso con tus dibujos vectoriales.<\/p>\n

\"\"<\/p>\n

El Problema: Los SVG Son Parlanchines<\/h2>\n

Cuando un programa como VTracer genera un archivo SVG, escribe TODO. Absolutamente todo. Incluye metadatos como “creado con VTracer version 0.2.5 el dia 15 de marzo.” Incluye comentarios que los programadores dejaron. Incluye grupos vacios que no contienen nada. Incluye decimales larguisimos como 123.4567890123<\/code> cuando 123.46<\/code> seria suficiente.<\/p>\n

Un archivo tipico generado por VTracer contiene mucha informacion redundante. No es culpa de VTracer: los programas generan archivos pensando en que sean faciles de leer por otros programas, no en que sean compactos.<\/p>\n

\"\"<\/p>\n

SVGO: El Organizador Profesional<\/h2>\n

SVGO significa “SVG Optimizer” (Optimizador de SVG). Es una herramienta que lee tu archivo SVG, encuentra todo lo que sobra, y lo elimina o compacta. Piensa en SVGO como Marie Kondo para dibujos digitales: “\u00bfesto me produce alegria? No. Fuera.”<\/p>\n

Veamos que hace SVGO paso a paso:<\/p>\n

1. Elimina Metadatos y Comentarios<\/h3>\n

Los metadatos son informacion SOBRE el archivo que no es parte del dibujo. Como la etiqueta de una camisa. La camisa funciona igual sin etiqueta.<\/p>\n

Los comentarios son notas que los programadores escribieron para otros programadores. El navegador no los necesita para dibujar. Fuera.<\/p>\n

2. Colapsa Grupos Vacios o Inutiles<\/h3>\n

En SVG puedes agrupar elementos con la etiqueta <g><\/code>. A veces VTracer crea grupos dentro de grupos dentro de grupos, y algunos terminan vacios (sin nada adentro) o con un solo elemento (no necesitan grupo). SVGO los elimina o los “aplana” (colapsa).<\/p>\n

Es como si guardaras una caja vacia dentro de otra caja dentro de otra caja. Al final, la caja de afuera ocupa espacio pero no contiene nada util. SVGO bota las cajas vacias.<\/p>\n

3. Redondea Decimales Innecesarios<\/h3>\n

Este es uno de los trucos mas efectivos. Una coordenada como x=\"123.456789\"<\/code> usa 10 caracteres. Redondeada a x=\"123.46\"<\/code> usa 7 caracteres. La diferencia visual es INVISIBLE al ojo humano (4 milesimas de pixel, menos que el grosor de un cabello en tu pantalla).<\/p>\n

Pero cuando tienes miles de coordenadas en un archivo, esos 3 caracteres ahorrados por coordenada se suman rapidamente.<\/p>\n

4. Fusiona Caminos del Mismo Color<\/h3>\n

Si tienes dos formas separadas que tienen exactamente el mismo color de relleno y no se tocan, SVGO las fusiona en un solo <path><\/code>. En lugar de:<\/p>\n

svg\r\n<path fill=\"#FF0000\" d=\"M10,10 L20,10\"\/>\r\n<path fill=\"#FF0000\" d=\"M30,10 L40,10\"\/><\/code><\/pre>\n
Las convierte en:<\/p>\n
svg\r\n<path fill=\"#FF0000\" d=\"M10,10 L20,10 M30,10 L40,10\"\/><\/code><\/pre>\n
Mismo dibujo, menos lineas, menos caracteres repetidos.<\/p>\n
5. Convierte Atributos a su Forma Mas Corta<\/h3>\n
SVG permite escribir lo mismo de varias formas. Por ejemplo, un color puedes escribirlo como fill=\"#FF0000\"<\/code> (7 caracteres) o fill=\"red\"<\/code> (3 caracteres). SVGO siempre elige la forma mas corta.<\/p>\n
Lo mismo con los numeros: 0.5<\/code> se convierte en .5<\/code> porque el cero a la izquierda no aporta nada. 1.0<\/code> se convierte en 1<\/code> porque el .0<\/code> no aporta nada.<\/p>\n
El Resultado: 30-60% de Reduccion<\/h2>\n
Cuando SVGO termina su trabajo, tu archivo SVG es entre un 30% y un 60% mas peque\u00f1o. A veces mas. Y el dibujo se ve EXACTAMENTE IGUAL. No perdiste calidad. No perdiste detalle. Solo perdiste grasa.<\/p>\n
Imagina que tu archivo SVG es una maleta que pesa 10 kilos. Despues de SVGO pesa 5 kilos. El contenido es el mismo. Solo que ahora cabe en la mitad del espacio y se transmite por internet en la mitad del tiempo.<\/p>\n
\"\"<\/p>\n
La Combinacion con VTracer<\/h2>\n
Nuestro flujo de trabajo real combina tres herramientas:<\/p>\n
    \n
  • VTracer<\/strong> (Rust\/WASM): hace el trabajo pesado de encontrar bordes y generar SVG.<\/li>\n
  • SVGO<\/strong> (JavaScript): optimiza el resultado de VTracer, eliminando redundancia.<\/li>\n
  • ImageTracer.js<\/strong> (JavaScript): plan B si VTracer falla. Tambien pasa por SVGO.<\/li>\n<\/ul>\n
    Es como una cadena de montaje: el primero fabrica, el segundo pule, el tercero esta de respaldo por si algo falla.<\/p>\n
    Por que Importa el Tama\u00f1o del Archivo<\/h2>\n
    Un SVG mas peque\u00f1o importa por tres razones:<\/p>\n
    Velocidad de carga:<\/strong> En una pagina web, cada kilobyte cuenta. Un SVG de 100 KB carga mas rapido que uno de 200 KB. Parece poco, pero multiplicalo por cientos de usuarios y la diferencia es enorme.<\/p>\n
    Almacenamiento:<\/strong> Si generas muchos SVGs (digamos, vectorizas todas las fotos de tus vacaciones), 50% de ahorro en cada archivo es 50% menos espacio ocupado.<\/p>\n
    Velocidad de renderizado:<\/strong> El navegador tiene que leer y procesar cada linea del SVG antes de pintarlo. Menos lineas = menos trabajo = dibujo mas rapido en pantalla.<\/p>\n
    \"\"<\/p>\n
    Vamos a Descubrir Juntos<\/h2>\n
    SVGO es un heroe silencioso. Nadie lo ve trabajar. Nadie le aplaude. Pero sin el, tus dibujos vectoriales ocuparian el doble y tu pagina web tardaria el doble en cargar.<\/p>\n
    Es como esos trucos de organizacion: no son glamorosos, no salen en revistas, pero hacen que todo funcione mejor. Doblar la ropa en rollitos en lugar de cuadrados. Guardar las cucharas todas juntas en lugar de revueltas con los tenedores. Etiquetar las cajas del atico.<\/p>\n
    La organizacion no es emociante. Pero cuando necesitas encontrar algo rapido, agradeces haber organizado. Cuando necesitas que tu pagina web cargue rapido, agradeces tener SVGO.<\/p>\n","protected":false},"excerpt":{"rendered":"
    \u00bfTe ha pasado que tienes que empacar para un viaje, tu maleta esta a reventar, y te sientas encima para cerrarla? Luego descubres un truco: […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"class_list":["post-208","post","type-post","status-publish","format-standard","hentry","category-aprende-vector-image"],"_links":{"self":[{"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/posts\/208","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/comments?post=208"}],"version-history":[{"count":3,"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/posts\/208\/revisions"}],"predecessor-version":[{"id":402,"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/posts\/208\/revisions\/402"}],"wp:attachment":[{"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/media?parent=208"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/categories?post=208"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/tags?post=208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}