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.
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" !
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 !
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 :
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 car 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).
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 :
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 !
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).
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" :
É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 :
Pour que cette image s'intègre mieux au décor je lui ai appliqué un floutage (Commande : Filtre/Flou double).
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.
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