Recursos de aprendizaje sobre SVG y SVG sprites

Aprende todo lo que necesitas saber sobre SVG y SVG sprites con nuestros recursos.

Comienza a utilizar SVG desde la base hasta convertirte en un maestro a través de videos, audios, manuales en pdf o sitios web.

Crea tus SVG y sprites "a mano" o apóyate en herramientas. ¡Tú eliges!

Sumario de recursos
  1. Pasos para crear y utilizar tu propio stripe SVG
  2. Herramientas
  3. Videotutoriales
  4. Podcasts
  5. Enlaces externos y manuales

Crea y usa tu propio sprite SVG en 6 sencillos pasos

1 Obten SVG

Consigue un conjunto de SVG o haz el tuyo propio.

2 Framework 

<svg xmlns="http://www.w3.org/2000/svg">
  [<defs>]
  [</defs>]
</svg>

3 Iconos

Incluye los iconos dentro de la etiqueta <svg>.

<symbol id="twitter" viewbox="0 0 24 24">
[<title>Twitter</title>]
<path d="..." />
</symbol>

4 Repite 

<symbol id="twitter" viewbox="0 0 24 24">
...
</symbol>
<symbol id="facebook" viewbox="0 0 24 24">
...
</symbol>

5 Usa los iconos 

<svg class="icon icon--twitter">
<use xlink:href="[path/sprite.svg]#twitter" href="[path/sprite.svg]#twitter"></use>
</svg>

6 Añade estilos 

.icon {
    width: 1rem;
    height: 1rem;
    [...]
}
.icon--twitter {
    fill: #1da1f2;
    [...]
}

Herramientas

Hay muchas herramientas tanto gratuitas como de pago que te pueden ayudar a crear SVG y generar y mantener tus sprites SVG. Estas son nuestras recomendaciones:

Adobe Illustrator

El archiconocido editor de gráficos escalables de Adobe sigue siendo la opción por excelencia de los diseñadores. De pago.

Inkscape

Excelente alternativa de código abierto para la creación y manipulación de gráficos escalables. De interfaz sencilla pero potente.

Vectr

Herramienta gratuita en línea con las utilidades básicas para crear vectores y diseños basados en vectores.

SVG-edit

Veloz editor de gráficos SVG basado en Javascript. Se usa a través del navegador desde localhost.

IcoMoon

Ofrece un paquete de iconos vectoriales, junto con una aplicación HTML5 gratuita para crear fuentes de iconos personalizadas o sprites SVG.

svg spreact

Herramienta web para crear sprites SVG optimizados arrastrando o cargando imágenes SVG.

Grunt

Plugin de Grunt, un automatizador de tareas en Javascript, para crear sprites SVG. De los más conocidos y utlizados.

Gulp

Plugin de Gulp, otro automatizador de tareas en Javascript, para crear sprites SVG. De los más conocidos y utlizados.

svg-sprite

Módulo de Node.js para crear sprites y stacks SVG junto con hojas de estilo adecuadas (por ejemplo, CSS, Sass, LESS, Stylus, etc.).

Videotutoriales

Curso y tutoriales en video sobre cómo crear y utilizar sprites SVG.

Using SVG Sprites: Introduction (subtítulos en español)

Autor: Craig Campbell

Descripción: Introducción de un curso sobre cómo crear SVG y sprites SVG en ocho entregas de video.

Transcripción (español)

Hola y bienvenido a usando sprites SVG. Mi nombre es Craig Campbell y seré tu profesor en este curso.

En este pequeño curso te voy a enseñar varios métodos diferentes para usar sprites SVG en HTML.

SVG son las siglas para Scalable Vector Graphic y un archivo SVG es un gráfico basado en XML que, como su nombre indica, puede escalarse sin afectar la calidad.

Si tomamos un gráfico de mapa de bits como un archivo PNG o un archivo JPG e intentamos agrandarlo, podemos ver como pierde algo de calidad. Sus bordes se pixelan y se vuelven borrosos.

Por otra parte, si echamos un vistazo a un archivo SVG, podemos coger el gráfico y agrandarlo tanto como queramos y, como puedes ver, mantiene sus bordes perfectamente definidos.

Esto supone una gran ventaja al usar SVG en lugar de JPEG o PNG si las circuntancias lo permiten.

En este curso voy a mostrarte un par de técnicas para combinar múltiples gráficos vectoriales en un solo objeto SVG.

Y después veremos cómo mostrar esas formas o imágenes una a una llamándolas desde ese objeto SVG.

Así que tenemos mucho que aprender en poco tiempo. En la próxima lección emepezamos.

Gracias por ver el video y nos vemos pronto.

Podcasts

Programas que resolverán todas tus dudas sobre SVG. ¿Qué son? ¿Cuáles son sus ventajas? ¿Me complicarán la existencia?...

Scalable Vector Graphics (inglés)

Autor: Chris Landtiser

Descripción: ¿Cuál es la diferencia entre una imagen escalable y una tradicional? ¿Son difíciles de usar?

Transcripción (español)

Hola a todos y bienvenidos a Front and Center.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Phasellus mattis mollis nisi nec faucibus. Integer interdum dignissim venenatis. Donec eget suscipit libero. Maecenas sit amet metus varius nulla bibendum imperdiet quis sit amet mi.

[...]

What Is SVG Animation? with Cassie Evans (inglés)

Autor: Drew McLellan

Descripción: Charla sobre animación SVG. ¿Cómo pueden trabajar juntos las imágenes vectoriales, JavaScript y CSS para ofrecer atractivos gráficos en movimiento? Drew McLellan habla con la experta en SVG Cassie Evans para averiguarlo.

