Por qué debería usar imágenes SVG: cómo animar sus SVG y hacerlos ultrarrápidos

¿Por qué usamos SVG?

El sector del desarrollo web está creciendo a un ritmo rápido y las imágenes SVG (gráficos vectoriales escalables) son cada vez más populares. Como imágenes vectoriales, los SVG se componen de ecuaciones matemáticas que definen el posicionamiento y el color de las líneas y curvas que componen las formas gráficas y el texto en formato XML. Los SVG se utilizan para iconos, logotipos, diseños gráficos y fuentes.

Usar SVG es una opción fácil una vez que considera las ventajas que ofrecen. Para un cliente, obtienes una calidad excelente en cualquier dispositivo. Para nosotros, como desarrolladores, existen aún más razones para usar SVG.

Analicemos ahora algunos de los beneficios de SVG.

1. Formato basado en texto

Los elementos SVG contienen texto, lo que mejora enormemente la accesibilidad de un sitio web. Pero la principal ventaja es que este texto está indexado por motores de búsqueda. Y un usuario puede encontrar un archivo SVG a través de Google.

2. Escalabilidad

La calidad de las imágenes SVG no depende de la resolución. A diferencia de las imágenes de otros formatos o fuentes de iconos, los SVG se ven perfectamente nítidos en cualquier dispositivo con cualquier tamaño de pantalla. La escalabilidad también significa que si usa la misma imagen en todo el sitio web pero en diferentes tamaños, usa un solo SVG. No es necesario crear varias copias como en el caso de PNG. En su lugar, inserta la misma imagen y define su tamaño directamente en el código SVG.

Escalabilidad

3. Alto rendimiento

Si prioriza el rendimiento, debe usar SVG. Con SVG, no es necesario que se cargue una solicitud HTTP en un archivo de imagen. La página se carga más rápido ya que no tiene archivos para descargar. Un tiempo de carga más rápido se traduce en un mejor rendimiento de la página web y una clasificación más alta en los motores de búsqueda. A su vez, mejora la experiencia del usuario.

4. Tamaño de archivo pequeño

El tamaño de los archivos SVG simples se define por los colores, capas, degradados, efectos y máscaras que contiene. El tamaño de un archivo PNG o cualquier otro archivo de gráficos rasterizados se define por el número de píxeles que lo componen. Cuanto más grande es una imagen PNG, más pesada se vuelve. Sin embargo, este no es el caso de los iconos SVG. Además, los SVG se pueden optimizar, y diré cómo más adelante en este artículo.

Tamaño de archivo SVG

5. Numerosas oportunidades de edición y animación

A diferencia de las imágenes rasterizadas, las imágenes vectoriales se pueden editar tanto en programas especiales de dibujo vectorial como directamente en un editor de texto. También puede editar colores o tamaños de iconos SVG directamente a través de CSS. En cuanto a la animación de SVG, se puede hacer con la ayuda de SMIL, Web Animations API, WebGL o animación CSS. Desplácese hacia abajo para obtener más información sobre la animación CSS de imágenes SVG.

6. Integración con HTML, XHTML y CSS

SVG fue diseñado "para integrarse y ampliar otras tecnologías de plataforma Web abierta destacadas, como X / HTML, CSS y Javascript", según W3C. Entonces, a diferencia de los diferentes formatos de imagen, este formato se puede integrar fácilmente con otros documentos y tecnologías.

7. Compatibilidad con el modelo de objetos de documento del W3C

Existe un creciente apoyo de la comunidad para SVG. El World Wide Web Consortium (W3C) siempre ha afirmado que Internet no puede prescindir de imágenes vectoriales. Esta organización básicamente creó el formato SVG y lo apoyan activamente hoy en día.

¿Cuáles son los inconvenientes de SVG?

La gran cantidad de piezas pequeñas hace que el uso del formato SVG sea irracional. Cuantas más partes contenga una imagen, más pesada aumentará de tamaño.

Por ejemplo, aquí hay dos mapas SVG de Estados Unidos. El segundo es un poco más detallado que el primero. Pero el mayor nivel de detalle costó casi cinco veces el tamaño del archivo: 33 KB en comparación con 147 KB. Si este mapa no fuera monocromático, el aumento sería mucho mayor.

