5568 sujets

Sémantique web et HTML

Perte de lien entre mes images bitmap et mon ficher SVG

Pages :
Modérateur
(reprise du message précédent)

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)
Modérateur
Nous sommes d'accord, mais il faut que luxojr comprenne bien que une balise IMG n'as d'usage que d'afficher une image.

Si cette balise tolère un SVG (qui est un document a part entière) elle n'en afficheras que son rendu graphique, sauf qu'un SVG n'est pas un simple fichier image mais un format de donnée en XML et qu'il peut contenir des liens, des styles et des ressources externes et je pense que c'est là que vient la confusion sur la manière de l’intégrer à sa page.

En passant tout en datauri, on peut s'affranchir de quelques soucis de ressources externes, mais cela reste lourd et proche de la bidouille, comme il a tenté de le faire.

exemple https://codepen.io/gc-nomade/pen/wvoGmpv , en récupérant le fichier svg en ligne de https://tecfa.unige.ch/guides/svg/ex/svg-intro/images/images1.svg qui affiche un title au survol de chaque <image>.

1) en plaçant son uri dans un <object>(, ou <iframe> , <embed>), nous avons bien l'intégrité du document, (title s'affiche au survol)

2) le SVG lui même repris avec ses ressource en url complet ou datauri ,

3) alors que dans <img> en datauri et ses ressources aussi en datauri , nous avons un gros pâté de code et un simple rendu graphique du fichier SVG original sans effet au survol des 2 <image> du SVG embarqué ( je n'ai pu passé que les deux premières images en datauri .. code trop long).

Perso, je garderais l'option <object> pour un soucis de temps et clarté dans un cas similaire.

Il faut se souvenir que pour un SVG externe simple (comme une icône ou un clipart), la balise IMG va bien, pour un SVG externe complexe elle ne convient plus et il faut intégrer ce document SVG comme on le ferait pour tout autre contenu de type HTML/XML .


Cordialement.
Modérateur
Bonjour,

gcyrillus a écrit :
Perso, je garderais l'option <object> pour un soucis de temps et clarté dans un cas similaire.


Oui, utiliser <object> est probablement ici la meilleure alternative à une insertion inline du svg si on ne veut pas se poser la question de la compatibilité des ids et du css du svg avec les ids et css du document.

Amicalement,
Modifié par parsimonhi (09 Feb 2021 - 11:40)
Je ne pensais pas à une telle participation. Toutes vos réponses ont été positive pour moi. Je pense avoir trouvé une solution simple et efficace, je vais utiliser la balise <object>.
Exemple :
<object type="image/svg+xml" data="mon-image.svg">
</object>
Dans ce scénario, les images en lien sont bien chargées.
Je ne pensais pas que ma question allait devenir "populaire"...
Vos réponses ont été positives et je pense avoir trouvé une solution.
Je vais utiliser la balise <object>, exemple :
<object type="image/svg+xml" data="mon-image.svg">
</object>

Dans l'article que j'ai lu, il préconise d'ajouter '<img src="mon-image.svg>' dans la balise <object> (double chargement) , mais cela fonctionne sans et en plus les images en lien sont téléchargées.
Merci à tous pour vos réponses.
Je ne pensais pas à un tel développement...
A la lecture de différents articles 'que vous avez sympathiquement fourni) , finalement j'ai trouvé une solution, je passe par la balise <object>.
Voilà l'exemple que j'ai trouvé :
<object type="image/svg+xml" data="mon-image.svg">
<img src="mon-image.svg">
</object>

Après test, on supprimer la ligne contenant <img ...>
C'est un double chargement...
Cerise sur le gâteau, dans ce scénario les images en lien sont chargées Smiley cligne
Pages :
Sujet clos
Aller à