Techniques pour intégrateurs : Le SVG pour responsive design

S'aider du SVG pour les problemes de responsive

Cet article est le quatrième d'une série initiée avec 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.

Exemple 2 : 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 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 simples, un petit bout de code très ingénieux pour pouvoir tester du responsif 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, 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, 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, je vous propose cette page du MDN.

Notez bien sur que le CSS présent dans le SVG ne peut pas impacter la page dans laquelle l'image est charge, 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.

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