Créer un SVG avec Adobe Illustrator

articleSVG-creer

Le mois dernier, Morgan vous a fait découvrir le SVG au travers d’un outil étonnant du nom de Lazy Line Painter, permettant d’animer vos tracés via du JavaScript.

Aujourd’hui je vous propose de créer simplement un SVG via Adobe Illustrator. Dans un deuxième temps, nous verrons comment nous organiser pour jouer avec les possibilités de Lazy Line Painter.

Rappel : Basé sur le standard XML, le SVG est un format de données permettant de décrire des ensembles de graphiques vectoriels. Concrètement, un fichier SVG contient l’ensemble des coordonnées et vecteurs représentant un graphique. L’intérêt de ce format est qu’à la différence d’une image classique, le redimensionnement d’une image SVG ne génère pas de perte de qualité liée à l’extrapolation puisque toutes les coordonnées des points sont recalculées sur la base des vecteurs stockés.

Article : Le live drawing en SVG par Morgan Fabre 

Atelier création

Avant de commencer, sachez qu’il n’est pas obligatoire de créer vous-même vos propres formes pour pouvoir exporter en SVG. En effet, à partir du moment où votre travail est en vectoriel, peu importe sa provenance cela n’a aucune incidence sur le résultat final.

Si pour X raison vous ne souhaitez QUE exporter votre dessin vectoriel en SVG, rien de plus simple :

Rendez-vous dans le menu contextuel : Fichier > Enregistrer sous > SVG (svg)

Capture d'ecran pour enregistrer en SVG

Une fenêtre modale apparaît, prenez soin de sélectionner le bon type de police dans la liste déroulante : “SVG” pour maximiser la compatibilité cross-browser.

Capture d'ecran - Option d'exportation SVG

Mes premiers tracés vectoriels

Important : En amont du travail de conception, pensez à organiser votre travail par rapport à la façon dont vous allez ensuite vous servir de votre SVG. Pour reprendre l’exemple de Lazy Line Painter, il n’est pas insensible à la disposition des calques. De fait, cela aura une incidence cruciale sur le rendu de l’animation finale.

 

Nous allons donc commencer par créer un nouveau document, peu importe la taille, c’est du vectoriel (et le vectoriel = vecteurs) ce qui vous permettra d’agrandir votre image sans aucune perte d’information, c’est ça la magie des images vectorielles :D

Nous allons reprendre notre logo Netmacom, basé sur la police Lobster, et le retracer via l’outil plume.

On commence par importer notre logo sur un calque qui servira de base sur lequel nous construirons nos tracés :

Logo de base isolé sur un calque

On verrouille Icone Illustrator - Verrouillage ce calque de modèle et on en rajoute un autre Icone Illustrator - Nouveau calque pour commencer nos premiers tracés. On sélectionne l’outil plume d’Illustrator Icone Illustrator - Outil plume (raccourci clavier : P) et on place notre premier point d’encrage, en l’occurrence notre pointeur sur les contours de notre logo. De là commence notre travail de reproduction en utilisant courbes et segments.

Si vous ne savez pas comment utiliser l’outil plume, rendez-vous sur la documentation d’Adobe qui pour le coup est très bien pensée puisqu’elle vous explique en détail comment faire.

Premiers tracés à la plume

Décomposer mes tracés

Comme évoqué précédemment, l’ordre des calques influe sur la cinématique d’animation du SVG. Dans notre exemple, je veux que les lettres se dessinent une-à-une en tenant compte de l’ordre logique d’écriture. Je vais donc décomposer mon tracé jusqu’alors fermé pour pouvoir isoler chaque partie individuellement dans des calques spécifiques.

Tracé terminé

Pour cela, je sélectionne l’outil ciseau Icon Illustrator- Ciseau (raccourci clavier : C) et je clique à l’endroit où je souhaite appliquer ma première coupure. Dans notre cas, on va couper les lettres au niveau de leur jonction (empattements).

Points de découpe sur deux endroits spécifiques de la lettre
Ici, on applique deux coupures sur la lettre “e” au niveau de la jointure pour qu’elle devienne indépendante du reste du tracé.

Je réitère l’opération pour chaque lettre qui compose mon logo.

En ce qui concerne notre lettre “N” on constate qu’elle est dors-et-déjà indépendante puisque dissociée du reste, dans ce cas on peut considérer que le travail de “découpe” n’est pas nécessaire.

 

Isoler mes tracés

Maintenant que notre tracé principal est divisé en plusieurs tracés, il faut isoler chacun d’eux dans un calque spécifique pour hiérarchiser correctement notre travail.
On crée donc un calque par lettre depuis le panneau de calque en prenant soin de les nommer logiquement :

Panneau de calque illustrator

Notre lettre “N”, on n’y touche pas, elle est sur le premier calque et se retrouvera seule lorsque les autres seront à leur place. On passe donc à la suivante, le “e”.
On sélectionne son tracé à l’aide de l’outil sélection directe progressive Outil sélection direct progressive (raccourci clavier : A + maintenir Alt).

Un indicateur visuel sous forme de carré se situant en face du calque principal (sur le panneau des calques) vous indique qu’un tracé (ou objet) est sélectionné. Maintenez le clic gauche dessus et glissez le par drag-and-drop sur le calque du dessus comme le montre l’image ci-dessous.

Déplacement d'un tracé dans un autre calque via drag-and-drop
Cela a pour conséquence de déplacer le tracé sélectionné dans ce calque.

Appliquez la même opération pour chacune des lettres :

Tracé décomposé lettre par lettre
Ici, j’ai pris la liberté de colorer chaque lettre, de cette façon je repère d’un rapide coup d’œil chaque composant du logo, il s’agit simplement d’un confort visuel.

Voila notre SVG est déjà terminé, rien ne vous empêche de remplir vos formes et d’ajouter d’autres éléments, gardez juste bien à l’esprit qu’il faille isoler chaque élément si vous souhaitez utiliser Lazy Line Painter tout comme nous dans cet exemple, ce qui vous permettra de maîtriser la chronologie d’animation finale.

Illustrator, mais pas seulement !

Utiliser Illustrator ou Photoshop n’est pas l’unique façon de générer un SVG, celui-ci existe depuis de nombreuses années mais a toujours été ignorée par les navigateurs. Le WEB 2.0 et ses nouvelles technologies ont poussé les éditeurs à rendre ce dernier exploitable. Dorénavant il vous est tout-à-fait possible de créer votre SVG via un balisage sémantique propre.

Une documentation exhaustive du W3C ainsi qu’un bon nombre de tutoriels vous permettront (si vous en avez le courage) d’apprendre à “coder” vos formes SVG.

Cette technique tend à pérenniser mais surtout à évoluer au vu de la souplesse qu’apporte un tel format. Plonger les mains dans le cambouis est recommandé pour comprendre l’envers du décor (de ce qui se trouve derrière le dessin) mais la tâche est loin d’être facile à maîtriser, principalement lorsque vous souhaitez faire des formes complexes (composants multiples, courbes de béziers, …).

D’ailleurs il vous suffit d’ouvrir le fichier .SVG généré par Illustrator dans un éditeur de texte pour vous rendre compte de la complexité du balisage.

Réagissez à cet article

Données obligatoires