Optimizador de SVG

El Optimizador de SVG es una potente herramienta en línea que le ayuda a reducir el tamaño de sus archivos SVG (Scalable Vector Graphics) sin sacrificar la calidad visual. Ya sea que trabaje con iconos, ilustraciones, logotipos o gráficos complejos, esta herramienta elimina el código innecesario, acorta los valores y limpia su SVG para un rendimiento web óptimo.

¿Por qué optimizar archivos SVG?

Los archivos SVG exportados desde herramientas de diseño como Adobe Illustrator, Figma, Sketch o Inkscape suelen contener cantidades significativas de datos innecesarios:

• Metadatos del editor: Información específica del software de edición que no es necesaria para la visualización.
• Comentarios XML: Notas del desarrollador y comentarios generados automáticamente.
• Valores por defecto: Atributos establecidos en sus valores predeterminados que los navegadores ya asumen.
• Precisión excesiva: Números con más de 10 decimales cuando 2 o 3 son suficientes.
• Elementos redundantes: Grupos vacíos, definiciones y recursos no utilizados.
• Colores verbosos: Notación rgb() y colores hexadecimales de 6 dígitos que pueden acortarse.

Optimizar sus SVG elimina este exceso, lo que resulta en cargas de página más rápidas, menor uso de ancho de banda y mejores puntuaciones en las Core Web Vitals.

Técnicas de optimización

Eliminar comentarios y metadatos

Los comentarios XML () y los elementos de metadatos contienen información que no es necesaria para el renderizado. Las herramientas de diseño a menudo incrustan metadatos extensos, incluyendo la versión del software, información del autor e historial de edición. Eliminarlos puede reducir significativamente el tamaño del archivo.

Eliminar DOCTYPE y declaración XML

La declaración DOCTYPE y el prólogo XML no son necesarios para los SVG incrustados en HTML5. Los navegadores modernos renderizan los SVG correctamente sin estas declaraciones, por lo que es seguro eliminarlos para el uso web.

Eliminar atributos vacíos y por defecto

Los atributos establecidos con valores vacíos o sus valores por defecto no sirven para nada. Por ejemplo, fill-opacity="1" es el valor predeterminado y se puede eliminar. Esta optimización a menudo produce ahorros sustanciales sin ningún impacto visual.

Acortar valores de color

Los valores de color se pueden representar de varias maneras. Esta herramienta convierte formatos detallados en equivalentes más cortos:

• rgb(255, 0, 0) → #f00 o red
• #ff0000 → #f00
• #ffffff → #fff

Redondear números

Las herramientas de diseño a menudo exportan coordenadas y dimensiones con una precisión excesiva (por ejemplo, 50.123456789). Para el uso web, 2 o 3 decimales suelen ser suficientes. Esta herramienta redondea los números a la precisión especificada manteniendo la fidelidad visual.

Optimizar transformaciones

Las transformaciones de identidad como translate(0,0), scale(1) y rotate(0) no tienen ningún efecto visual y pueden eliminarse de forma segura. La herramienta detecta y elimina estas transformaciones redundantes.

Eliminar espacios en blanco

Los espacios innecesarios, los saltos de línea y la sangría añaden bytes sin beneficio alguno. Minificar los espacios en blanco puede reducir el tamaño del archivo entre un 10% y un 30% dependiendo del formato original.

Cómo usar el Optimizador de SVG

1. Suba o pegue su SVG: Arrastre y suelte un archivo SVG en el área de carga, haga clic para seleccionar un archivo o pegue su código SVG directamente en el área de texto.
2. Configure las opciones de optimización: Seleccione qué técnicas de optimización aplicar. Todas las opciones están habilitadas por defecto para la máxima compresión. Ajuste el control deslizante de precisión numérica si es necesario (menor = archivo más pequeño, mayor = más precisión).
3. Haga clic en "Optimizar SVG": La herramienta procesa su SVG y aplica todas las optimizaciones seleccionadas.
4. Revise los resultados: Vea estadísticas detalladas que incluyen el tamaño original, el tamaño optimizado, los bytes ahorrados y el porcentaje de reducción. Compare las vistas previas de antes y después para verificar la calidad visual.
5. Descargue o copie: Descargue el archivo SVG optimizado o copie el código al portapapeles.

Elegir la precisión adecuada

La opción de precisión numérica controla cuántos decimales se mantienen al redondear coordenadas y dimensiones:

• 1 decimal: Optimización agresiva, ideal para iconos y logotipos sencillos donde las pequeñas diferencias no son visibles.
• 2 decimales: Buen equilibrio para la mayoría de los gráficos web.
• 3 decimales (por defecto): Recomendado para ilustraciones detalladas, logrando aún una buena compresión.
• 4-5 decimales: Alta precisión para gráficos complejos donde el posicionamiento exacto es fundamental.

Cuándo conservar ciertos elementos

Aunque lo habitual es buscar la máxima optimización, hay casos en los que conviene conservar ciertos elementos:

• Metadatos para la accesibilidad: Mantenga los elementos de título y descripción si proporcionan información de accesibilidad importante para los lectores de pantalla.
• Comentarios para documentación: Si su SVG incluye comentarios que documentan la estructura para los miembros del equipo, considere conservarlos.
• Alta precisión para animaciones: Los SVG con animaciones complejas pueden requerir una mayor precisión numérica para evitar movimientos bruscos.

Privacidad y seguridad

Sus archivos SVG se procesan de forma segura:

• Toda la optimización ocurre en el servidor y los archivos se descartan inmediatamente después del procesamiento.
• No se almacena, registra ni guarda ningún contenido SVG.
• Sus archivos nunca salen de su navegador hasta que hace clic en "Optimizar SVG".
• Los resultados se transmiten de forma segura y no se almacenan en caché.

Preguntas frecuentes

¿Qué es la optimización de SVG y por qué es importante?

La optimización de SVG es el proceso de reducir el tamaño de los archivos SVG mediante la eliminación de código innecesario, el acortamiento de los valores de los atributos y la limpieza de la estructura del archivo. Esto es importante porque los archivos SVG más pequeños se cargan más rápido, mejorando la experiencia del usuario y el rendimiento del sitio.

¿Afecta la optimización de SVG a la calidad visual de mis gráficos?

No, la optimización adecuada solo elimina datos no visuales. Sus formas, colores y diseño permanecerán idénticos en el navegador.

¿Cuánto puedo reducir el tamaño de mi archivo SVG?

Depende de la fuente. Los archivos de Adobe Illustrator o Inkscape a menudo pueden reducirse entre un 20% y un 70% debido a la gran cantidad de metadatos que incluyen por defecto.

¿Es seguro mi código SVG?

Absolutamente. El procesamiento se realiza en memoria volátil y los datos se borran instantáneamente tras completar la tarea. No conservamos ninguna copia de su trabajo.

¿Qué opciones de optimización debo usar?

Los ajustes predeterminados están diseñados para ofrecer el mejor resultado para la mayoría de los usuarios web. Solo ajuste la precisión si nota distorsiones en gráficos extremadamente detallados.

Recursos adicionales

• Documentación de SVG en MDN
• SVG - Wikipedia
• Web.dev - Optimizar el Largest Contentful Paint