Mise en oeuvre de SVGjs

 

 

 

 

ARTICLE IDLABS

Mise en œuvre de SVG.js

PÉRIODE 1

(2017-2018)

 

 

 

 

 

 

Sommaire


 

 

 

 

Introduction


 

SVG.js est une librairie JavaScript permettant de faire du dessin vectoriel sur le web en utilisant pour cela SVG.

 SVG est un langage basé sur XML qui permet de décrire des images vectorielles. Contraire aux images «matricielles» (tableaux de carrés colorés appelés pixels), les images vectorielles décrivent des lignes et des formes. On obtient donc une image qui a toujours l'air net, quelle que soit la résolution de l'écran ou l'agrandissement effectué sur l'image.

 

 

Afin d’utiliser SVG.js, l’unique prérequis est l’intégration de cette librairie dans votre page HTML. SVG.js n’a donc aucune dépendance et vise à être aussi petit que possible.

 

De plus, SVG.js est rapide. Évidemment pas aussi rapide que JavaScript vanilla, mais beaucoup plus rapide que la concurrence (par exemple RaphaëlJS). La syntaxe est facile à lire, épurée.

 

Par exemple, créer un simple carré rose nécessite beaucoup de code en JavaScript.

 

 

 

 

 

 

 

 

À gauche se situe le code en JavaScript et à droite en SVG.js. C’est juste deux lignes de code au lieu de dix.

 

SVG.js permet également de réaliser des animations en fonction de différents paramètres (taille, position, couleur…).

 

 

 

 

Installation


 

Il existe différentes méthodes pour installer SVG.js :

  • avec Bower, en utilisant la commande bower install svg.js

  • avec Node, en utilisant la commande npm install svg.js

  • en téléchargeant le fichier svg.js ou svg.min.js sur le site officiel

  • en important la librairie directement dans notre fichier

 

Pour cet article, nous utiliserons la dernière méthode, c’est-à-dire importer la librairie dans notre fichier HTML. Pour importer la librairie, il suffit de copier-coller ce lien «https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.js» entre les balises script.

 

 

Il se peut que de nouvelles versions soient disponibles depuis la création de cet article. Pour trouver ce lien par vous-même, il suffit d’aller ici et choisir la version que vous souhaitez.

 

 

 

 

Premier pas


 

Par défaut, SVG.js suppose que l’on a un élément HTML avec un attribut id créé et prêt à servir de conteneur, comme montré ci-dessous :

 

 

Ensuite, pour créer un élément SVG, il faut utiliser la fonction SVG() dans l’élément qui sera notre conteneur (tout ceci se fait dans un fichier JavaScript) :

 

 

Le premier argument peut être soit un identifiant de l'élément, soit l'élément sélectionné lui-même. Cela générera la sortie suivante :

 

 

Par défaut, le dessin svg suit les dimensions de son parent, dans ce cas #drawing vaut :

 

 

SVG.js fonctionne aussi en dehors du DOM HTML, dans un document SVG. Par exemple :

 

 

 

 

 

 

Les éléments SVG


 

