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

Aujourd'hui, le BlogDuWebdesign vous propose le second article de cette série des techniques de l'intégrateur centrée sur le SVG. Au programme : création et manipulation de SVG !

Le SVG: Création et manipulation

Cet article est le troisieme 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 sujet du SVG a un gap de difficulté assez agressif (nous ne sommes pas face à dwarfs fortresses, mais avouons qu'il y a de quoi être intimidé ) 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. Allez donc y faire un tour si vous ne l'avez pas encore lu !

Ccomment créer un SVG complexe ?

La semaine dernière nous avons pu avoir un aperçu du langage SVG, à la fois simple et particulièrement fastidieux. Avec un langage comme ça, comment expliquer des créations aussi détaillées que la suivante ?

See the Pen SVG Animation by jjperezaguinaga (@jjperezaguinaga) on CodePen.

La réponse est simple : avec un logiciel dédié !

Nous avons vu la semaine dernière où les SVG sont des dessins vectoriels, et tous les logiciels permettant de créer des dessins vectoriels (ou presque) permettent de créer du SVG. Malheureusement, tous ne se valent pas au niveau du résultat que nous allons pouvoir récupérer.

Les outils pour créer des SVG

Commençons avec les outils en ligne permettant de faire du dessin vectoriel. Comme vous pourrez vous en rendre compte si vos faites une petite recherche, nous avons vraiment l'embarras du choix, mais il manque à la plupart une option pour moi essentielle : la possibilité de choisir l'ID et les classes des éléments que nous créons. En effet, comment animer ou même simplement cibler un element en CSS ou Javascript sans moyens de l'identifier ?

Avec cela en tete, je vous recommande Janvas, qui est gratuit et assez pratique malgré son interface un peu trop sobre.

Pour ce qui est des outils à installer, vous pouvez bien évidemment utiliser Adobe Illustrator, mais je ne vous le conseille pas si vous n'avez pas au moins Adobe CC 2015. Avant cela, les SVG générés ne sont vraiment pas assez propres pour être manipulé simplement.

Vous pouvez aussi utiliser Inkscape, qui malgré son interface assez basique est assez puissant pour couvrir la plupart de vos besoins. Notez qu'il est possible de créer son SVG depuis Illustrator, puis l'envoyé sur Inkscape pour ajouter des id aux éléments et groupes que vous souhaitez dynamiser.

Les SVG que nous obtenons à travers Inkscape peuvent être exportés de deux manières : sous la forme "Inkscape SVG" et "simple SVG". Une fois votre SVG termine, exportez-le toujours sous la forme simple SVG pour obtenir une version "propre" et simple à travailler.

Dans le cas contraire, vous obtiendrez un SVG avec de nombreux arguments et éléments qui ne nous serviront pas pour la dynamisation, comme vous pouvez le voir sur l'exemple suivant.

See the Pen Using Inkscape by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

Maintenant que tout est dit, allons-y pour notre premier exemple !

Exemple 1 : Responsive Cow Jumps Over the Moooooon par Sarah Drasner

Pour notre premier exemple, partons sur quelque chose de très simple : une illustration de lune, une illustration de vache, et un joli petit astronaute.

See the Pen Responsive Cow Jumps Over the Moooooon by Sarah Drasner (@sdras) on CodePen.

Je ne reviendrais pas sur les illustrations, la plupart d'entre vous sont bien plus competents sur ce point que moi. Notez tout de meme la syntaxe des groupes, ligne 4 : <g id="moon">.

Niveau CSS, nous sommes sur du très simples, quelques lignes pour gérer la responsive, et c'est tout.

Niveau Javascript, c'est un petit peu complexe mais c'est une complexité "externe" au SVG. Les 10 premières lignes sont de simples récupérations d'éléments, comme nous pourrions le faire en HTML. La suite est principalement l'utilisation de deux bibliothèques : GreenSock et Draggable (jQuery UI).

Notez aussi ligne 36, la petite fonction permettant de tester la position de la vache, pour pouvoir afficher ou non l'effet de surprise (compréhensible) sur notre petit astronaute, grace à updateBounds().

La semaine prochaine

Nous avons enfin fini la mise en place des connaissances nécessaires à l'utilisation de graphiques SVG ! Comme vous pouvez le voir, je n'avais pas menti en disant que le cout d'entree dans cette technique est assez lourd. Néanmoins, sachez que vous avez fait le plus dur ! Dans l'ensemble cette technique est bien plus simple que l'illustration CSS.

Avec ce que vous avez déjà vu ici, vous êtes tous à faire prêt à illustrer et animer n'importe quel SVG (tant que vous avec les connaissances en graphisme, Javascript et CSS nécessaire, cela va de soi).

La semaine prochaine, nous allons aborder un des points les plus utile du SVG : son utilisation dans le veb responsive !