Afficher original ou version vectorisée

Maintenant vous savez incorporer une image bitmap dans un document Inkscape mais vous savez aussi créer un document Inkscape avec l'équivalent vectoriel de l'image matricielle.

Par contre vous ne savez pas encore produire un document Inkscape avec les deux versions de l'image (matricielle et vectorielle).
C'est ce que je vais vous montrer dans cet article.

Objectif : un document Inkscape représentant une toile de Buffet doit être intégré dans une page Web.
En cliquant sur la légende le visiteur passe de l'original matriciel à la copie vectorielle (et vice-versa).

Attention le logiciel Inkscape n'est pas capable de rajouter au fichier du code CSS et JavaScript.
Il est nécessaire d'utiliser un éditeur de textes tel NotePad.

Première étape : utilisation de Inkscape

importer l'image matricielle dans un nouveau document Inkscape avec incorporation
sélectionner l'image incorporée
adapter la taille du document à la sélection

On obtient alors un avec un seul calque mais avec deux parties bien distinctes !

Code correspondant à l'image incorporée

Un extrait du code :

Ce code est assez lourd. Ce qu'il faut retenir c'est qu'il est basé sur la balise IMAGE.
Cette balise permet en effet non seulement de créer un lien vers l'image source dans le cadre d'une liaison mais aussi d'incorporer une image matricielle dans un document Inkscape.

Code correspondant à la vectorisation

<path style="fill:#e4e3dc;stroke-width:0.440149" d="M 18.3315,136.096 V 68.6659 h 92.1745 92.174 v 67.4301 67.431 H 110.506 18.3315 Z" id="path56" inkscape:connector-curvature="0" /> <path style="fill:#d3cea4;stroke-width:0.440149" d="m 110.177,203.228 c 0.438,-0.109 1.045,-0.102 1.349,0.02 0.305,0.118 -0.05,0.207 -0.795,0.198 -0.742,0 -0.991,-0.105 -0.554,-0.214 z m 2.69,0 c ...

Il y a 8 "paths" car lors de la vectorisation j'ai demandé 8 passes.

Deuxième étape : utilisation d'un éditeur de texte

Je veux que par défaut ce soit la version matricielle de l'image qui s'affiche mais que le visiteur puisse obtenir par un simple clic le croquis vectoriel correspondant.

Je dois compléter le code SVG, rajouter un peu de CSS mais aussi du JavaScript.

Modification avec NotePad du code

Je dois modifier les attributs width & height de la balise SVG dans le cadre d'une image adaptative.

Le code correspondant à l'image matricielle doit être un premier calque et la version matricielle dans un second.
Par défaut le premier calque est visible et le second est masqué.

Je dois rajouter un bouton de commande légendé.

Je dois rajouter un script qui s'exécute sur un clic du bouton de commande.

Le code après modifications (extraits)

... <svg ... width="80%" height="auto" viewBox="0 0 184 135" ... <g ... id="calque1" transform="translate(-18.3315,-68.5894)" style ="display : inline;"> <image y="68.6659" x="18.3315" id="image37" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8KCwkMEQ8SEhEP ... </g> <g ... id="calque2" transform="translate(-18.3315,-68.5894)" style ="display : none;"> <g id="g40"> <path style="fill:#e4e3dc;stroke-width:0.440149" d="M ... <path style="fill:#d3cea4;stroke-width:0.440149" d="m ... </g> <g onclick ="fchanger()"> <text x="20" y="120" font-size="10" fill="red">Original / croquis vectoriel</text> </g> <script> function fchanger() { var calque1 = document.querySelector('#calque1'); var calque2 = document.querySelector('#calque2'); if(calque1.style.display == 'inline') {calque1.style.display ='none' ; calque2.style.display ='inline' ; } else {calque1.style.display ='inline' ; calque2.style.display ='none' ; } } // fin fonction </script> </svg>

Commentaire

Notez bien que pour le premier calque j'ai rajouté : display : inline et pour le second : display : none.
Par ailleurs les deux calques ont été identifiés "calque1" et "calque2". Cette identification est indispensable dans le cadre de la programmation JS.

Le code de la fonction JS ne pose pas de difficulté et repose sur un algorithme très simple. Si "calque1" est affiché il faut le masquer et afficher "calque2" sinon il faut l'afficher et masquer l'autre.

Troisième étape : réduire le poids du fichier

Hélas Inkscape ne dispose d'un outil d'optimisation du code.
Je suis donc obligé de faire appel à l'outil en ligne SVG EDITOR créé par Peter Collingridge. URL de l'outil en ligne
Il suffit de sélectionner tout le code du fichier SVG puis de le coller dans la zone de texte "paste" de l'onglet "input".
Puis il faut passer à l'onglet "optimize" et opter pour "conservative"
Cliquez sur le bouton "download" pour télécharger la version optimisée.
Le site vous adresse un fichier "optimised.svg".

Le fichier SVG non optimisé faisait près de 300 KO. la version retournée par SVG EDITOR fait 230 KO. Le gain de poids n'est pas négligeable.
L'outil simplifie le code SVG mais ne touche pas au JavaScript.

Testez ce code

Le fichier SVG optimisé est maintenant inséré dans la page Web.

Cliquez sur le texte pour basculer en croquis vectoriel et vice/versa.

Attention ce fichier SVG contient un script donc il faut l'incorporer avec la balise OBJECT (avec la balise IMG le script serait bloqué).

Le code d'insertion dans la page est donc le suivant :