Perte de lien entre mes images bitmap et mon ficher SVG

Bonjour à tous,
Je viens vers vous car je tourne en rond autour de mon problème.
J'ai une illustration (Adobe Illustrator) qui est composée d'une partie vectorielle (normal pour Illustrator) et un ensemble de petites images bitmap. Je souhaite exporter mon illustration au format SVG, pas de problème d'export; par contre je perds le lien entre mon fichier SVG et mes images bitmap, juste le fichier SVG s'affiche pas les bitmap. Ai-je loupé quelque chose ?????
Merci....

Merci pour ta réponse, j'ai déjà testé, le souci notoire, c'est que cette démarche gonfle la taille du fichier. Mon souhait est de conserver ces liens avec un fichier SVG plus petit (pas d'incorporation de bitmap). Mystère ????

Bonjour,

Il est probable que l'incorporation ajoute les images au svg sous forme de data:image base64. Ainsi, il n'y a plus besoin de faire référence à des images externes, mais ça augmente beaucoup la taille du svg puisqu'il contient aussi le code des images (qui est de plus un peu plus gros du fait qu'il est en base64).

Par contre, si les images sont référencées par des liens dans le svg, évidemment le code sera plus léger, mais il faudra aussi que les fichiers images qu'il référence soit au bon endroit par rapport à ce fichier svg (tout dépend où tout ça est stocké).

Amicalement,
Modifié par parsimonhi (04 Feb 2021 - 16:41)

Oui oui ca rentre l'image en inline dans le SVG et donc oui ca gonfle le fichier. J'avais mal compris ton objectif du coup

Quand j'exporte avec image lié ca me donne ça dans le SVG pour l'image :

<image style="overflow:visible;" width="1538" height="870" xlink:href="eco.JPG"  transform="matrix(8.089026e-02 0 0 8.089026e-02 42.5808 209.6261)">

donc j'imagine que si je mets l'image a coté du svg ça l'affichera... (d'ailleurs si j'ouvre le SVG dans un navigateur ca s'affiche bien). Ou est-ce que ca bloque pour toi du coup ? il y a quoi dans le code de ton svg ?

Merci pour votre réponse,
J'avais déjà analysé le code SVG pour voir comment il procédait...
J'ai sauvé mon illustration avec les images en 'lien', mais quand j'affiche mon SVG dans un navigateur les bitmaps sont absentes, par contre pas de problème quand je lis mon SVG dans Illustrator. Je ne comprends plus rien.

Bonjour à tous,
Après une profonde réflexion et quelques recherches sur le web, j'ai fini par trouver (apriori) une solution. Il faut insérer mon fichier SVG comme source (URL) d'une iframe, paramétrer l'iframe aux dimensions du SVG, mettre le border à 0 et puis voilà. Big mystère. )))))

Bonjour,

luxojr a écrit :
Bonjour à tous,
Après une profonde réflexion et quelques recherches sur le web, j'ai fini par trouver (apriori) une solution. Il faut insérer mon fichier SVG comme source (URL) d'une iframe, paramétrer l'iframe aux dimensions du SVG, mettre le border à 0 et puis voilà. Big mystère. )))))

Forcément une mauvaise solution !

Tout d'un coup, j'ai un doute. Comment inclus-tu ton svg dans ta page ? En mettant une balise SVG dans le code html, ou bien en mettant le nom du fichier comme valeur du src d'une balise <img> ?

Amicalement,

Hello,
J'inclus mon SVG avec le lien de l'iframe (URL) :
<iframe src="base-arbre-1026x723-texte-vectorise-sans-phonemes.svg" height="723" width="1026" style="border:0px;"></iframe>

Bonjour,

Les iframe, ce sont des nids à problème.

Quand ça ne marchait pas, tu faisais comment ?

Amicalement,

