Techniques pour intégrateurs : Le SVG sous toutes tes formes #2

Aujourd'hui, le BlogDuWebdesign vous propose le premier article de cette série des techniques de l'intégrateur centrée sur le SVG.

Illustrations animées en CSS : les bases

Cet article est la suite de l'article Inspirations et techniques pour intégrateurs : Le SVG sous toutes tes formes #1. Si vous ne l'avez pas lu, allez donc y faire un petit tour avant la fin de continuer cet article.

Étant donné que le sujet du SVG a un gap de difficulté très agressif dès le départ, nous allons faire une petite exception pour février et ajouter un article. L'article d'aujourd'hui est donc ça pour expliquer les bases les plus simples du SVG, et nous nous retrouverons exceptionnellement mardi pour analyser notre premier exemple.

Finalement, le SVG, c'est quoi ?

Je ne sais pas si ce paragraphe servira à beaucoup d'entre vous, mais je pense important de commencer par une petite remise en contexte sur ce sujet finalement plus complexe et moins democratisé qu'on pourrait le croire.

Le SVG (Scalable Vector Graphics) est un format de fichier ainsi qu'un langage permettant de faire du dessin vectoriel pour le web. Comme le HTML et le CSS, il est fait par le W3C et est entièrement  intercompatible avec ces derniers, que ce soit sous sa forme "langage" ou sa forme "fichiers". Pour illustrer cela, prenons l'exemple suivant.

See the Pen SVG logo : img and svg by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

Sur cet exemple, le logo cercle du bleu et une balise image qui pointe sur le fichier SVG originel, le logo cercle de rouge et une balise <svg> contenant du code et comme vous pouvez le voir, il n'y a aucune différence de rendu ou de traitement.
Maintenant, cliquez donc sur le logo bleu, et affichez le code source de l'image en SVG : C'est le même que celui-ci inséré dans le HTML !

À retenir : svg est un langage basé sur XML, donc très proche du HTML, qui permet de créer des dessins vectoriels pour le web. Il est possible d'écrire du SVG directement dans sa page web, ou de le ranger dans un fichier .svg que l'on utilisera ensuite comme source d'une image ou d'un background en CSS.

Exemple 0 : Very simple SVG by Benjamin SANCHEZ

Une fois n'est pas coutume, notre premier exemple ne sera aucun de la liste des 20 de la semaine dernière. Pourquoi ? Car ils sont tous bien trop compliqué pour un premier exemple ! Je vous ai donc prépare un petit SVG tout simple qui nous servira d'exemple.

See the Pen Very simple SVG by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

Créer un SVG

Prenons l'exemple suivant et decortiquons le rapidement. La premiere ligne, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51 48">, se compose d'un attribut xmlns que nous laisserons toujours sur cette valeur et d'un attribut bien plus interessant : viewBox.

Le viewbox d'un SVG est à voir comme la taille de la "zone de dessin". Toutes les valeurs de positions relatives dans les éléments et traces du SVG le seront par rapport à elle, et c'est aussi la taille par défaut de notre SVG.

La ligne suivante, sans surprise, est le titre de notre SVG.

Enfin, nous arrivons à la première (et seule) ligne de dessin de notre SVG : <path id="star" fill="#000" stroke="#FFF" d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"/>

La balise path doit être vu comme une sorte de dessin à main levee sur la surface de dessin, où nous allons relier chaque point spécifié par des lignes droites. Il existe de nombreuses balises permettant de dessiner différentes formes en SVG, mais path est la plus souple et complexe d'entre elles.

Si nous décomposons cette balise, nous retrouvons un attribut id, une couleur de remplissage (fill) et une couleur de traits (stroke), ainsi qu'un énigmatique attribut d. C'est cet attribut d qui contient les differentes operations a faire pour obtenir la forme.

m25,1 par exemple signifie "déplace le pinceau 25px vers le bas et 1 pixel vers la droite, sans dessiner".

l-14,11 en revanche signifie "trace un trait vers un point situé 14 pixels vers le haut (-14) et 11 pixels vers la droite".

Enfin, notez le z a la toute fin des instructions, qui correspond a "fin du dessin, clos le trace et remplis la forme".

Pour plus d'informations ainsi qu'une liste précise de toutes les opérations, je vous conseille la lecture de la page sobrement intitulée d, du MDN. Je vous encourage à essayer de comprendre toutes les instructions de cette forme, et pourquoi pas la simplifier !

Intercompatibilité entre le CSS et le SVG

See the Pen Very simple SVG by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

Reprenons notre exemple. Comme vous pouvez le voir, l'étoile peut maintenant changer de couleur au survol, alors que le SVG n'a strictement pas changé. Comment ? Grace au CSS !

Comme vous pouvez le voir, nous avons ciblé notre element path comme n'importe quel élément HTML, et nous avons changé ses valeurs fill et stroke. Résultat garanti.

Malheureusement, nous ne pouvons pas appliquer cette methode pour changer l'attribut d, nous devrons faire cela en Javascript.

Et les animations plus complexes ?

Maintenant que vous avez vu la technique employee pour créer un SVG, vous vous dites probablement que les gens pouvant obtenir des résultats comme l'exemple suivant est vraiment extrêmement patient.

See the Pen Day 08 – Polar Night  by @mge_de by Michael Gehrmann (@g12n) on CodePen.

C'est vrai dans un sens, mais je dois voit avouer que ce pen par exemple n'a certainement pas été fait de cette manière ! Je pense que notre auteur a probablement utilise un logiciel de dessin vectoriel comme Adobe illustrator pour créer son fichier SVG.

Si cela vous intéresse, je vous donne rendez-vous mardi prochain pour enfin attaquer notre exemple 1 des techniques SVG !