Apprendre les bases du format SVG

Le 09/02/2017

Aujourd'hui, le BlogDuWebdesign vous propose le premier article de cette série ayant pour sujet les bases du format SVG.

Finalement, le SVG, c'est quoi ?

Il est 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.

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

Créer un SVG

Prenons l'exemple suivant et décortiquons le rapidement. La première ligne, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51 48"> est composée d'un attribut xmlns que nous laisserons toujours sur cette valeur et d'un attribut bien plus intéressant : viewBox.

Le viewbox d'un SVG correspond à 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 levée 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 trait (stroke), ainsi qu'un énigmatique attribut d. C'est cet attribut d qui contient les différentes opérations à 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 à la toute fin des instructions, qui correspond à "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 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

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 est-ce possible ? Grâce au CSS !

Comme vous pouvez le voir, nous avons ciblé notre élément 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 méthode pour changer l'attribut d, nous devrons faire cela en JavaScript.

Et les animations plus complexes ?

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 utilisé 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 notre prochain article sur l'apprentisage du format SVG !