Transcripción (español)

Drew McLellan: Desarrolladora de front-end y conferenciante con experiencia en diseño gráfico y motion design. Empezó a programar en los tiempos de MySpace y Neopets y tiene la misión de volver a hacer la web más caprichosa. En la actualidad trabaja en Clearleft, en Brighton, Reino Unido, y se la puede encontrar jugando con SVGs en CodePen. Sabemos que es una experta en SVG y en desarrollo, pero ¿sabías que ha sido campeona nacional en la modalidad junior de la Wing Walk durante tres años consecutivos? Amigos, demos la bienvenida a Cassie Evans. Hola Cassie. ¿Cómo estás?

Cassie Evans: Estoy estupenda, gracias.

Drew: Hoy quería hablar contigo sobre una de tus pasiones, que es el SVG, y en particular el aspecto de la animación. Creo que la mayoría de las personas que escuchan este podcast habrán oído hablar de los gráficos vectoriales escalables de alguna forma. Sé que los he utilizado mucho en cosas como logotipos e iconos en los últimos años, pero no demos nada por supuesto. Así que, para quien no esté al tanto de los SVG, ¿qué los diferencia de otras formas de añadir gráficos a una página web?

Cassie: La mayor pista está en el nombre, por supuesto. SVG significa "Scalable Vector Graphic". Así que, para empezar, son imágenes que pueden ser de cualquier tamaño. Puedes hacerlas muy, muy pequeñas o muy, muy grandes, y mantendrán la calidad de la imagen y sin pixelarse como los JPEG o los PNG.

Cassie: También puedes hacerlos muy, muy pequeños en tamaño de archivo. Todo el mundo ha añadido un PNG de un millón de megabytes a su sitio web y ha visto lo que eso supone para la carga de la página. De esta forma puedes añadir todo tipo de ilustraciones y cosas geniales a tu sitio sin afectar demasiado al rendimiento, y también puedes animarlas, y esa es la parte más emocionante. Con los JPEG o los PNG, si quieres animarlos o mover partes de ellos, tendrías que cortarlos en pequeños trozos o superponerlos, mientras que con los SVG tienes elementos reales en el SVG. Tiene una estructura DOM igual que la de HTML.

Drew: Así que, supongo que en un mundo de dispositivos móviles con diferentes tamaños de pantalla y diferentes densidades de píxeles y conexiones de datos limitadas, SVG es realmente un formato que se adapta mejor a la web moderna que los antiguos estilos gráficos. ¿Es así?

Cassie: Sí, denitivamente sí.

[...]

La conversación es más larga, pero como es un ejercicio de clase esto sirve como ejemplo. Transcripción completa (inglés).

Enlaces externos y manuales

Selección de recursos web y/o pdf con distintas formas de crear e implementar sprites y gráficos SVG y mejorar su accesibilidad en la web.

W3C SVG Working Group

Sitio web oficial del grupo de trabajo del World Wide Web Consortium (W3C) dedicado a SVG. Recoge los estándares de SVG para web y algunos manuales.

Sprites con SVG

Breve explicación sobre cómo crear sprites SVG y añadirlos a tu web. Incluye al final una comparativa del rendimiento.

The power of sprites

Última parte de la guía sobre SVG de Steven Roberts. Explica de forma concisa y clara cómo crear y utilizar un stripe SVG en pocos pasos.

A Guide to Create and Use SVG Sprites

Breve explicación sobre cómo crear una plantilla básica para un sprite SVG y añadirlo a tu web. Incluye cómo crear un sprite con IcoMoon a partir de fuentes de iconos y demos.

Using SVG for the Icongraphy #SVGFTW

Razones para usar SVG y cómo crear y usar SVG y sprites. Incluye una guía para crear sprites con IcoMoon.

How to Use SVG Image Sprites

Qué son los sprite SVG, guía de uso y cómo crear SVG Sprite Stacks para poder utlizar los sprites SVG en <img>, <iframe>, <object> o como CSS background.

Generating SVG sprites (the easy way…)

Explicación rápida sobre cómo usar el paquete de Javascript svg-sprite para crear sprites SVG.

SVG (Scalable Vector Graphics)

SVG Essentials. Producting Scalable Vector Graphics with XML (2nd Edition)PDF

Completo manual sobre SVG. Incluye uso en la web y manipulación a través del DOM con JavaScript.

SVG

Guía sobre todo lo referente a SVG.

SVG on the web — A Practical Guide

Guía práctica y rápida sobre SVG en la web. Al final recopila recursos y enlace útiles.

Advanced SVG

Completa guía sobre SVG y técnicas avanzadas de SVG. Incluye un apartado sprites, pinceladas sobre accesibilidad. Disponible en video.

Accesibilidad SVG

Accessible SVGs

Completa guía para accesibilidad SVG según el uso. Con ejemplos. Puede estar un poco desactualizada (última actualización 28 de agosto de 2016).

Tips for Creating Accessible SVG

Consejos para crear SVG accesibles. Puede estar un poco desactualizada (última actualización 6 de mayo de 2014). En su mayoría siguen siendo válidos como consejos generales básicos.

Using ARIA to enhance SVG accessibility

El soporte para la accesibilidad en SVG1.1 es limitado en navegadores y lectores de pantalla, aunque se puede mejorar utilizando WAI-ARIA. En SVG2 el soporte mejora, pero sigue siendo recomendable añadirlo por razones de retrocompatibilidad. Puede estar un poco desactualizada (última actualización 19 de diciembre de 2013), aunque las recomendaciones de ARIA siguen vigentes.

Volver arriba