Tutoriel Inkscape & Boxy - sommaire

Pallier les limites des éditeurs WYSIWIG

Dans ce chapitre je vais vous montrer quelques astuces pour obtenir un code SVG clair et succinct malgré les limites des éditeurs WYSIWIG tels Inkscape et Boxy SVG.

Je ne reviens pas sur l'absence de l'outil "calques" dans Boxy SVG. Je vous rappelle tout simplement qu'un calque en Inkscape se traduit par le conteneur G avec une identifiant et souvent avec l'attribut style et incluant différents objets.
La balise G début comprend aussi l'attribut style pour préciser que l'état visible ou pas du calque (donc des ses composants).

J'ai déjà signalé l'incapacité de Inkscape et Boxy de générer le code correspondant à des animations.
Je vous renvoie au chapitre 18 : Animer les documents SVG

Le problème de l'incorporation

Lorque vous importez une image matricielle dans un document SVG, vous pouvez souhaitez l'incorporation plutôt que la liaison.
L'avantage de l'incorporation est que le document SVG est indépendant de l'image d'origine. Ce qui n'est pas le cas avec la liaison : si vous déplacez le document SVG il faut déplacer l'image également.

Objectif

Dans un document SVG nous voulons importer la même image quatre fois.
Une utilisation maladroite d'un éditeur graphique peut générer un code inutilement lourd.

La mauvaise procédure

