Optimizador de Sprites SVG

Acerca de Optimizador de Sprites SVG

Esta herramienta recibe un lote de iconos SVG y hace dos cosas. Primero adelgaza cada archivo: quita la declaración XML, los comentarios, los metadatos y los atributos de los editores Inkscape, Sodipodi y Sketch, compacta los espacios y recorta decimales. Después combina el resultado en un único sprite basado en symbol o en un conjunto de clases CSS con data URI.

No es SVGO. No recalcula los datos de trazado: elimina texto según reglas fijas. Eso hace el resultado predecible, pero conviene saber qué regla puede romper qué cosa.

Cómo symbol y use forman un sprite

Un elemento symbol es una plantilla que nunca se dibuja por sí sola. Das a cada symbol un id y un viewBox, los reúnes en un SVG, y desde cualquier punto de la página un elemento use puede apuntar con su href a un id como #icon-home para dibujar una copia. Te ahorras una petición HTTP por icono, y un icono usado veinte veces envía su trazado una sola vez.

La herramienta crea cada id a partir del nombre del archivo: en minúsculas, con todo lo que no sea letra o dígito convertido en guion, con el prefijo icon- y con otro prefijo si empezaría por un número. Si el original no tiene viewBox, se construye con width y height o se supone 0 0 24 24. Cuando use apunta a un archivo aparte (sprite.svg#id), los navegadores solo permiten referencias del mismo origen, así que un sprite alojado en otro dominio, como una CDN, no se resolverá. En ese caso, inserta el sprite en línea dentro del HTML.

Ids que chocan entre archivos

Los SVG exportados desde herramientas de diseño suelen llamar a sus degradados y trazados de recorte paint0_linear, clip0 o simplemente a. Si juntas varios en un sprite, el mismo id aparece más de una vez. El navegador resuelve cada referencia con la primera coincidencia del documento, y el segundo icono acaba pintado con el degradado del primero sin avisar.

La herramienta antepone a cada id interno de un symbol el id del propio symbol y un doble guion bajo —por ejemplo icon-home__clip0— y reescribe las referencias en consecuencia: url(#…), href="#…" y los valores begin y end de las animaciones. Las referencias a ids que no están definidos dentro de ese archivo no se tocan.

Qué se puede quitar sin riesgo y qué no

Los comentarios, la declaración XML, los bloques metadata y los atributos propios del editor no afectan al dibujo, así que se pueden eliminar. viewBox es otra historia: es lo que mantiene las proporciones al cambiar el tamaño del icono. Por eso SVGO deja fuera de su preset-default tanto la eliminación de viewBox como la de title, y esta herramienta también conserva viewBox.

title y desc se conservan. A diferencia de los bloques metadata, son el nombre accesible que un lector de pantalla anuncia para el icono, así que también se quedan dentro de cada symbol del sprite. Aun así, algunas combinaciones de navegador y lector de pantalla no leen el title de un icono cargado con use, de modo que para iconos con significado conviene añadir también un nombre en el HTML con aria-label o texto oculto visualmente.

Compactar espacios elimina todo el espacio entre etiquetas. Los iconos hechos solo de formas no se ven afectados, pero un SVG que compone palabras con text y tspan puede perder los espacios entre ellas. Revisa a ojo cualquier SVG con texto después de optimizarlo.

Elige la precisión decimal según el tamaño del viewBox

El control de precisión (0–4, por defecto 2) redondea todos los números decimales del documento. El error se mide en unidades de usuario, así que lo visible que resulte depende del viewBox. En un icono de 24×24, dos decimales suponen como mucho 0,005 unidades: 0,005 px al dibujarlo a 24 px, imperceptible. Con 0 el error puede llegar a 0,5 unidades, y en un icono de 24 px las líneas pueden moverse medio píxel.

La otra cara: los SVG dibujados en un sistema de coordenadas diminuto, como viewBox="0 0 1 1", pierden forma visiblemente incluso con dos decimales. Si en la vista previa las curvas se ven facetadas, sube la precisión.

¿Sprite de symbol o sprite CSS?

El sprite de symbol se dibuja como SVG en línea, así que los iconos hechos con fill="currentColor" siguen el color del texto que los rodea, y puedes cambiar color y grosor de trazo desde CSS. El sprite CSS incrusta cada icono como data URI en background-image. Un SVG cargado así es un documento aparte e ignora el CSS de la página y currentColor, lo que encaja con logotipos e ilustraciones de color fijo.

Los data URI van codificados como URL, no en base64. Base64 infla el marcado en torno a un tercio y se comprime mal con gzip, mientras que el SVG codificado como URL conserva su estructura de texto y se comprime mejor en la transferencia.

Ejemplos

Cómo se usa

1. Arrastra varios archivos SVG.
2. Ajusta la precisión decimal y revisa el ahorro de cada archivo.
3. Copia o descarga el sprite de symbol o el sprite CSS.

Preguntas frecuentes