Los archivos SVG pueden inflarse con datos innecesarios, ralentizando sitios web y aumentando costos de ancho de banda. La optimización adecuada de rutas reduce drásticamente el tamaño de archivo mientras preserva la calidad visual.

Por qué importa la optimización de rutas SVG

Entender la complejidad de las rutas SVG

Qué hace pesadas las rutas

Las rutas SVG acumulan peso innecesario: precisión decimal excesiva, comandos de ruta redundantes, puntos de ancla innecesarios, metadatos del editor, grupos y defs vacíos, estilos inline en lugar de clases.

Medir la complejidad de las rutas

Evalúa tus SVG: longitud total de ruta (bytes), número de nodos/puntos, precisión decimal usada, eficiencia de comandos.

Optimización de comandos de ruta

Tipos de comandos

Comandos de ruta SVG — absolutos vs. relativos: M (moveto) vs. m, L (lineto) vs. l, C (curveto) vs. c, H (horizontal) vs. h, V (vertical) vs. v.

Los comandos relativos ahorran bytes

Comparación:

<!-- Absoluto (más bytes) -->
<path d="M100,100 L150,100 L150,150 L100,150 Z"/>

<!-- Relativo (menos bytes) -->
<path d="M100,100l50,0l0,50l-50,0z"/>

Comandos abreviados

Usa H y V para líneas rectas:

<!-- Antes -->
<path d="M10,10 L50,10 L50,50"/>

<!-- Después (usando H y V) -->
<path d="M10,10H50V50"/>

Al editar manualmente rutas SVG, reemplaza comandos L (lineto) consecutivos que solo cambian un eje por comandos H (horizontal) o V (vertical). Solo esto puede reducir los datos de ruta un 20 % en formas geométricas.

Reducción de precisión decimal

Encontrar el equilibrio correcto

Niveles de precisión: 8 decimales = máxima (innecesaria), 4 = muy precisa, 2 = generalmente suficiente, 1 = mínima para iconos pequeños, 0 = solo enteros (iconos).

Ejemplo de impacto

<!-- Alta precisión (45 bytes) -->
<path d="M10.123456,10.789012 L50.246802,10.135790"/>

<!-- Precisión reducida (21 bytes) -->
<path d="M10.12,10.79 L50.25,10.14"/>

<!-- Solo enteros (17 bytes) -->
<path d="M10,11 L50,10"/>

Optimización con VectoSolve

VectoSolve optimiza automáticamente la salida: precisión apropiada según el uso, comandos de ruta eficientes, SVG limpios y listos para producción.

Reducir puntos de ancla

Estrategias de reducción de puntos

Menos puntos = archivos más pequeños: simplifica curvas dentro de tolerancia, elimina puntos en líneas rectas, convierte curvas a arcos cuando sea posible, usa detección de simetría.

Optimización de curvas Bézier

<!-- Curva compleja (muchos puntos) -->
<path d="M0,0 C10,5 20,10 30,10 C40,10 50,5 60,0"/>

<!-- Simplificada (visual similar) -->
<path d="M0,0 Q30,15 60,0"/>

Eliminar datos innecesarios

Metadatos del editor

Elimina datos agregados automáticamente: atributos xmlns:inkscape, xmlns:sodipodi, inkscape:version, data-name.

Elementos vacíos

Limpia elementos sin usar: grupos vacíos <g></g>, defs vacíos <defs></defs>.

Valores predeterminados

No especifiques valores por defecto: fill="black" fill-opacity="1" stroke="none" pueden eliminarse.

Agrupación y estructura

Minimizar anidación

Aplana grupos innecesarios: <g><g><g><path/></g></g></g> → <path/>.

Uso eficiente de defs

Reutiliza elementos repetidos con <defs> y <use>.

Optimización de estilos

Clases CSS vs. inline

Para múltiples elementos, las clases CSS son más compactas que los estilos inline repetidos.

Abreviación de colores

Usa colores hex cortos: #ff0000 → #f00, #ffffff → #fff, #000000 → #000.

Herramientas de optimización

SVGO (SVG Optimizer)

Optimizador estándar de la industria:

# Instalar
npm install -g svgo

# Optimizar archivo
svgo input.svg -o output.svg

# Opciones comunes
svgo --precision=2 input.svg

SVGOMG (en línea)

Interfaz SVGO en el navegador: vista previa visual, opciones activables, comparación de tamaño en tiempo real.

Optimización integrada en VectoSolve

Al convertir con VectoSolve: optimización automática de rutas, salida limpia y eficiente, archivos listos para producción.

El flag --precision de SVGO controla los decimales globalmente. Para iconos mostrados en tamaño pequeño, --precision=1 suele ser suficiente. Para ilustraciones que escalan a viewports grandes, usa --precision=2 o --precision=3.

Integración en el flujo de trabajo

Pipeline de optimización: crear/convertir artwork, vectorizar con VectoSolve, pasar por SVGO, verificar calidad visual, desplegar archivo optimizado.

Integración en el proceso de build

Automatiza con bundlers (ej: svgo-loader para Webpack).

Medir resultados

Comparación antes/después

Resultados típicos: original 50 KB, después de SVGO 15 KB (reducción del 70 %), gzipeado 4 KB (reducción del 92 %).

Impacto en rendimiento

Mide mejoras reales: tiempo de carga, Time to First Paint, ahorro de ancho de banda, Core Web Vitals.

Resumen de mejores prácticas

Checklist rápido: reducir precisión decimal (2-4 lugares), usar comandos relativos, eliminar metadatos del editor, eliminar grupos vacíos, usar clases CSS, acortar colores hex, eliminar atributos por defecto.

Cuándo NO optimizar

Preserva la complejidad cuando la precisión es crítica (CAD/técnico), la animación requiere rutas específicas, la accesibilidad necesita IDs específicos, o se requiere gestión del archivo fuente.

Conclusión

La optimización de rutas SVG mejora drásticamente el rendimiento web mientras mantiene la calidad visual. Comienza con vectores limpios desde VectoSolve, luego aplica técnicas de optimización apropiadas para tu caso. La combinación de vectorización correcta y optimización puede reducir el tamaño de archivo un 80 % o más.

Optimización	Antes	Después	Ahorro
Precisión decimal 8 → 2	M 12.34567890 45.67891234	M 12.35 45.68	~35 %
Comandos absolutos → relativos	M 100 200 L 150 250	m 100 200 l 50 50	~20 %
Abreviación H/V	l 50 0 / l 0 80	h 50 / v 80	~15 %
Eliminar nodos redundantes	12 puntos en línea recta	2 extremos	~40–60 %
Fusionar rutas adyacentes	5 elementos <path> separados	1 <path> combinado	~25 %