SVG avec des images externes ne les charge pas lorsqu'il est incorporé avec l'étiquette <img> dans les navigateurs

Question

J'ai fait l'observation suivante:

Si je crée une image svg qui fait référence à une image raster externe via xlink:href et essayer de charger le svg les navigateurs, les images externes ne sont affichées que si j'utilise la balise <object>, mais pas lorsque j'utilise la balise <img>.

Le rendu avec le tag <object> est assez lent et n'est pas aussi propre que l'utilisation de la balise img pour les images. Je me demandais donc s'il était possible de le faire fonctionner avec la balise <img>. Au début, je pensais que cela ne fonctionnait pas à cause d'une même politique d'origine, mais même si l'image référencée est dans le même répertoire et que je la référence par son nom seulement, elle ne se chargera pas.

Des idées?

Answer 1

<object> ne devrait pas être plus lent à charger que <img> en dehors de l'aspect interaction possible (les img sont statiques tandis que les objets sont des documents entièrement interactifs). Les images à l'intérieur du svg devraient charger dans les deux scénarios, ainsi cela ressemble à un bogue dans le navigateur.

Pourriez-vous poster un lien vers votre exemple?

Answer 2

Utilisez-vous IE? IE ne reconnaît pas SVG de toute façon. Microsoft a toujours dix ans de retard, mais ils sont plus populaires et beaucoup plus coûteux, pour une raison quelconque. Nom de la propagande de marque?

SVG se charge dans Firefox. À la fois en tant que document XML référencé directement dans l'URL, et également si vous l'intégrez dans un document XHTML (entièrement compatible XML) avec un espace de noms approprié, le fichier SVG doit s'afficher correctement. La grande chose à propos de cette option est que DHTML peut manipuler votre SVG. Tout ce que j'ai dit dans ce paragraphe s'applique également à MathML, si vous êtes curieux. En outre, SVG ne charge pas à partir d'une étiquette d'image. Je crois que Firefox travaille sur cette mise à niveau, cependant. Je ne suis pas entièrement sûr. L'utilisation de l'objet ou du tag embed est raisonnable, je suppose ... mais l'un de mes correctifs précédents consistait à utiliser un iframe. Incorporer un iframe dans votre code HTML qui fait référence au fichier SVG complet. En utilisant CSS, vous pouvez faire en sorte que l'iframe soit aligné sur le reste de votre document, apparaissant et agissant comme une image. Encased dans une balise div ou span, vous pouvez avoir des gestionnaires d'événements onhover et onclick. En utilisant la balise image, votre src peut être un fichier PHP côté serveur. Si correctement codé et avec les applications cgi appropriées, vous pouvez pixelliser votre SVG côté serveur, et avoir ces données PNG renvoyées à votre image via le src PHP.

Answer 3

Je pense que vous avez au moins 10 mois de retard ... IE9 prend en charge SVG, et les versions préliminaires (y compris une version bêta) sont sorties depuis longtemps. Jetez un coup d'œil à www.ietestdrive.com pour voir l'aperçu de la plateforme - c'est plutôt bien. À mon avis, certaines parties de leur support SVG sont beaucoup mieux que Firefox actuellement (mais ils ne supportent pas encore SMIL).