Cómo crear y administrar Sprites SVG

SVG está ganando la carrera cuando se trata de gráficos que se escalan en la web. Los diseñadores y desarrolladores eligen SVG en lugar de fuentes de iconos, imágenes ráster y sprites ráster.

Los beneficios de usar SVG son numerosos, pero para mí, se reduce a la escalabilidad.

Usar SVG puede ser tan simple como copiar y pegar el código exportado desde un programa basado en vectores. A partir de ahí, el problema radica en entregar esos gráficos de la manera más eficiente.

Ingrese los sprites SVG. Sin embargo, funcionan en un patrón similar al de los sprites de imagen, la forma en que se crean e incluyen en una página web es muy diferente.

¿Por qué usar Sprites en absoluto?

Los Sprites ayudan a aumentar la velocidad, mantienen un flujo de trabajo de desarrollo constante y hacen que la creación de iconos sea mucho más rápida. Los sprites SVG generalmente se crean utilizando iconos de una forma o forma similar, mientras que los gráficos a mayor escala son aplicaciones únicas.

En muchos casos, una biblioteca de iconos escalará en tamaño. Agregar nuevos iconos debe ser eficiente y, en última instancia, fácil. Los sprites SVG ayudan a hacer esto realidad.

Exportación de código SVG

Los archivos SVG se pueden exportar desde su programa gráfico vectorial favorito. Tiendo a usar una combinación de herramientas y he descubierto que todas ellas tienen un gran soporte para exportar archivos SVG. Bosquejo se destaca en particular porque puede seleccionar un ícono o gráfico y presionar el comando + c y tener ese código SVG copiado en su portapapeles. Luego puede dirigirse a su editor de código, pegar el código y hacer que el gráfico aparezca ante sus ojos en el navegador.

Optimizando SVG para la Web

Lamentablemente, si copia y pega de Sketch, es posible que el código no sea óptimo y se pueda optimizar mejor. Hay algunas herramientas para eso.

Si usa Sketch en particular, consulte Plugin compresor SVGO . A medida que exporta archivos SVG, el complemento los optimiza automáticamente antes de guardar el archivo.

Si no usa Sketch, consulte la misma funcionalidad en formulario de aplicación o si prefiere aplicaciones web, Jake Archibald armar uno para ti .

Creando Sprites SVG Manualmente

La creación de un sprite SVG se puede hacer manualmente. Necesitarás un programa de diseño vectorial que pueda generar código SVG. Para esto, utilizaré Sketch y exportaré algunos íconos como SVG.

Después de exportar los iconos y ejecutarlos a través del complemento SVGO Compressor me queda lo siguiente para cada icono. Tenga en cuenta que en este momento cada icono es un archivo separado:

Ahora que nuestros SVG están optimizados, podemos comenzar a crear el sprite utilizando el código anterior. Para crear un inicio de sprite con el entorno

Observe cómo el SVG tiene un estilo de visualización en línea: ninguno . Esto es necesario para utilizar correctamente los sprites SVG. Aunque los iconos no se mostrarán en la página, una gran cantidad de espacio lo hará. Para evitar este espacio adicional creado por SVG, estamos ocultando el SVG con CSS.

Simplemente incluir el código de los íconos no será suficiente en este punto. Necesitamos hacer uso de un elemento que le permitirá incrustar el código SVG y proporcionar su propio atributo viewBox específico, que es importante para los iconos que pueden mostrarse en diferentes anchos y alturas.

Elementos definidos dentro del elemento solo se puede representar en el navegador cuando se hace referencia por el elemento.

El sprite final se parece al siguiente fragmento:

Observe cómo he agregado atributos de id para cada elemento de símbolo. Esto es importante porque cuando haces referencia a un ícono específico en el sprite necesitas una forma única de apuntarlo. Además, observe cómo cada icono tiene sus propios parámetros únicos de viewBox . Los dos primeros parámetros casi siempre serán "0 0"; los segundos dos serán iguales al tamaño del icono que ha exportado.

Incluyendo un ícono en la página

Con el sprite listo para funcionar, necesitamos una manera de incluir íconos específicos en una página. Para hacer esto, utilizarás elemento escrito de esta manera:

En su página, debería ver que aparece el ícono y eso es todo lo que hay que hacer.

Automatizando Sprites SVG

Crear sprites en línea SVG no es tan difícil. El problema radica en el hecho de que muchos desarrolladores necesitan crear sprites para cientos de íconos o más para aplicaciones robustas. Crear algo así a mano puede llevar mucho tiempo y ser tedioso. Los desarrolladores necesitan una forma de automatizar el proceso para que no pierdan el tiempo creando sprites a mano.

Afortunadamente, hay herramientas para tal cosa. Los administradores de tareas como Gruñido o Trago tener complementos disponibles para usar. Estos optimizan la creación de los sprites SVG. Al suministrar cada archivo SVG dentro de un directorio determinado, el complemento optimizará y generará todos los SVG en su directorio referenciado para ser incluidos en un nuevo sprite nuevo.

Si necesita agregar más íconos al sprite, todo lo que tiene que hacer es exportar el ícono como un SVG y agregarlo a la misma carpeta. A partir de ahí, el complemento maneja la parte que consume mucho tiempo.

Algunos complementos disponibles en diferentes sabores: grunt-svgstore , gulp-svg-sprites , svg-sprite .

Conclusión

Al igual que con todas las cosas en el desarrollo web, hay más de una forma de crear sprites SVG. Puede hacer referencia a ellos externamente, incluirlos a través de CSS e incluso hacerlos sensible .