Pourquoi utiliser des images SVG: comment animer vos SVG et les rendre ultra-rapides

Pourquoi utilisons-nous SVG?

Le secteur du développement Web se développe à un rythme rapide et les images SVG (graphiques vectoriels évolutifs) sont de plus en plus populaires. En tant qu'images vectorielles, les SVG sont composés d'équations mathématiques qui définissent le positionnement et la couleur des lignes et des courbes qui composent les formes graphiques et le texte au format XML. Les SVG sont utilisés pour les icônes, les logos, les conceptions graphiques et les polices.

L'utilisation des SVG est un choix facile une fois que vous considérez les avantages qu'ils offrent. Pour un client, vous obtenez une qualité exceptionnelle sur n'importe quel appareil. Pour nous en tant que développeurs, il y a encore plus de raisons d'utiliser SVG.

Discutons maintenant de certains des avantages de SVG.

1. Format basé sur du texte

Les éléments SVG contiennent du texte, ce qui améliore considérablement l'accessibilité d'un site Web. Mais le principal avantage est que ce texte est indexé par les moteurs de recherche. Et un utilisateur peut trouver un fichier SVG via Google.

2. Évolutivité

La qualité des images SVG ne dépend pas de la résolution. Contrairement aux images d'autres formats ou polices d'icônes, les SVG sont parfaitement nets sur n'importe quel appareil avec n'importe quelle taille d'écran. L'évolutivité signifie également que si vous utilisez la même image sur tout le site Web mais dans des tailles différentes, vous utilisez un seul SVG. Il n'est pas nécessaire d'en créer plusieurs copies comme dans le cas du PNG. Au lieu de cela, vous incorporez la même image et définissez la taille de celle-ci directement dans le code SVG.

Évolutivité

3. Haute performance

Si vous donnez la priorité aux performances, vous devez utiliser SVG. Avec SVG, il n'est pas nécessaire de charger une requête HTTP dans un fichier image. La page se charge plus rapidement car elle n'a aucun fichier à télécharger. Un temps de chargement plus rapide se traduit par de meilleures performances de la page Web et un meilleur classement des moteurs de recherche. À son tour, cela améliore l'expérience utilisateur.

4. Petite taille de fichier

La taille des fichiers SVG simples est définie par les couleurs, les calques, les dégradés, les effets et les masques qu'ils contiennent. La taille d'un fichier PNG ou de tout autre fichier graphique raster est définie par le nombre de pixels qui le composent. Plus une image PNG est grande, plus sa taille est lourde. Ce n'est cependant pas le cas des icônes SVG. En outre, les SVG peuvent être optimisés, et je vous dirai comment plus tard dans cet article.

Taille du fichier SVG

5. Nombreuses possibilités d'édition et d'animation

Contrairement aux images raster, les images vectorielles peuvent être modifiées à la fois dans des programmes de dessin vectoriel spéciaux et directement dans un éditeur de texte. Vous pouvez également modifier les couleurs ou les tailles des icônes SVG directement via CSS. Quant à l'animation de SVG, elle peut être effectuée à l'aide de SMIL, de l'API Web Animations, de WebGL ou de l'animation CSS. Faites défiler vers le bas pour en savoir plus sur l'animation CSS des images SVG.

6. Intégration avec HTML, XHTML et CSS

SVG a été conçu «pour s'intégrer et étendre d'autres technologies de plate-forme Web ouverte de premier plan, telles que X / HTML, CSS et Javascript», selon le W3C. Ainsi, contrairement aux différents formats d'image, ce format peut être facilement intégré à d'autres documents et technologies.

7. Prise en charge du modèle d'objet de document W3C

La communauté soutient de plus en plus SVG. Le World Wide Web Consortium (W3C) a toujours affirmé qu'Internet ne pouvait pas se passer d'images vectorielles. Cette organisation a essentiellement créé le format SVG et le soutient activement de nos jours.

Quels sont les inconvénients du SVG?

Le grand nombre de petites pièces rend l'utilisation du format SVG irrationnelle. Plus une image est composée de parties, plus elle grossit.

Par exemple, voici deux cartes SVG des États-Unis. Le second est légèrement plus détaillé que le premier. Mais le niveau de détail supérieur a coûté près de cinq fois plus de taille de fichier - 33 Ko par rapport à 147 Ko. Si cette carte n'était pas monochromatique, l'augmentation serait beaucoup plus importante.

