Cómo diseñar, codificar y animar SVG

Puede pensar en los gráficos vectoriales escalables (SVG) como gráficos receptivos. SVG es un formato basado en XML que le permite crear una imagen utilizando etiquetas y atributos definidos. Su código generará una imagen que puede editar directamente en su editor de código.

Aquí hay un ejemplo de SVG. Si observa su código, notará que está compuesto de etiquetas y atributos, al igual que un documento HTML. Todo está contenido dentro de la etiqueta . Primero, hay una etiqueta con trazos negros y relleno blanco. Y dentro de eso, hay una elipse (casi un círculo, pero observe los atributos ry y rx) que está llena de color rojo.

Podemos usar SVG en la web de dos maneras. Podemos usar los archivos SVG como el atributo src de las etiquetas . Por lo tanto, puede tener como lo haría con PNG y JPEG.

Pero, el caso más interesante (en caso de que haya notado que las etiquetas tienen un atributo de identificación como HTML) es que podemos pegar directamente la fuente del SVG en un

dentro de nuestro HTML. Luego podemos diseñar estos divs como bloques de construcción individuales, o incluso grupos de bloques de construcción, de la manera que queramos. Podemos aplicar CSS, animaciones o incluso agregar interactividad usando JavaScript. Esto es lo que hace que los SVG sean uno de los elementos más versátiles y populares en este momento en HTML.

Los SVG son infinitamente escalables, receptivos, tienen un tamaño de archivo más pequeño, son a prueba de futuro para pantallas densas de miles de millones de píxeles de la próxima generación y se pueden diseñar, animar e interactuar utilizando tecnologías web conocidas, a saber, CSS y JavaScript.

Tenga en cuenta que todas estas cosas anteriormente solo eran posibles con una inserción de Flash, lo que requería un reproductor flash y mucho trabajo especializado. Y no hay amor por Flash en estos días.

Imágenes vectoriales vs ráster

Las imágenes ráster están formadas por píxeles para formar una imagen completa. JPEG, GIF y PNG son tipos comunes de imágenes ráster. Casi todas las fotos encontradas en la web son imágenes rasterizadas.

Las imágenes ráster consisten en un número fijo de píxeles, por lo que no es posible cambiar su tamaño sin afectar su resolución. Es posible que haya notado que cambiar el tamaño de la mayoría de las imágenes les da un aspecto granulado y borroso. Eso se debe a su número fijo de píxeles.

Esto es lo que sucede cuando amplías una imagen ráster:

Las imágenes vectoriales, por otro lado, son flexibles e independientes de la resolución. Se construyen utilizando formas geométricas (líneas, rectángulos, curvas) o una secuencia de comandos. Puede editar sus atributos, como color, relleno y contorno.

Un uso común para las imágenes vectoriales son iconos y animaciones de iconos pequeños. Estos aparecerán nítidos, incluso en las pantallas de mayor densidad, como los próximos teléfonos inteligentes 4k.

Esto es lo que sucede cuando amplías una imagen vectorial:

Etiquetas SVG

La etiqueta incrusta un documento SVG dentro del documento actual, HTML, por ejemplo. La etiqueta tiene sus propias coordenadas x e y, altura y ancho, y su propia identificación única.

Así es como se vería una etiqueta :

La etiqueta agrupa los elementos y actúa como un contenedor para elementos gráficos relacionados. Un elemento puede incluso contener otros elementos anidados dentro de él.

Aquí hay un ejemplo de una etiqueta :

  background      

El elemento es una forma básica SVG que representa un rectángulo. El elemento puede tener varios atributos, como coordenadas, altura, ancho, color de relleno, color de trazo y esquinas agudas o redondeadas.

Aquí hay un ejemplo de una etiqueta :

El elemento le permite clonar y reutilizar los elementos gráficos SVG, incluidos otros elementos como y otros elementos .

Aquí hay un ejemplo de una etiqueta :

 negro    rojo    azul  

