Utiliser le format SVG en responsive design

Dans le paysage du web design responsive, le format SVG (Scalable Vector Graphics) s'impose comme un outil incontournable pour les intégrateurs souhaitant créer des interfaces adaptatives et performantes. Grâce à sa nature vectorielle, le SVG offre une qualité d'affichage irréprochable sur tous les types d'écrans, des smartphones aux écrans 4K, sans perte de résolution. De plus, il permet une flexibilité remarquable en matière de design et d'interactivité, tout en assurant des temps de chargement optimisés.

Exemple de responsive SVG by Mike

Ce pen n'est peut-être pas très impressionnant de prime abord, mais il a radicalement changé ma façon de voir le responsive SVG, et je pense qu'il en sera de même pour vous.

Comme vous pouvez le voir, nous sommes sur quelque chose en apparence très simple, un petit bout de code très ingénieux pour pouvoir tester du responsive dans un pen et une image chargeant un fichier SVG. Fichier qui, comme vous pouvez le voir, adapte son design à sa taille ! Je ne m'étendrai pas plus sur la partie CSS/HTML, passons tout de suite au fichier SVG, que vous pourrez retrouver à cette adresse ou dans le pen suivant. 

Passons rapidement sur le haut du fichier, nous y reviendrons plus tard, et attaquons-nous à la ligne 20 : <symbol id="corner" viewBox="0 0 50 50">

Les balises symboles permettent de créer des éléments réutilisables dans la suite de notre code SVG, un peu comme des fonctions, ou des mixins Sass. Vous pouvez voir au passage qu'elle possède son propre viewbox indépendant. Pour une documentation complète, je vous propose cette page du MDN.

Note : vous ne voyez pas de bleu, vert et rouge en meme temps sur l'image ? C'est tout à fait normal. Essayez de jouer sur la taille de votre fenêtre pour repérer ces éléments !

Un autre élément intéressant est à retrouver ligne 46 : mask.

Mask est un élément qui, comme son nom l'indique, sert à créer des masques permettant de choisir des portions d'un autre élément à afficher ou masquer, les parties blanches signifiant qu'il faut afficher, et les parties noires masquer. Notez qu'il est possible d'utiliser des nuances de gris pour ajouter plus ou moins d'alpha.

Astuce : comme vous pouvez le voir, l'élément Mask n'a pas de viewBox. À la place, il utilise les dimensions de l'élément sur lequel il est applique.

Maintenant que l'auteur a déclaré tous les éléments de son SVG responsive, il ne lui reste plus qu'a les assembler, et c'est ce que vous pouvez voir à partir de la ligne 62. L'élément rect est le trait, auquel est applique notre #mask. Les autres éléments sont nos deux coins et notre diamant au milieu de la ligne. Notez la transformation scale négative appliquée au deuxième corner pour le retourner !

Astuce : il est possible d'utiliser scale couplée à une valeur négative pour "retourner" un élément. Sachez que la propriété css transform: scale() fonctionne exactement de la même manière !

Maintenant que nous avons fait le tour des balises et techniques utilisées pour créer ce SVG responsive, attaquons-nous au clou du spectacle ! Vous pouvez noter de la ligne 3 à la ligne 18 que nous avons du CSS dans notre balise SVG pour gérer les changements d'aspects de nos corners en fonction de la taille du SVG.

L'insertion de CSS directement dans le SVG est loin d'être un hack : cette technique est supportée depuis IE9, et est présente dans les spécifications. Pour plus d'informations, vous pouvez lire cette page du MDN.

Notez bien sur que le CSS présent dans le SVG responsive ne peut pas impacter la page dans laquelle l'image est chargée, ce qui nous permet d'encapsuler notre CSS. De plus, le fait de mettre le code correspondant à l'image svg DANS l'image fait qu'il est tout simplement impossible de l'oublier lors de l'utilisation de l'image.

Cette technique est particulièrement intéressante mais malheureusement bien trop peu présente, la plupart des SVG responsive ayant besoin d'une feuille de style supplémentaire pour gérer ses passages en responsive ou ses animations, comme le suivant par exemple.