Interpréter des commandes vectorielles SVG en AS3

23 décembre 2015

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 :

<?xml version="1.0" encoding="utf-8"?>
<!-- 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.

<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="-5" y1="132.5" x2="163.5" y2="160.5"/>

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

<circle fill="#00FF00" cx="48" cy="38.5" r="19"/>

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.

<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"/>

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 :

//_svgContent représente le contenu du fichier SVG (qu'il faut charger au préalable)

//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


2 comments on “Interpréter des commandes vectorielles SVG en AS3

  1. Tourbez Hervé dit :

    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é

    • vulkanosaure dit :

      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.

Laisser un commentaire

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