Création de la version vectorielle d'une image matricielle

Première solution : utiliser Potrace

Vous avez vu (page précédente) qu'importer une image matricielle dans un document Inkscape est un jeu d'enfant.
Maintenant si vous voulez intégrer cette image sous une forme vectorielle il faut la vectoriser.

Lorque vous vous contentez d'utiliser un bitmap tel quel (par exemple comme décor d'une animation SVG) il vous suffit de l'incorporer dans le document Inkscape mais surtout ne vectorisez pas l'image matricielle.
La vectorisation n'a pas que des avantages ...

Pour l'éventuelle vectorisation d'une image matricielle Inkscape dispose d'un outil : Potrace.
Potrace est un utilitaire libre pour transformer des images matricielles en images vectorielles et installé dans Inkscape.

Nous allons voir comment il faut procéder pour vectoriser une image bitmap avec cet outil. Il faut savoir aussi que l'image vectorisée ne sera jamais identique à son original bitmap.
La vectorisation permet de transformer une photo en une image disons "artistique".

Voyons maintenant la procédure pour utiliser cet outil.

Il faut d'abord importer l'image matricielle (bitmap) dans le document Inkscape.

Pour que le document Inkscape soit léger il suffit de créer un lien vers l'image matricielle.
En effet si vous incorporez l'image le document Inkscape sera lourd ; plombé par tout le code correspondant à l'incorporation de l'image ; code inutile si on ne veut visualiser que la version vectorisée de l'image.
Donc après avoir sélectionné l'image liée il suffit de produire la commande Chemin/Vectoriser un objet matriciel.

Donc résumons nous !
Si on se contente d'afficher l'image matricielle il faut l'incorporer dans le document Inkscape.
Par contre si on veut afficher la version vectorielle de l'image matricielle il faut lier cette dernière au document Inkscape puis procéder à la vectorisation.

Premier exemple

Rendu d'un document Inkscape avec une image matricielle liée puis vectorisée :

Le code SVG correspondant (extrait):
Comme je me suis contenté de lier l'image d'origine au document Inkscape ce dernier ne pèse que 14KO soit le même poids que l'image source (fichier jpg).

... <g inkscape:label="Calque 1" inkscape:groupmode="layer" id="layer1" transform="translate(-77.39,-93.71)"> <image sodipodi:absref="C:\Users\darcheville\Documents\darchevillepatrick.info\images\japonaise_nue.jpg" y="94.9" x="77.36" id="image67" xlink:href="file:///C:/Users/darcheville/Documents/darchevillepatrick.info/images/japonaise_nue.jpg" preserveAspectRatio="none" height="148.1" width="121.8" /> <path style="fill:black;stroke-width:0.5983" d="m 77.36,233.4 v -9.6 l 1.71,-0.4 c 0.94,-0.2 2.64,-1 3.78,-1.7 1.15,-0.7 2.54,-1.4 3.1,-1.4 1.72,0 3.07,-0.6 3.07,-1.4 0,-0.4 0.57,-0.8 1.25,-0.8 0.69,0 1.69,-0.4 2.22,-0.8 0.54,-0.4 1.26,-0.8 1.61,-0.8 0.35,0 1.39,-0.8 2.31,-1.7 0.92,-1 1.68,-1.5 1.68,-1.1 0,0.9 2.61,0.7 3.01,-0.3 0.2,-0.4 0.7,-0.8 1.2,-0.8 0.7,0 1.6,-1.1 1.6,-1.9 0,-0.2 0.4,-0.7 1,-1.2 0.7,-0.7 0.8,-1.1 0.4,-1.5 -1.1,-0.9 -0.9,-1.3 0.9,-1.7 1.1,-0.2 1.6,-0.7 1.4,-1.1 -0.3,-0.6 0,-0.6 1.2,-0.1 0.8,0.3 1.7,1.2 1.9,1.8 0.2,0.7 0.9,1.4 1.7,1.6 1.2,0.3 1.3,0.7 1.1,6.5 l -0.2,6.1 -2.6,1.3 -2.5,1.2 1.9,0.6 c 1,0.3 2.3,0.5 2.8,0.3 0.7,-0.2 0.8,-0.1 0.2,0.4 -0.4,0.5 -0.6,1 -0.3,1.1 0.2,0.3 -0.2,0.4 -0.8,0.4 -1.3,0.1 -3.5,1.2 -3.5,1.9 0,0.2 1.1,0.7 2.5,1.2 2.5,0.8 3.5,2.2 3.4,4.4 -0.1,0.9 0,0.9 0.5,-0.2 0.4,-0.7 0.5,-1.5 0.4,-1.8 -0.2,-0.2 -0.1,-0.6 0.3,-0.8 0.4,-0.2 0.5,-0.9 0.3,-1.5 -0.4,-0.9 -0.2,-1.1 0.6,-0.8 0.8,0.3 1,0 1,-1 0,-0.8 0.2,-1.4 ... "

Passe simple et passes multiples

La boite de dialogue de l'outil "vectoriser un objet matriciel" propose "passe simple : un chemin" ou passes multiples : un groupe de chemins".

En cas de "passe simple" l'image vectorisée sera en noir et blanc comme dans l'exemple précédent.
Si vous sélectionnez "passes multiples" le document vectoriel pourra être en couleurs mais sera aussi plus lourd ...

Ci-dessous la photo originale à gauche et à droite l'image vectorisée obtenue (passe simple) :

Deuxième exemple

Ci-dessous la photo originale à gauche et à droite l'image vectorielle obtenue :

Je ne me suis pas contenté de vectoriser la photo (passe multiple ; 5 passes seulement). J'ai ensuite rhabillé légèrement le sujet (un string) grâce à des tracés calligraphiques.
Le code SVG a été ensuite optimisé grâce à l'application en ligne SVG Editor. La taille du fichier est passée ainsi de plus de 600KO à 125KO donc moins que la taille de l'image matricielle d'origine.
Une page de ce tutoriel est consacrée à SVG editor ; outil en ligne très utile tant que Inskape ne propose pas un module d'optimisation intégré ... Ce que l'on peut regretter.

Deuxième solution : dessiner soi-même une version vectorielle

Si l'image matricielle à vectoriser est composée de formes simples (cercles, rectangles, etc.) vous pouvez vous passer de Potrace et vectoriser "manuellement" l'image source.

Ci-dessous l'image smileys.gif avec sa taille d'origine (300 par 100).

Nous voulons vectoriser cette image bitmap !

Première étape : importer l'image matricielle au document Inkscape

Il faut d'abord lier l'image bitmap dans un nouveau document Inkscape et faire en sorte que la taille du canevas coïncide avec les dimensions de l'image insérée.

Remarque : l'image matricielle est donc insérée dans "calque1" (le calque par défaut).

Deuxième étape :utiliser l'image matricielle comme modèle

Ci-dessous une capture d'écran qui vous montre comment créer un rond rouge identique à celui dans l'image matricielle d'origine.

Le résultat

Ci-dessous l'image bitmap (smiley.gif) agrandie. Remarquez le crénelage !

Ci-dessous la version matricielle (smileys.svg) aussi agrandie. L'image reste très nette ; pas de crénelage !

Je rappelle que c'est le gros avantage d'une image vectorielle par rapport à son équivalent matriciel ; l'image vectorielle est toujours nette ; même très agrandies les courbes ne deviennent pas des "escaliers".
Retour menu