Pour régler le problème, je créée un fichier SVG avec les bitmaps à l'intérieur. le fichier SVG devenait donc plus lourd. Entre le fichier sans bitmap et le fichier avec, j'avais un gain d'environ 800 Ko. Je pense que dans un premier temps, je vais rester avec les bitmaps intégrées et on avisera par la suite pour changer de situation.

Bonjour,

Décidément, pas facile de faire le diagnostic avec toi

Je ne peux que redire que cette solution à base d'iframe est mauvaise. Et que c'est probablement la manière dont tu insérais le svg dans la page qui n'était pas bonne. C'est ce code qui manque pour faire le diagnostic.

Amicalement,

Voilà comment le fichier SVG est inséré dans la page.

<img src="../images/arbre-graphemes/arbre-programmatique/base-arbre-1026x723-texte-vectorise-sans-phonemes-embed.svg" alt="" width="1026" height="723"/>

Bonjour,

Enfin !

Donc l'explication est la suivante. Quand tu mets un svg comme valeur de l'attribut src d'une balise <img>, tu ne peux pas mettre à l'intérieur de ce svg des <image> avec des liens vers d'autres images : le navigateur ne retrouve pas les images. Ce n'est donc pas ton <svg> qui a un problème, mais la méthode employée pour l'insérer dans la page qui n'est pas appropriée.

Voici un lien qui explique les différentes méthodes possibles. Certaines vont fonctionner avec des <image> référencées par des liens, d'autres pas : https://vecta.io/blog/best-way-to-embed-svg

L'article ne parle pas des images référencées par des liens à l'intérieur du <svg>. Il faut tester.

Un autre lien ici : https://www.alsacreations.com/tuto/lire/1421-svg-initiation-syntaxe-outils.html

Parmi ces méthodes, il y a l'utilisation d'une balise <iframe> (qui est déconseillée, mais qui marche avec des images référencées par des liens), et l'utilisation d'une balise <img> qui ne marche que si les images sont sous forme de data:image base64 (à ma connaissance; je peux me tromper).

Note que lorsque les images sont référencées par des liens, ton svg est certes plus petit, mais le navigateur devra quand même télécharger ces images. En terme de rapidité, il n'est pas facile de savoir ce qui sera le plus efficace au final entre images référencées par des liens et images sous forme de data:image base64, car il faudra bien que les octets définissant ces images soient envoyés au navigateur dans tous les cas.

Je préfère pour ma part mettre directement la balise <svg> dans le html au lieu d'utiliser une balise <img>. Et dans ce cas, les images dans le svg peuvent être référencées par des liens. Si par exemple tu utilises php, le code pour inclure le svg sera simplement :

<?php include "base-arbre-1026x723-texte-vectorise-sans-phonemes.svg";?>

C'est un peu plus "compliqué" à gérer que les autres méthodes parce que le <svg> n'étant pas encapsulé, il sera éventuellement involontairement modifié par la feuille de style de la page. Mais c'est aussi un avantage car tu pourras justement modifier volontairement le rendu de ce <svg> via le css de ta page assez facilement.

EDIT: pour cette méthode, il faut aussi faire attention aux ids des éléments internes du svg, qui doivent être différents de ceux présents par ailleurs dans la page. Un moyen de régler ça est de préfixer ou suffixer tous ces ids via un script dans un langage quelconque, ou bien via un chercher-remplacer d'un éditeur de texte.

Amicalement,
Modifié par parsimonhi (05 Feb 2021 - 18:39)

bonsoir,

si tu prend cette exemple sur mdn :

<svg width="200" height="200"
  xmlns="http://www.w3.org/2000/svg">
  <image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/>
</svg>

L'image s'affiche a partir de https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image et d'un autre site sans probléme, exemple : https://jsfiddle.net/oycqf1s6/
Cela fonctionne aussi transformé en data URI avec object par exemple : https://jsfiddle.net/qa3f15t7/