Donc sous Inkscape ou Boxy SVG, j'importe l'image par incorporation (sous Boxy je n'ai pas le choix).
Je dimensionne l'image incorporée (300 par 200)
Puis je duplique l'image 3 fois.

Le code avec Boxy SVG

Le code SVG du document Boxy obtenu : <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400"> <image href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGB ..."> <title>bikini13</title> </image> <image href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGB ..."> <title>bikini13</title> </image> <image href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGB ..."> <title>bikini13</title> </image> <image href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGB ..."> <title>bikini13</title> </image> </svg>

L'image est "rastérisée" 4 fois !!!

Le code avec Inkscape

Avec la même procédure, Inkscape produit aussi une abérration : quatre fois la "rastérisation" de l'image.

La bonne méthodologie

L'astuce consiste à importer (par incorporation) l'image une fois puis à encoder manuellement.

Après avoir incorporé l'image une fois :
1. enregistrez le document
2. ouvrez ce fichier avec NotePad
3. rajoutez éventuellement le "namespace" xmlns:xlink="http://www.w3.org/1999/xlink" dans la balise SVG début (Avec Inkscape cet attribut est présent d'office mais pas sous Boxy SVG)
4. Rajoutez le conteneur DEFS et insérez la balise IMAGE dans ce bloc et rajouter un ID à l'élement IMAGE ; l'image devient donc un modèle qui peut être cloné
5. Rajoutez quatre instructions de clonage du modèle d'image.

Un code SVG optimisé

Le code du document Boxy complété : <?xml version="1.0" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <image id ="source" href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD ..."> <title>bikini13</title> </image> </defs> <use xlink:href="#source" x="0" y="0" width ="300" /> <use xlink:href="#source" x="300" y="0" width ="300" /> <use xlink:href="#source" x="0" y="200" width ="300" /> <use xlink:href="#source" x="300" y="200" width ="300" /> </svg>

Je suis obligé de cloner 4 fois (et non pas 3 fois) le modèle d'image car dès qu'un objet est intégré dans la partie DEFS, il disparait du canevas !

Le code du document Inkscape complété : <svg version="1.1" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <image id ="source" x="1.1" y=".55" width="307" height="203" ... /> </defs> <use xlink:href="#source" x="0" y="0" width ="300" /> <use xlink:href="#source" x="300" y="0" width ="300" /> ... </svg>

Je n'ai pas eu à rajouter l'espace de nom xmlns:xlink dans la balise SVG car il y figurait déjà.
L'instruction <?xml version="1.0" encoding="utf-8"?> est absente sous Inkscape.
Sous Inkscape l'élément IMAGE reste une balise simple.

Le rendu du document Inkscape complété

Les découpes d'images

Thématique

Dans un document nous voulons importer quatre fois la même image (avec une seule "rastérisation") mais de plus nous voulons que les deux copies du haut soient détourées par un losange et celles du bas par une ellipse.

La mauvaise procédure

Si vous faites appel à un éditeur WYSIWIG il va générer dans la partie DEFS quatre CLIPPATH avec des coordonnées en absolu.

La bonne méthode

En encodant manuellement je n'aurai besoin que de deux CLIPPATH dans lesquels les coordonnées de la découpe sont exprimées en relatif c'est à dire par rapport à l'image elle-même.
Je vous montre ici que l'encodage d'un CLIPPATH (modèle de découpe) en relatif c'est pas très compliqué.

Le code SVG

Notez dans chaque balise CLIPPATH l'attribut clipPathUnits="objectBoundingBox". Ce qui signifie que les coordonnées de l'objet de découpe pourront être exprimées en relatif : par rapport à l'image à découper.

Expliquons les coordonnées de la balise ELLIPSE dans la deuxième définition :
• rx ="0.5" : le rayon horizontal est la moitié de la largeur de l'image
• ry ="0.5" : le rayon vertical est la moitié de la hauteur de l'image
• cx ="0.5" : l'abcisse de l'origine de l'ellipse est le milieu horizontal de l'image
• cy ="0.5" : l'ordonnée de l'origine de l'ellipse est le milieu vertical de l'image

En ce qui concerne les coordonnées de la balise POLYGON dans la première définition je vous renvoie à mon tuto sur le langage SVG : La balise CLIPPPATH

Le rendu

La vectorisation

Boxy SVG ne propose pas d'outil de vectorisation des images matricielles.
Donc pour vectoriser une image matricielle vous ètes obligé de passer par Inkscape.
Mais rien n'interdit ensuite d'insérer une image vectorielle dans un document Boxy ...

Le rendu

Ci-dessous un document Boxy contenant deux vectorisations réalisées sous Inkscape :

La démarche sous Inkscape

Vectorisez dans deux documents Inkscape distincts deux images matricielles :
• à chaque fois liez l'image au document Inkscape
• sauvegardez le document en SVG optimisé.

Travaux sous NotePad

Dans chacun des deux documents Inkscape vous pouvez supprimer l'instruction IMAGE pour ne garder que les chemins (un chemin par passe).

Le code du premier document Inkscape après édition : <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1800" viewBox="0 0 400 500" xmlns:xlink="http://www.w3.org/1999/xlink"> <g transform="translate(56.116856 78.708336)"> <path d="M-56.1 159.4V-78.7H102.8 261.7v238.1 238.1H102.8-56.1Z" style="fill:#c7b7b4;stroke-width:0.4"/> <path d="m-56.1 385.2c0-8.2 0.1-12.3 0.4-12.2 0.2 0.1 0 ..."> ... </g> </svg>

Il y a 8 chemins (vectorisation en couleurs avec 8 passes)

Le code du deuxième document Inkscape après édition : <svg version="1.1" viewBox="0 0 500 700" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g transform="translate(-26 -14)"> <path d="m55 665c-0.046-2.6 0.49-5.5 1.2-6.4 ... ... </g> </svg>

Il y a six chemins donc 6 passes.

Incorpations dans un document Boxy

Vous lancez Boyx SVG et vous incorporez successivement les deux images vectorielles. Vous placez et redimensionnez ces images.

Retour à Notepad

Maintenant vous ouvrez le document Boxy sous NotePad et vous rajouter la définition de la découpe.
Vous appliquez cette découpe aux deux images vectorisées incorporées en rajoutant à chaque balise G l'attribut clip-path

Le code SVG

Le document SVG obtenu est relativement lourd (près de 600 KO) mais c'est logique car chaque image vectorielle pèse près de 300 KO.