Apprendre à manipuler le SVG

Actualisé le 5 septembre 2017 -

Un des éléments en plein boom dans le monde de l’intégration est bien le SVG, offrant pourtant une compatibilité très bonne même depuis un IE8, son utilisation est réellement poussée depuis quelques années. Parmi ses avantages, on peut parler à la fois des performances, de la compatibilité, des possibilités énormes en terme d’animation, mais aussi de possibilité de scalabilité (notamment pour le responsive), bref c’est un outil qui ne manque pas d’avantages. Le seul frein parfois à son utilisation, est sans doute sa complexité, alors tentons de simplifier tout cela au travers de cet article.

Utilisation du path

Le path est l’une des composantes possible du svg, celui-ci permet notamment de décrire des points qui se rejoignent pour former des lignes qui elles-mêmes subissent des transformations basées sur des axes décrits dans le path. Cela permet d’obtenir par exemple des courbes, des angles à différents degrés et bien plus encore.

Alors concrètement que veux dire ceci :

Décomposons tout cela, imaginez que vous deviez dire à un ami de dessiner sur feuille qui serait normée (avec des coordonnées comme sur un graphique) :

  • le M permettrait de lui dire : positionne ton stylo à la coordonnée x5 et y2 (donc par rapport au coin supérieur gauche de la zone svg)
  • le Q définit ensuite une courbe de bézier avec un seul point de contrôle en x2 y5 et une fin de la courbe au coordonnée x5 et y8

Donc si l’on reprend on a :

  • M x,y qui définit notre point de démarrage en coordonnée x,y
  • Q x1,y1 x2,y2 qui définit une courbe qui va de notre marqueur précédent jusqu’à x2 y2, tout en suivant un point de contrôle en x1 y1.

Pour matérialiser cela, voici un exemple tout simple (n’hésitez pas à jouer avec pour bien comprendre) :

See the Pen XjzLNY by meetjey (@meetjey) on CodePen.0

Aller on continue avec d’autres marqueurs :

Ici on rajoute la paramètre L, celui-ci dit, dessine une ligne droite qui va en coordonnée x5 y2.

Pour bien visualiser ce qu’il se passe, reprenons notre ami, à qui nous donnons quelques consignes :

  • pointe ton stylo en x5 y2
  • dessine une courbe qui va en x5 y8 en suivant un point de controle de bézier qui est en x2 y5
  • ensuite dessine un trait droit qui va en x5 y2

Ainsi il aura dessiné la forme correspondant à notre path, le tout sans jamais relâcher son stylo, le path est comme son nom l’indique un chemin.

Merci à l’article de CHRIS COYIER.

Commentaires

Laisser un commentaire