Inkscape : importer une image matricielle dans un document

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

Incorporation ou liaison ?

La boite de dialogue 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 (2KO).

Dans le document "japonaise_nue_lien.svg" l'image matricielle est simplement liée au document.
Extrait du code du fichier SVG :

Notez que dans le cadre de la liaison avec une image, Inkscape se contente de produire une instruction image = ... avec pour valeur de l'attribut xlink:href un chemin entre le document et l'image matricielle.
Mais gros, très gros inconvénient ce chemin est noté en absolu et correspond au chemin sur mon PC
A gauche insertion du document Inkscape avec la balise IMG et à droite insertion avec la balise OBJECT :

Dans les deux cas seule les deux rectangles de censure que j'ai ajouté apparaissent mais pas d'image ...
En effet chez l'hébergeur de mon site le chemin (valeur de l'attribut xlink:href) n'a aucun sens !

Solution

Si vous voulez ne pas avoir de problème avec la liaison, il faut que le document Inkscape et l'image liée soient dans le même dossier.
Ci-dessous l'image matricielle simplement liée au document s'affiche !

Extrait du code :
Le document ne pèse que 3 KO.

Notez la valeur de l'attribut xlink:href : le nom de l'image matricielle source.

Mais attention pour insérer ce document Inkscape dans la page web j'ai du utiliser la balise OBJECT ; avec IMG l'image liée ne s'affiche pas !

Donc pour un document Inkscape correct, la liaison exige de nombreuses conditions :

Certes le document Inkscape est très léger mais puisqu'il faut téléverser vers l'hébergeur également l'image source ...
Par contre si plusieurs documents Inkscape ont pour source la même image matricielle alors la liaison peut être intéressante à condition de respecter les conditions citées plus haut : même dossier, transférer documents et image, utiliser balise OBJECT.

La liaison suffit dans le cadre de la vectorisation de l'image bitmap.
En effet si vous voulez importer une image, non pas pour l'afficher mais pour construire sa version vectorielle, il suffit de créer un lien avec cette image puisque l'utilisation de celle-ci est provisioire : servir de modèle à Potrace (outil de vectorisation).

Incorporer l'image matricielle

Reprenons le thème de la jolie nippone, en cas d'incorporation de l'image le document Inkscape sera beaucoup plus lourd : 21 KO alors que l'image source (le fichier jpg) fait 15 KO.
Extrait du code du fichier SVG :

L'image matricielle a été encodée au format SVG.

Ci-dessous le rendu du document Inkscape dans une page Web : japonaise nue

L'image incorporée apparait alors même que la source (l'image jpg) n'est même pas hébergée chez le serveur.
En effet à la différence du précédent ce document est indépendant de l'image matricielle source.
De plus je peux désormais insérer le document dans la page web avec la balise IMG !

Atelier : un montage photos

Imaginons que vous vouliez réaliser avec Inkscape un montage photos.
Dans une photo représentant un superbe fond corallien (et qui doit occuper tout le document) vous voulez incruster un magnifique Napoléon (grand poisson tropical de couleur verte).

Première étape : importation de l'image qui fera fonction de décor

Il faut maintenant ajuster la taille du document Inkscape à l'image incorporée.
Il suffit de produire la commande Fichier/propriété du document.... Une boîte de dialogue apparaît il faut cliquer sur "Ajuster la page au dessin ou à la sélection".

Ci-dessous l'écran Inkscape avec la boîte dialogue "propriétés du document" : image SVG avec Inkscape

Deuxième étape : importation de la deuxième photo (le Napoléon)

Évitez de superposer dans le même calque plusieurs images incorporées.
Il est préférable de créer un nouveau calque et importer la deuxième photo dans ce nouveau calque.
Par défaut un nouveau document Inkscape comprend un seul calque ("calque 1"); l'image "décor" a été incorporée dans ce calque.

Ci-dessous le document Inkscape obtenu : image SVG avec inkscape

Pour que cette image s'intègre mieux au décor je lui ai appliqué un floutage (Commande : Filtre/Flou double).

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 matricielles incorporées et positionnées côte à côte. image SVG avec Inkscape

Je viens de créer un fichier "spritesheet" (grille d'images).
Les grilles d'images sont très utilisées en CSS : fichiers "spritesheet" : pourquoi et comment

Prochain chapitre (voir menu) : la vectorisation d'images matricielles.
Retour menu