SVG.Element est le prototype de base enveloppant tous les éléments (ou nœuds d'ailleurs) dans SVG.js. Un niveau supplémentaire de raffinement est ajouté avec SVG.Shape sur chaque élément pouvant prendre un attribut de fill et / ou de stroke. Ce niveau supplémentaire est ajouté sur certaines formes géométriques que nous verrons ci-dessous.

 

Le carré

 

Pour réaliser un carré, nous utiliserons la méthode rect() de SVG.js qui prend 2 arguments, une largeur et une hauteur. Premièrement, il faut cibler l’élément HTML dans lequel nous allons créer notre SVG, et lui allouer un espace sous forme de boxe grâce à la méthode size() qui prend également 2 arguments, une largeur et une hauteur. Par la suite, il suffit d’appeler la méthode rect() sur notre SVG créée juste avant, en lui passant la même taille en argument (la taille doit être impérativement inférieure à la dimension de notre boxe, sinon l’image ne sera affichée que partiellement). Cet élément peut être personnalisé grâce aux attributs SVG fill (remplissage) ou stroke (bordure en SVG).

 

 

Par exemple, ce code nous donnera le résultat suivant :

 

 

 

Le rectangle (bouton)

 

Pour la réalisation du rectangle, nous allons utiliser le même procédé que pour un carré, sauf que nous passerons une largeur et hauteur différente. De plus, nous allons voir l’utilisation des attributs stroke et fill plus précisément, en transformant le rectangle en bouton.

 

Notre bouton aura donc une couleur de fond avec des bordures arrondies de couleurs différentes. Pour utiliser plusieurs attributs sur un élément, il faut appeler la fonction attr() qui prendra en paramètre un tableau. Ce tableau contiendra l’attribut fill (couleur de fond), l’attribut stroke (couleur des bordures), l’attribut stroke-width (taille des bordures).

 

 

 

Nous pouvons constater un problème au niveau de la bordure supérieure et de la bordure de gauche. Enfaite, lors de sa création, notre élément est aligné sur le coin supérieur gauche de notre boxe. Dans notre cas, les bordures dépassent de la boxe draw4. Pour remédier à ce problème, nous devons déplacer notre bouton. Ceci est réalisable de 2 façons : soit en utilisant sur notre bouton la méthode move() qui prendra 2 paramètres (width, height), soit en utilisant la méthode x() qui déplace l’élément le long de l’axe des abscisses par son coin supérieur gauche et la méthode y() qui déplace l’élément le long de l’axe des ordonnées par son coin supérieur gauche.

 

Pour rendre les coins arrondis, il faut utiliser la méthode radius(). Cette méthode peut être utilisée par les cercles, les ellipses, et les rectangles.

 

Pour les rectangles, il est possible de passer deux arguments pour définir les attributs rx (radius sur l’axe des x) et ry (radius sur l’axe des y) individuellement. Ou, passer un seul argument pour rendre les deux attributs égaux.

 

 

 

 

 

 

 

 

Les liens

 

Il est possible d’ajouter un lien de redirection sur un élément avec la méthode link(). Si l’on veut ouvrir le lien dans un nouvel onglet, la méthode target() se chargera de créer l’attribut target.

 

 

 

Les polygones

 

L’élément polygone définit une forme fermée constituée d’un ensemble de segments de droite connectés. Cet élément peut être créé dans un autre élément SVG, par exemple un carré. Il faut utiliser la fonction polygon() avec comme paramètre une suite de points de coordonnées x et y.

 

 

 

 

Dans la méthode polygon(), le premier point se situera en coordonné x=0, y=100. Le deuxième point en x=50, y=50 et le troisième point en x=100, y=100. Et enfin, le premier et dernier point se rejoindront, ce qui forme un triangle sur notre exemple. Libre à vous de mettre autant de points que vous le souhaitez.

 

 

Les chemins (paths)

 

Les chemins SVG sont assez similaires aux polygones mais beaucoup plus complexes en matière de réalisation de courbe.

 

Les chemins et les points de contrôle forment une partie importante de l’univers SVG. SVG.js facilite la création de ces chemins, mais il est important d’apprendre comment le codage de base est effectué. Pour cela, on se référencera à la documentation SVG sur les chemins.

 

Premièrement, nous allons créer notre élément à l’aide de la méthode path() qui prendra en argument une suite de points de contrôle.

 

Pour l’exemple, nous allons rajouter une bordure, et une couleur de fond.

 

 

Dans la fonction path(), on peut bien observer une suite de points avec des lettres. Pour bien comprendre, détaillons ce schéma venant de la documentation SVG officiel.

 

 

La lettre M correspond à « moveto » qui établit un nouveau point de départ pour dessiner notre chemin. La lettre C permet de créer une courbe, et plus précisément une courbe de Bézier. M100,200 est notre point de départ situé donc en x:100, y200 (rond gris en bas à gauche). C100,100 correspond au rond gris rempli en haut à gauche, 100,400 correspond au rond gris rempli en haut à droite et 400,200 correspond au rond gris en bas à droite, mais également à la fin de notre chemin de points. Les ronds vides sont les points de départ et d’arrivée du chemin, alors que les ronds pleins sont les contrôleurs qui formeront une courbe d’un certain angle. Il existe d’autres lettres telles que Z qui correspond à « closeto » qui ferme un chemin et dessine une ligne automatiquement entre le point initial et le point d’arrivée.

 

 

 

 

 

 

 

 

 

 

Les dégradés (gradients)


 

Les dégradés créent des changements de couleur d’une couleur à l’autre dans une transition douce. Il existe deux types de dégradés : les dégradés linéaires et radiaux.

 

Les dégradés linéaires

 

Un dégradé linéaire est une progression linéaire de couleurs. Pour réaliser un dégradé linéaire, il faut utiliser la méthode gradient() qui prendra en premier argument le type souhaité (linéaire ou radial) et en deuxième argument une fonction.

 

Pour démontrer cela, nous allons personnaliser une ellipse. Une ellipse peut se créer avec SVG.js grâce à la fonction ellipse(). Par la suite, on initialise notre dégradé « linear » avec une fonction qui prendra une variable. Cette variable se chargera du positionnement des couleurs.

 

 

Ici, on utilise la fonction at() qui obligatoirement a besoin des paramètres offset et color, et optionnellement un argument affectant l’opacité. Offset est une variable entre 0 et 1 de type float, ou un pourcentage. Enfin, il faut appliquer le dégradé à l’élément avec la fonction fill() (la méthode fill() sera appelée sur l’instance du dégradé).

 

 

IL est possible de définir la direction du dégradé en fonction des positions x,y avec la fonction from() et to() from( LEFT , TOP ).to( RIGHT , BOTTOM )

 

 

 

 

 

 

 

 

 

 

 

Les dégradés radiaux

 

Un dégradé radial est une progression circulaire. Il existe les dégradés radiaux du type circulaire ou du type elliptique. Cette fois, la transition des couleurs se fera à partir du centre de l’élément.

 

Le procédé sera le même que pour un dégradé linéaire excepté que la méthode gradient() prendra comme premier argument « radial ».

 

 

Pour modifier la taille du dégradé radial, il faut utiliser la méthode radius() sur le dégradé.

 

 

 

 

 

 

 

 

 

 

Animations


 

L’animation d’éléments est très similaire à la manipulation d’éléments en utilisant la méthode attr(). La seule différence est qu’il faut inclure la méthode animate(). Cette méthode prend trois arguments. Le premier est duration, le second ease et le troisième delay. Tous ces arguments sont définis par défaut lors de l’appel de la fonction, il n’est donc pas nécessaire de les définir.

 

Notez que la méthode animate() ne retournera pas l’élément ciblé mais une instance de SVG.FX qui prendra les méthodes suivantes :

  • la méthode attr()

  • les méthodes x(), y() et move()

  • les méthodes cx(), cy() et center()

  • les méthodes de transformation rotate() et skew()

 

Le code ci-dessus créé un rectangle de 50 de largeur sur 100 de hauteur, dans une boxe de 500 sur 500. Nous avons affecté quelques animations à cet élément. On voit bien qu’aucun argument n’est passé à la méthode animate(), par défaut le temps d’exécution (la durée) d’une animation est à 1 seconde.

 

En premier, on change l’opacité du rectangle avec la méthode opacity(). Ensuite, on déplace le rectangle en x = 300 et y = 400, et ainsi de suite. Chacune de ces exécutions se fera en 1 seconde.

 

Il existe un tas d’autres méthodes pouvant contrôler les animations dont je vous invite à découvrir par vous-même sur la documentation officielle.

 

 

 

 

 

 

Références


 

  • SVG.js, Wout Fierens. SVG.js is released under the terms of the MIT licence. 2012 – 2017 (Documentation SVG.js).

  • W3C Recommendation. SVG 1.1 (Second Edition) – 16 Août 2011 (Documentation SVG officiel).

 

 

 

 

 

 

Auteur


 

 

Article écrit par Marciniak Marius, élève de 3ème année, dans le cadre de l’année scolaire à CampusID.

 

 

 

 

 

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *