5553 sujets

Sémantique web et HTML

Pages :
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....
Modérateur
Salut,

J'ai jamais eu le cas mais il me semble que tu peux choisir "d'incorporer" l'image à ton fichier. Au moment de l'export en SVG dans les paramètre avancés "Plus d'options".

upload/1612451748-42161-illustrator.jpg
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 ????
Modérateur
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)
Modérateur
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 Smiley lol

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.
Modérateur
luxojr a écrit :
J'avais déjà analysé le code SVG pour voir comment il procédait...

Et du coup qu'est-ce qu'il y a dans le code ? Il y a bien un path ? c'est le bon ?

Et l'inspecteur de code il dit quoi quand tu va voir la balise ou il doit y avoir l'image ?
Dans le code il y a le nom du bitmap, mais pas de chemin particulier, la 'balise' SVG pointe directement sur la bitmap comme tu l'as indiqué dans ton message précédent.
Modifié par luxojr (04 Feb 2021 - 17:28)
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. Smiley cligne )))))
Modérateur
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. Smiley cligne )))))

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>
Modérateur
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.
Modérateur
Bonjour,

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

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"/>
Modérateur
Bonjour,

Enfin ! Smiley cligne

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)
Modérateur
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)
Modérateur
Bonjour,

@gcyrillus : je me demande si tu as lu ma réponse ! Smiley cannelle Smiley cannelle Smiley cannelle

gcyrillus a écrit :
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/

Sauf que l'exemple inclut le svg en inline. Ça, ça marche Smiley ola . Mais si tu mets le code svg dans un fichier, par exemple abc.svg, et que tu mets dans ton html (ce que faisait luxojr, et dont on a eu du mal à avoir la confirmation Smiley smash ) ...
<img src="abc.svg">
... ça ne marche plus Smiley bzzz , parce que le svg utilise une ressource externe. Fais le test !!!

Et évidemment, si tu transformes la ressource externe en data:image base64 Smiley prie , ça marche Smiley banane même avec <img src="abc.svg"> puisqu'il n'y a plus de ressource externe dans le svg. Smiley vieux

Note que luxojr n'a aucun problème à générer du data:image base64, puisque c'est ce qu'il cherche à éviter. Smiley mur

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

Ce n'est absolument pas une question de chemin relatif et absolu Smiley nono . Mais bien entendu, il faut un chemin qui marche, qu'il soit relatif ou absolu Smiley surprise ... pour une utilisation en inline, ou avec <object> ou avec <iframe>, mais pas avec <img>. Smiley ampoule

Smiley biere

Amicalement, Smiley coucou
Modifié par parsimonhi (06 Feb 2021 - 08:40)
Modérateur
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 Smiley smile )

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)
Modérateur
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)
Pages :