• A la une
  • Catégories
  • Dossiers
  • +

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

par Benjamin SANCHEZle 16/02/2017

Second article de la semaine traitant du SVG sur le BlogDuWebdesign. Au programme : Responsive !

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.

Étant donné que le SVG est un sujet assez difficile d'accès, j'ai fait un article la semaine dernière permettant de faire un tour d'horizon des bases Techniques pour intégrateurs : Le SVG sous toutes tes formes #2

Si vous n'avez pas suffisamment de connaissances sur le sujet pour pouvoir lire et comprendre des balises SVG, je vous conseille de le lire avant de revenir finir 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.

See the Pen Responsive SVG by Mike (@MadeByMike) on CodePen.

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.

See the Pen Responsive SVG by Mike : the svg file by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

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 complete, je vous propose cette page du MDN.

 

Je ne reviendrais pas sur les différents éléments qui le compose, je vous les ai mis en couleur pour vous permettre de les identifier, et l'article Techniques pour intégrateurs : Le SVG sous toutes tes formes #2 a déjà traité le sujet. N'hésite pas à changer de nouveau la couleur des éléments que vous ne comprenez pas pour mieux les identifier !

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 element intéressant est à retrouver ligne 46 : mask.

Mask est un element qui, comme son nom l'indique, sert à créer des masques permettant de choisir des portions d'un autre element à 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'element Mask n'a pas de viewBox. À la place, il utilise les dimensions de l'element 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'element 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 element. Sachez que la propriété css transform: scale() fonctionne exactement de la même manière !

Inserer du CSS dans un SVG ?

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ésent 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 particulierement interessante mais malheureusement bien trop peu presente, la plupart des SVG ayant besoin d'une feuille de style supplementaire pour gerer ses passage en responsive ou ses animations, comme le suivant par exemple.

See the Pen Responsive SVG Sprite Animation that Adjusts Based on Viewport by Sarah Drasner (@sdras) on CodePen.

 

  • Partager l'article en 1 clic !

    N'hésitez pas à aider le BlogDuWebdesign
Avatar_thumbAuteur : Benjamin voir son blog

Développeur autodidacte depuis quelques années, déjà, je suis le développeur du blog du webdesign, où mon rôle est de concretiser les différentes idées et maquettes.

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte
twitter birdtwitter birdtwitter birdtwitter birdtwitter bird
twitter bird
Ouvrir