Mapas SVG

Si la imagen es lineal y contiene algunos colores, SVG es una solución. Sin embargo, si los detalles son importantes y hay muchos, PNG o JPEG pueden ser más adecuados.

También tenga en cuenta que SVG no se puede utilizar para fotografías. Si usa una fotografía en su sitio web, SVG no es la mejor opción. Definitivamente deberías ir con un formato de imagen rasterizada.

Cómo optimizar imágenes SVG

Al renderizar un formato vectorial, tenemos que escribir un código SVG adicional. El resultado final debe optimizarse utilizando diferentes servicios. La mayoría de las veces, para optimizar SVG, utilizo una herramienta Node.js SVGO. Es bastante fácil de usar y no es necesario cargar las imágenes en otros sitios web.

Ejemplo de optimización de SVG usando SVGO

Cómo animar SVG

Los gráficos SVG en la web se pueden animar de varias formas:

  1. SMIL, que es la especificación de animación SVG nativa
  2. API de animaciones web, que es una API de JavaScript nativa que le permite crear animaciones secuenciales más complejas sin cargar ningún script externo
  3. WebGL
  4. Animación CSS

Consideremos el último.

La animación CSS se utiliza para evitar sobrecargar su servicio con grandes bibliotecas para animar iconos y cargadores.

Para ver el ejemplo de SVG, consulte la yema animada, cuyo diseño gráfico se dibujó inicialmente en Sketch.

GIF de SVG

Como puede ver aquí, uso la sintaxis de animación de fotogramas clave para la animación. Se implementa estableciendo la posición inicial de un elemento por id (0%), transición (50%) y posición final (100%). Para lograr una animación suave, los valores iniciales y finales son iguales.

Estos son algunos de los beneficios de usar el enfoque CSS para la animación SVG:

  1. No necesita una biblioteca externa.
  2. Los preprocesadores (como Sass o Less) le permiten crear variables.
  3. Puede usar onAnimationEnd y algunos otros ganchos de animación con JavaScript nativo.
  4. Este enfoque es fácil de usar para el desarrollo de diseño web receptivo porque puede modificar su animación con consultas de medios.

Las desventajas de usar la animación CSS son las siguientes:

  1. No puede producir algunos efectos físicos complejos, lo que haría que la animación sea más realista.
  2. Es necesario volver a calcular mucho si ajusta el tiempo.
  3. Los gráficos CSS y SVG en dispositivos móviles a veces requieren trucos extraños.

Por ejemplo

Aún así, podemos hacer algunos proyectos interesantes con la ayuda de una animación CSS simple y trivial. Por ejemplo, hice un video de juego simple usando HTML, CSS y un poco de JavaScript. Todos los SVG se dibujaron en Sketch. El objetivo de este juego es salvar a la princesa. En cualquier situación, simplemente haga clic. Puedes encontrar el proyecto en mi GitHub.

Para concluir

Los SVG son un gran formato de imagen para combinar. Son escalables, livianos, basados ​​en texto y eficientes. Son fáciles de editar, animar e integrar. Es importante destacar que son compatibles con casi cualquier navegador excepto Internet Explorer 8 y Android 2.3.

Si bien aprender a trabajar con imágenes de gráficos vectoriales escalables puede llevarle algún tiempo, es una inversión que valdrá la pena considerando los beneficios de SVG.

¿Tiene una idea para un proyecto de software?

Mi empresa, KeenEthics, es un equipo de desarrolladores de aplicaciones web con experiencia. En caso de que necesite un presupuesto gratuito de un proyecto similar, no dude en ponerse en contacto .

Puedes leer más artículos similares en mi Blog Keen. Permítame sugerirle que lea El valor de las pruebas de usuario o 7 casos en los que no debe usar Docker.

PD

Además, me gustaría decir "gracias" a Maryna Yanul por ser la coautora de este artículo, así como a los lectores por llegar al final.

El artículo original publicado en el blog de KeenEthics se puede encontrar aquí: Una nueva perspectiva sobre por qué, cuándo y cómo usar SVG.