Importer une image matricielle dans un document Inkscape

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 Inskcape 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 ... image SVG avec Inkscape

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

Liaison

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 :

... <g inkscape:label="Calque 1" inkscape:groupmode="layer" id="layer1" transform="translate(0.05,0.1)"> <image sodipodi:absref="C:\Users\darcheville\Documents\darchevillepatrick.info\images\japonaise_nue.jpg" 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" /> <rect style="color:black;display:inline;overflow:visible;visibility:visible;opacity:1;fill:black; ... fill-opacity:1;fill-rule:nonzero;sy="71.1" /> <rect style="color:black;display:inline;overflow:visible;visibility:visible;opacity:1;fill:black; fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.0584; ... height="15.62" x="17.59" y="108.4" /> </g> ...

Notez que dans le cadre de l'incorporation d'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 ...

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

Seuls les deux rectangles de censure que j'ai ajouté apparaissent. En effet chez l'hébergeur le chemin (valeur de l'attribut xlink:href) est faux !!!

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 :

... <image width="120" height="1.5e+002" preserveAspectRatio="none" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAEAAAAAAAD/ 2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwM BwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwM DAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAEMALwDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEA AAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJx FDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNk ZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJ ytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQF BgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMz UvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3 eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna 4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5Z8iiaCrsMFE0Ffz7UP2QzPJq94bg/wCJ lUf2ar3huD/iZVy1AOks4K1rOCqNn0rXs4K5tTq1OW+LVj/xbfVf+2f/AKMSv1E/YJ8AalqP7Afw" ... /> <rect style="color:black;display:inline;overflow:visible;visibility:visible;opacity:1;fill:black; ... width="81.05" height="18.49" x="19.28" y="116.1" /> <rect style="color:black;display:inline;overflow:visible;visibility:visible;opacity:1;fill:black; ... width="67.17" height="19.41" x="36.54" y="73.25" /> ...

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 SVG est indépendant de l'image matricielle source.

Atelier : un montage photos

Imaginons que vous vouliez réaliser avec Inkscape un montage photos.
Dans une photo représentant un superbe fond coralien et qui doit occuper tout le document vous voulez incruster sous forme d'une vignette la photo d'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 image.

Evitez de superposer dans le même calque plusieurs images incorporées.
Il faut donc 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

J'ai inséré dans le deuxième calque la photo du Napoléon. 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 Inkscape

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

Remarque importante

Nous savons insérer des images matricielles (bitmap) dans un document Inkscape mais nous ne savons pas la modifier.
Pour que l'image insérée dans un document Inkscape soit modifiable il faut non seulement l'incorporer mais aussi la vectoriser !!!

La vectorisation d'une image bitmap est expliquée dans la page suivante.
Retour menu