Nous contacter

  1. Accueil
  2. Blog
  3. Webdesign
  4. Manipuler et créer des SVG plus simplement avec SVG.js

Manipuler et créer des SVG plus simplement avec SVG.js

Le 01/10/2018

Dans Webdesign

Aujourd'hui, le BlogDuWebdesign vous propose de découvrir une ressource pour simplifier l'usage des SVG, sobrement nommé SVG.js.

Svg.js

Manipuler et créer des SVG plus simplement avec SVG.js

Sur le web, si vous avez envie de faire des créations un peu plus dynamiques que ce que vous propose le HTML/CSS vous avez deux choix : le SVG et le Canvas, et comme vous vous en doutez nous allons nous intéresser au premier.

Si la gestion du SVG est bien plus simple à appréhender que la gestion de canvas (qui est totalement alien par rapport aux autres langages web), son API en javascript est clairement discutable. Heureusement, entre en scène SVG.js, une bibliothèque javascript qui vous simplifiera grandement la vie si vous avez à travailler avec du SVG en unifiant et standardisant l'API javascript pour le SVG.

Svg.js home

SVG.js propose des performances très proches des performances natives du couple SVG/JS et une documentation extrêmement claire, qui est sans aucun doute un des points forts de la ressource. Big-up à toute la partie animations, car c'est loin d'être un point du SVG simple à comprendre.

Enfin, sachez qu'il existe plusieurs plugins à ajouter à SVG.js permettant d'ajouter des fonctionnalités bien plus avancées que ce que propose normalement le simple SVG, comme la détection des points d'intersection entre plusieurs formes par exemple.

Plugin SVG.js

Pour aller plus loin, je vous propose de jeter un œil au code de ce clone de pong (très mou, il faut l'admettre) fait en Javascript avec SVG js.