<object data="data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCINCiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPGltYWdlIGhyZWY9Imh0dHBzOi8vbWRuLm1vemlsbGFkZW1vcy5vcmcvZmlsZXMvNjQ1Ny9tZG5fbG9nb19vbmx5X2NvbG9yLnBuZyIgaGVpZ2h0PSIyMDAiIHdpZHRoPSIyMDAiLz4NCjwvc3ZnPg=="></object>

____

Si tu prends cet autre exemple : https://jsfiddle.net/8yhfbuag/

<svg width="100%" height="100%" viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <image xlink:href="/files/2917/fxlogo.png" x="0" y="0" height="100" width="100" />
</svg>

L'mage ne s'afficheras qu'a partir de https://developer.mozilla.org/fr/docs/Web/SVG/Element/image

La différence reside dans le lien vers l'image, le premier est en absolu (url complète) et l'autre en lien relatif (recherché a partir de l'emplacement du document ouvert)



essai d'utiliser des chemins absolus dans ton SVG et voit si cette ressource externe est finalement bien chargée.



________________________________________________________________________________________________________________
Pour transformer en data URL le svg , je me suis servi de https://dopiaza.org/tools/datauri/index.php (mais il y en a surement d'autres)

https://developer.mozilla.org/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

Cdt
Modifié par gcyrillus (06 Feb 2021 - 01:05)

bonjour,

oui, dans un tag IMG cela ne fonctionne pas (même en datauri https://jsfiddle.net/ef3gz89p/ )
j'ai bâclé ma réponse en ne reprenant que 2 exemples sans plus d'explications.

je proposais le data d'un object en alternative a iframe . (datauri pour data me semblait aussi pertinent )

iframe et object fonctionnent de la même manière en insérant une ressource externe indépendante alors que ce n'est pas l'usage de la balise image (nous sommes d'accord sur ce point ).

Voici un exemple avec une url externe pour le SVG : https://jsfiddle.net/9mzjyhsu/

<object data="https://tecfa.unige.ch/guides/svg/ex/svg-intro/images/images1.svg"></object>

note : l'usage de l’entête https est a privilégié

Il y aurait aussi le tag embed pour embarquer un doc externe indépendant , plutôt à éviter même si a priori pour un SVG aucun plugin n'est nécessaire. https://jsfiddle.net/fv3aspkn/

<embed src="https://tecfa.unige.ch/guides/svg/ex/svg-intro/images/images1.svg"  >

Bon week-end à tous


edit : source du SVG en ligne prit en example:

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="500" height="200"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <desc>Inclusion d'une image externe. Normalement un client doit
       impl?menter l'importation de png, jpeg, et svg.
 </desc>

 <image x="10" y="50" width="200" height="100" xlink:href="cathedrale_ge.jpg">
  <title>Eglise large</title>
 </image>

 <image x="250" y="50" width="50" height="100" xlink:href="cathedrale_ge.jpg">
  <title>Eglise longue</title>
 </image>

 <image x="310" y="50" width="100" height="100" xlink:href="cathedrale_ge.jpg"
	preserveAspectRatio="xMinYMin meet">
  <title>Eglise juste</title>
 </image>

</svg>

Modifié par gcyrillus (06 Feb 2021 - 11:42)

Bonjour,

gcyrillus a écrit :
oui, dans un tag IMG cela ne fonctionne pas (même en datauri https://jsfiddle.net/ef3gz89p/ )

Ce sont les images à l'intérieur du SVG qui doivent être en data-uri, pas le svg lui-même.

EDIT: ou plutôt, que le svg soit en data-uri ou référencé par son nom de fichier, ça change rien. Ça ne marchera pas dans les deux cas si à l'intérieur du svg, les balises <image> (et non pas <img>) ont comme valeur du src des noms de fichiers image, et ça marchera dans les deux cas si elles ont comme valeur du src des data-uri.

Amicalement,
Modifié par parsimonhi (06 Feb 2021 - 12:47)