Tutoriel Inkscape & Boxy - sommaire

Inkscape : importer une image matricielle dans un document

Pour réaliser un superbe document Inkscape il faut souvent partir d'une image matricielle, par exemple une photo.
Il faut donc importer une image bitmap dans le document.
Le logiciel Inkscape ouvre alors une boite de dialogue qui propose un choix : incorporation ou liaison.

Incorporation ou liaison ?

Techniques d'importation d'une image dans un document Inkscape

Une boite de dialogue s'affiche, suite à la commande Fichier/importer une image bitmap

Que faut-il faire : lier ou incorporer ?
Lisez attentivement le texte de la boite de dialogue "importer" !

Lier l'image matricielle

Le document Inkscape sera très léger (2 KO).
Dans le document "japonaise_nue_lien.svg" l'image matricielle est simplement liée au document Inkscape.
Inkscape se contente de produire une instruction courte basée sur l'élément IMAGE : ... <image ... xlink:href="C:\Users\darcheville\Documents\darchevillepatrick.info\images\japonaise_nue.jpg" width="120" height="140" preserveAspectRatio="none" id="image18" x="-0.055" y="-0.1" /> ...

Le chemin vers l'image matricielle est noté en absolu et fait référence à l'organisation des fichiers sur mon PC.

Insertions du document dans la page web

Via l'élément IMG

Via l'élément OBJECT

Constat

Dans les deux cas l'image matricielle n'apparait pas, seules les barres de censure sont affichées.
Et quand on y réfléchit c'est logique ; chez l'hébergeur le chemin vers l'image n'a aucun sens !

La solution

Suivez la démarche ci-dessous :
• veillez que l'image matricielle et le document SVG soient dans le même dossier.
• ouvrez le document Inkscape avec NotePad et modifiez le chemin dans la balise IMAGE :
  <image ... xlink:href="japonaise_nue.jpg"/>
• vérifiez bien que la balise SVG début a l'attribut xmlns:xlink sinon les images liées ne sont pas prises en compte.
• vous pouvez maintenant téléverser chez l'hébergeur de votre site le document SVG et l'image matricielle (dans le même dossier).

Le document SVG pèse 2 KO !

Le rendu du document Inkscape débuggé

Attention j'ai du insérer le document SVG avec la balise OBJECT compte tenu de la liaison.

Vous pouvez l'afficher aussi avec l'élément Iframe :

Les instructions d'insertion : <object type="image/svg+xml" data="japonaise_nue_lien_bug.svg" style ="width : 50% ; display : block ; margin : auto"></object> <iframe src ="japonaise_nue_lien_ok.svg" width ="60%" height ="550" ></iframe>

Incorporer l'image matricielle

Plutôt que créer une liaison entre le document SVG et l'image matricielle, vous pouvez tout simplement incorporer l'image.

Dans le document Inkscape ci-dessous j'ai incorporé l'image matricielle puis j'ai dessiné un rectangle de censure.

Le code SVG - extrait

L'incorporation est plus simple que la liaison (pas besoin de modifier le code SVG généré) mais présente aussi un inconvénient : le document Inkscape pèse 132 KO cette fois à cause de la "pixellisation" de l'image dans le document SVG.
Mais aussi un avantage : le document SVG est indépendant de l'image matricielle d'origine et l'insertion dans la page web est plus facile ; vous pouvez toujours insérer avec la balise IMG.

Problème avec Boxy SVG

Boxy SVG est un bon éditeur graphique de SVG mais en matière d'importation d'image matricielle il n'est pas pertinent. En effet la liaison n'est pas proposée, c'est forcément l'incorporation.

Importation de plusieurs images dans le même document

Grâce à Inkscape vous pouvez créer une nouvelle image basée sur plusieurs images matricielles mises côte à côte.
Ci-dessous une image SVG construite à partir de quatre images bitmap incorporées et positionnées côte à côte.

Je viens de créer un fichier "spritesheet" (grille d'images).
Les grilles d'images sont très utilisées en CSS. Voir le tutoriel CSS dans le même site.