Cartes SVG

Si l'image est linéaire et contient quelques couleurs, SVG est une solution. Cependant, si les détails comptent et qu'il y en a beaucoup, PNG ou JPEG peuvent être plus appropriés.

Notez également que SVG ne peut pas être utilisé pour les photographies. Si vous utilisez une photographie sur votre site Web, SVG n'est pas la meilleure option. Vous devriez certainement opter pour un format d'image raster.

Comment optimiser les images SVG

Lors du rendu d'un format vectoriel, nous devons écrire du code SVG supplémentaire. Le résultat final doit être optimisé en utilisant différents services. Le plus souvent, pour optimiser SVG, j'utilise un outil Node.js SVGO. Il est assez facile à utiliser et il n'est pas nécessaire de télécharger les images sur d'autres sites Web.

Exemple d'optimisation SVG avec SVGO

Comment animer SVG

Les graphiques SVG sur le Web peuvent être animés de plusieurs manières:

  1. SMIL, qui est la spécification d'animation SVG native
  2. Web Animations API, qui est une API JavaScript native vous permettant de créer des animations séquentielles plus complexes sans charger de scripts externes
  3. WebGL
  4. Animation CSS

Considérons le dernier.

L'animation CSS est utilisée afin d'éviter de surcharger votre service avec de grandes bibliothèques pour animer les icônes et les chargeurs.

Pour voir l'exemple de SVG, vérifiez le jaune animé, dont la conception graphique a été initialement dessinée dans Sketch.

Gif SVG

Comme vous pouvez le voir ici, j'utilise la syntaxe d'animation d'images clés pour l'animation. Il est implémenté en définissant la position initiale d'un élément par id (0%), transition (50%) et position finale (100%). Pour obtenir une animation fluide, les valeurs initiales et finales sont égales.

Voici quelques avantages de l'utilisation de l'approche CSS de l'animation SVG:

  1. Vous n'avez pas besoin d'une bibliothèque externe.
  2. Les préprocesseurs (comme Sass ou Less) vous permettent de créer des variables.
  3. Vous pouvez utiliser onAnimationEnd et d'autres hooks d'animation avec JavaScript natif.
  4. Cette approche est facile à utiliser pour le développement de conception Web réactive, car vous pouvez modifier votre animation avec des requêtes multimédias.

Les inconvénients de l'utilisation de l'animation CSS sont les suivants:

  1. Vous ne pouvez pas produire d'effets physiques complexes, ce qui rendrait l'animation plus réaliste.
  2. De nombreux recalculs doivent être effectués si vous ajustez la synchronisation.
  3. Les graphiques CSS et SVG sur mobile nécessitent parfois des hacks étranges.

Par exemple

Néanmoins, nous pouvons réaliser des projets intéressants à l'aide d'une animation CSS simple et triviale. Par exemple, j'ai réalisé une vidéo de jeu simple en utilisant HTML, CSS et un peu de JavaScript. Tous les SVG ont été dessinés dans Sketch. L'objectif de ce jeu est de sauver la princesse. Dans toutes les situations, il suffit de cliquer. Vous pouvez trouver le projet sur mon GitHub.

Envelopper

Les SVG sont un excellent format d'image pour aller avec. Ils sont évolutifs, légers, basés sur du texte et efficaces. Ils sont faciles à éditer, animer et intégrer. Surtout, ils sont pris en charge par presque tous les navigateurs sauf Internet Explorer 8 et Android 2.3.

Bien qu'apprendre à travailler avec des images graphiques vectorielles évolutives puisse vous prendre un certain temps, c'est un investissement qui sera rentable compte tenu des avantages du SVG.

Vous avez une idée de projet logiciel?

Mon entreprise KeenEthics est une équipe de développeurs d'applications Web expérimentés. Si vous avez besoin d'une estimation gratuite d'un projet similaire, n'hésitez pas à nous contacter .

Vous pouvez lire plus d'articles similaires sur mon blog Keen. Permettez-moi de vous suggérer de lire La valeur des tests utilisateur ou 7 cas où vous ne devriez pas utiliser Docker.

PS

Aussi, je voudrais dire "merci" à Maryna Yanul pour avoir co-écrit cet article ainsi que les lecteurs pour l'avoir fait jusqu'au bout!

L'article original publié sur le blog KeenEthics se trouve ici: Une nouvelle perspective sur pourquoi, quand et comment utiliser SVG.