Incorporer des bitmaps dans des documents SVG
Par Gilles le samedi 17 octobre 2009, 10:27 - Logiciels libres - Lien permanent
Il est parfois nécessaire d'incorporer des images bitmaps dans un document svg, pour une raison simple : La reproduction de l'image bitmap n'est pas possible, ou sa vectorisation dégrade de manière trop importante l'image de départ. Inkscape propose en standard une fonction d'import qui permet, entre autres, d'importer des bitmaps. Dans le cas d'un bitmap, la fonction d'import ne place pas directement les images dans le document svg, mais crée un lien vers le document, sous la forme d'une URL.
Et c'est à ce moment que vous avez un problème. Les URL créées sont sous un forme absolue, et contiennent le chemin complet vers le fichier bitmap. Imaginons que vous ayez créé un lien vers une image située dans votre /home, le chemin d'accès au fichier bitmap incorporé dans le svg sera sous la forme /home/VOUS/chemin_vers_le_bitmap/bitmap.ext. Tant que le fichier svg reste chez vous et que vous ne déplacez pas le fichier bitmap, tout va bien. En revanche, si vous êtes amenés à déplacer votre fichier bitmap, ou si vous échangez votre fichier svg, le lien sera cassé : Le fichier svg conservera la trace de la présence d'une image et de ses propriétés, mais sera incapable de l'afficher et vous renverra une erreur.
Il existe 2 solutions à ce problème :
Incorporer les images : Inkscape est livré avec un script d'intégration des images dans le document svg, (En version 0.46, Effets>Images>Incorporer toutes les images). Ce script présente cependant un inconvénient majeur. Les images étant incorporées directement dans le document svg, sa taille se verra augmentée de celle du fichier bitmap. Si votre document svg contient de nombreuses images, son poids peut alors devenir rédhibitoire. Par ailleurs, Inkscape ne sait pas incorporer tous les formats de fichiers.
Créer des liens relatifs : C'est la solution que j'utilise. Elle nécessite un peu d'organisation, mais fonctionnera systématiquement, et vous offrira par ailleurs quelques avantages supplémentaires.
- Créez un dossier imgs au même niveau que votre document svg. Ce dossier sera le lieu de stockage de tous vos fichiers bitmaps.
- Importez vos fichiers bitmaps depuis ce dossier.
- Après import, remplacez le lien absolu par un lien relatif sous la forme ./imgs/bitmap.ext (où bitmap.ext est le nom de votre fichier). Ce remplacement peut être fait directement sous Inkscape (Clic droit sur l'image, puis propriétés de l'image), ou avec un simple éditeur de texte (Recherchez les balises <image> dans le document svg)
- Si vous êtes amenés à échanger ou déplacer votre document svg, faîtes le avec le dossier imgs
Avantages supplémentaires de cette méthode :
- Vous avez déjà créé votre document svg et intégré vos bitmaps. Il suffit de créer a posteriori le dossier imgs, d'y placer vos bitmaps, puis de modifier les liens absolus en liens relatifs.
- Si vous souhaitez changer le fichier bitmap a posteriori, par exemple pour intégrer une version haute résolution de votre bitmap, il suffit de remplacer le fichier dans votre dossier imgs. Inkscape s'adaptera automatiquement. Votre document svg ne sera pas modifié, puisqu'il s'agit d'un lien. Les autre propriétés de l'objet dans le document svg ne sont donc pas touchées.
L'équipe de développement d'Inkscape a conscience de ce problème. Une spécification a été proposée, permettant de développer un gestionnaire de lien dans une prochaine version d'Inkscape.







Commentaires
L'avantage du SVG est que ce format est stocké en XML. Un bête éditeur de texte permet donc de corriger ce qui cloche. Je prends bonne note du fait qu'on peut modifier les chemins via l'interface d'Inkscape... parce que jusqu'à présent, je le faisais à la main.
Bonjour,
Contrairement à ce que tu sembles penser il y a beaucoup d'autres raisons pour introduire des images bitmap dans un SVG. En voici quelques-unes :
-diaporama : http://www.orvinfait.fr/svg/diapora... Je n'ai fait qu'un exemple en fondu enchaîné mais il est possible de faire des diaporamas de multiple manières.
-animations : http://www.orvinfait.fr/svg/animes/...
-montage photo : http://www.orvinfait.fr/svg/outils/...
Les exemples citées permettent de créer des SVG. Le code est fourni.
Avec SVG il est également possible de changer les couleurs d'une image bitmap, d'y intégrer des effets. Tout cela peut être animé ou non. Contrairement à ce que je lis souvent SVG ce n'est pas que du dessin 2D. Avec SVG il est possible de faire de nombreuses autres choses.
Je pense que Google est en train de préparer la révolution SVG+ ce qui lui permettra d'augmenter considérablement son chiffre d'affaires: voir http://www.orvinfait.fr/
Un des freins au développement de SVG a été le mauvais supports par les navigateurs. Ce n'est pas encore bien mais cela a beaucoup progressé. Firefox est à la traîne, mon logiciel de montage photo ne fonctionne pas correctement avec ce navigateur. Ce logiciel fonctionne mal avec Google Chrome mais fonctionne quand même. De plus les découpes sont crénelées contrairement à ce qui est obtenu avec le navigateur Opera qui est pour l'instant en avance.
Quant à Internet, Google a sorti un plugin que les programmeurs peuvent activer pour les pages qui ont besoin d'utiliser les techniques supportées par Google Chrome et pas par Internet Explorer. Voir http://www.orvinfait.fr/internet_ex...
A+
Il se fait tard j'ai oublié le lien exact à :
Je pense que Google est en train de préparer la révolution SVG+ ce qui lui permettra d'augmenter considérablement son chiffre d'affaires: voir http://www.orvinfait.fr/svg_rapide....
Je te remercie pour ton commentaire. Pour y répondre, je ne semble rien penser. Je donne une explication qui est valable dans un contexte particulier, en l'occurence le dessin 2D et Inkscape. Évidemment, on peut faire des tas d'autres choses avec SVG. Mais ça n'était pas mon propos.
Du reste, les exemples que tu proposes (merci au passage
) présentent bien des liens vers des images, et non des images incorporées directement dans le SVG, sous forme binaire. CQFD !
Si les images importées sont de taille modeste, l'incorporation des images est bien commode. Pour ma part j'utilise Inkscape avec des lycéens pour schématiser à partir d'images. Pour récupérer les fichiers, l'incorporation est incontournable ! Une option d'incorporation automatique serait d'ailleurs la bienvenue mais malheureusement avec l'évolution d'Inkscape c'est le contraire qui se produit. Dans la version 0.47 l'incorporation ne fonctionne plus !!! J'espère que ce bug sera corrigé bientôt.