El elemento define una ruta de coordenadas para una forma. El código para la etiqueta de ruta puede parecer críptico, pero no se deje intimidar. El siguiente código de ejemplo se puede leer así:
1. “M150 o” - Mover a (150,0)

2. ”L75 200" - Dibuje una línea a (75,200) desde la última posición (que era (150,0)

3. "L255 200" - Dibuje una línea a (225,200) desde la última posición (que era (75,200)

4. “Z”: cierra el bucle (dibuja hasta el punto de inicio)

Probablemente no necesite aprender esto ya que el código de ruta se puede generar en cualquier editor SVG, pero es genial saberlo.

Aquí hay un ejemplo de una etiqueta :

  

Finalmente, el elemento define símbolos que son reutilizables. Estos símbolos solo se pueden representar cuando son llamados por el elemento .

Aquí hay un ejemplo de una etiqueta :

        

Crear SVG

Hay muchos editores SVG disponibles, como Adobe Illustrator e Inkscape, que es gratuito y de código abierto. Dado que los archivos SVG son XML de texto sin formato, también puede codificar manualmente uno en un apuro.

Para este ejemplo, usaré un editor en línea simple donde puede diseñar SVG sin tener que instalar nada.

  1. Primero crea un círculo

2. Luego agrega más círculos y guarda el código fuente

Animaciones CSS3

Los SVG se pueden animar agregando un id o una clase a la ruta SVG en el código y luego peinándolo en CSS3 como cualquier otro documento. A continuación se muestra un ejemplo de cómo se pueden animar los SVG.

La animación CSS3 ofrece una variedad de tipos de animación entre los que puede elegir. La animación de línea es otro atributo genial de SVG.

Para el siguiente ejemplo, escribí el texto "Hola, soy Surbhi" usando el lápiz en el editor. Luego usé los fotogramas clave CSS3 nuevamente para animar el trazo.

Tenga en cuenta que cada ruta tiene una identificación única. Esto se debe a que el retraso en la animación es importante cuando se anima un trazo con más de una palabra.

Las animaciones de etiqueta

es una etiqueta de animación integrada en el elemento SVG. Define cómo el atributo de un elemento cambia del valor inicial al valor final en la duración de la animación especificada. Esto se usa para animar propiedades que no pueden ser animadas solo por CSS.

Los elementos comunes de la etiqueta animada son color, movimiento y transformación.

La etiqueta animada está anidada dentro de la etiqueta de forma del objeto que debe ser animado. No funciona en las coordenadas de la ruta, sino solo dentro de las etiquetas de objeto. Observe el atributo aditivo. Significa que las animaciones no se anulan entre sí, sino que funcionan juntas al mismo tiempo.

Aquí hay un ejemplo de animación de un SVG usando la etiqueta animada HTML5:

Animaciones e interactividad basadas en JavaScript

Dado que SVG es solo un documento con etiquetas, también podemos usar JavaScript para interactuar con elementos individuales de los SVG al obtener sus selectores (id o clase).

Además de vanilla JS, hay varias bibliotecas de JavaScript disponibles para animar e interactuar con SVG como Vivus.js, Snap.svg, RaphaelJS y Velocity.js.

En el siguiente ejemplo, he usado la biblioteca Vivus.js junto con jQuery para lograr una animación de trazo de línea.

¿Por qué no usar SVG para todas las imágenes?

Los SVG son principalmente adecuados para imágenes que se pueden construir con pocas formas y fórmulas geométricas. Aunque, en principio, puede convertir cualquier cosa como su fotografía a SVG, el tamaño de la imagen sería de varios megabytes, lo que anula el propósito de ahorro de espacio del uso de SVG. Es mejor usar SVG para iconos, logotipos y pequeñas animaciones.

Aquí hay algo que creé mientras estaba aprendiendo sobre SVG, usando CSS y SVG, sin ninguna biblioteca. (¡No juzgues!) Https://github.com/surbhioberoi/surbhi.me

Publicado originalmente en surbhioberoi.com el 12 de julio de 2016.