Accueil

Traduction

Tutoriel Inkscape & Boxy SVG - sommaire

Sommaire partiellement masqué - faites défiler !

Inkscape & Boxy_SVG - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

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 ?

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 (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

Ci-dessous tentative d'insertion du document Inkscape dans cette page web.
A gauche insertion avec la balise IMG et à droite insertion avec la balise OBJECT :

Dans les deux cas seuls les rectangles de censure que j'ai ajouté apparaissent mais pas d'image matricielle liée.
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.

Extrait du code du document "france_relief.svg" :

Comme les deux fichiers sont dans le même dossier, le chemin se résume au nom de l'image source.

Maintenant nous tentons d'insérer ce document Inkscape dans la page web.
À gauche insertion avec la balise IMG et à droite avec la balise OBJECT.

Le document Inkscape n'apparait pas avec la balise IMG !

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 insertion de ce document avec la balise IMG : 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 document, ce dernier est indépendant de l'image bitmap 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)

Il est préférable de créer un nouveau calque et importer la deuxième photo au sein de 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 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 : fichiers "spritesheet" : pourquoi et comment