En développant un jeu de skateboard dont les niveaux étaient essentiellement fait de courbes, je me suis dit qu’il serait intéressant de pouvoir créer mes niveau depuis Illustrator, en traçant mes courbes à la plume.
L’export SVG
La première chose que j’ai découvert, c’est l’export SVG que permet illustrator. Le SVG est un format standard pour du contenu vectoriel, interprété par beaucoup de logiciel.
Quand on ouvre un fichier SVG, le contenu est formaté comme du XML et ressemble à ceci :
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="612px" height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="-5" y1="132.5" x2="163.5" y2="160.5"/>
<circle fill="#00FF00" cx="48" cy="38.5" r="19"/>
<circle fill="#FF0000" cx="827.354" cy="232.811" r="19"/>
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M140.5,187.5l41,45.311c24,136.689,107.004,239,239,239
s216-94.311,240-235l237-4"/>
</svg>
Le fichier est simplement composé d’un noeud racine svg, et contient ensuite des balises représentant chaque objets.
En le chargeant comme n’importe quel fichier XML, on a donc accès à toutes les informations qui composent nos objets vectoriels.
Il ne reste plus qu’à les comprendre et à les interpréter 
Les différents types d’objets SVG
Il existe 3 sortes d’objets SVG :
- Les « line » (lignes)
- Les « circle » (cercles)
- Les « path » (les courbes de bézier)
Les lignes
Les lignes sont très simples, composées de divers arguments (couleur, contour) et surtout de 4 coordonnées x1 , y1, x2, y2 représentant le point de départ et le point de destination de la ligne.
Les cercles
Les cercles sont également très simples, en dehors des arguments « décoratifs » (remplissage, contours, …), les 3 principaux paramètres du noeuds sont le centre cx, cy et le rayon r
Les path
Les « paths » sont les objets les plus complexes, ce sont ceux qui contiennent les fameuses courbes de bézier, notion fondamentale du format vectoriel.
s216-94.311,240-235l237-4"/>
Le paramètre principal est le paramètre d, contenant le path data
Ce path data est rédigé dans un language qui lui est propre. Je ne vais pas rentrer dans tous les détails de ce language, mais voici un lien qui l’explique plus en détail :
http://www.w3.org/TR/SVG/paths.html#PathData
Il contient des lettres (c, s, l, h, et v) représentant des instructions (moveto, line, curve et closepath), et de coordonnées numériques.
Une librairie pour décoder tout ça ?
J’ai écrit une petite librairie permettant de modéliser et d’interpréter tous ces objets.
La classe s’utilise de la manière suivante :
//10 représente un facteur de précision pour la traduction des données vectorielles
var _listItems:Vector.<SVGItem> = SVGParser.parse(_svgContent, 10);
Cette méthode renvoit une liste des objets SVGItem interprétés, chacun représentant un noeud XML du fichier SVG.
Il existe 2 types de SVGItem renvoyés par cette méthode :
- SVGCircle
- SVGPath
Ces classes sont des sous classes de SVGItem, elles contiennent toutes les informations nécéssaires pour pouvoir afficher, en AS3, les figures représentées.
L’objet SVGPath contient une propriété listPoints :
Après application des formules de Bézier, la librairie à traduit les données vectorielles en coordonnées réelles (d’ou la nécéssité du facteur de précision).
Il suffit donc de parcourir cette liste de points, et de les exploiter (avec des moveTo, lineTo par exemple…)
Je met à disposition le code source de cette librairie :
Code source de la librairie SVGReader
Bonjour,
A la recherche d’infos sur le format svg, je suis arrivé sur votre page et ai été très intéressé par son contenu!
J’utilise actuellement Illustrator CS 3 pour réaliser des gabarits utilisables avec StudioScrap 7. Initialement, ce dernier n’utilisait que le format svg mais depuis plusieurs versions, le format a changé (extension.gab).
Si j’ouvre un fichier .gab avec NotePad+, j’ai ce genre de chose:
…
qui présente une certaine similitude avec ce que vous donnez pour le svg…
Mon problème actuellement est le suivant: un gabarit svg peut être utilisé dans StudioScrap; mais s’il est modifié et enregistré depuis StudioScrap, son format passe de svg à gab et je ne peux plus l’ouvrir pour correction dans Illustrator.
Est-ce un format propriétaire ou existe-t’il une possibilité de conversion de fichier .gab en .svg
Merci d’avance, cordialement,
Hervé
Désolé pour le délais de réponse.
Si vous renommez votre fichier .gab en .svg, est ce alors possible de l’ouvrir depuis illustrator ?
Sinon, je ferai un test minimaliste (avec juste un cercle + un tracé à la plume simple) depuis illustrator. Et je comparerai le format .svg (généré par illustrator), à la version .gab une fois qu’une modification a été apportée dans StudioScrap.
vous pouvez ensuite comparer les 2 pour lister les différences (je pense pas qu’il y ‘en ait beaucoup), et eventuellement (je ne sais pas si vous êtes programmeur?), faire un petit script qui convertit automatiquement le .gab vers du .svg.