meilleure façon de placer le contenu SVG Dans HTML

Question

D'après mes recherches, je crois comprendre qu'il ya trois façons de placer un fichier svg intérieur HTML:

utilisant embed:

<embed src="plot1.svg" width="500" height="320" type="image/svg+xml" /> 

en utilisant objet:

<object data="plot1.svg" width="500" height="320" type="image/svg+xml" /> 

utilisant iframe:

<iframe src="plot1.svg" width="500" height="320"> </iframe> 

J'ai expérimenté avec tous les trois sur un banc d'essai (django serveur intégré dev, ce qui rend les pages dans Firefox 3.6). Dans cet environnement évidemment stérile, je n'ai pas remarqué de différence entre la performance ou la résolution de trois w/r/t.

Ma question est de savoir si l'un d'entre eux est meilleur que les deux autres, et si oui, lequel. La réponse pourrait bien sûr dépendre des faits, que j'ai essayé de limiter à ce qui est pertinent:

Nous affichons fréquemment des données (par exemple, des séries temporelles) sur notre site Web, généralement créées en réponse à une action de l'utilisateur; en fonction de cette action de l'utilisateur, un appel est effectué vers une base de données, les données renvoyées sont croquées et envoyées au moteur de traçage, ce qui rend une image statique qui est ensuite intégrée dans la page - chose très standard.

Cela fonctionne très bien, mais je voudrais ajouter quelques fonctionnalités interactives à ces cartes (par exemple, infobulles, étiquettes d'axes hyperliés, mettant en évidence un groupe de points w/dans un complot). Certains des graphiques sont assez sophistiqués (par exemple, le conditionnement multi-panneaux) et je n'ai pas trouvé une bibliothèque de cartes javascript qui inclut ces fonctionnalités. J'ai finalement décidé d'utiliser la même bibliothèque de traçage (Lattice in R) mais en affichant chaque graphique en svg et en ajoutant les fonctionnalités d'interaction utilisateur dans une étape de post-traitement, qui consiste essentiellement en des fonctions javascript qui manipulent directement le XML.

Answer 1

<embed> J'éviterais généralement. Il est obsolète en HTML4, ne permet pas le contenu de repli approprié, et a eu une sélection de problèmes dans IE.

<object> vous permettra d'inclure du contenu HTML de secours pour les navigateurs sans support SVG. va reculer à vous invite à télécharger le fichier .svg. Lequel de ceux qui est le mieux dépend probablement de l'application.

L'autre alternative, pour les navigateurs modernes (y compris IE à partir de la version 9) est de servir votre page Web comme application/xhtml+html et d'inclure les éléments SVG dans la page elle-même.

Answer 2

pour moi la meilleure façon est ce

<svg id="circle" height="60" width="60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > 
    <image x="0" y="0" height="60" width="60" xlink:href="huge-red-circle.svg" /> 
</svg> 

You can see the example here

source: http://edutechwiki.unige.ch/en/Using_SVG_with_HTML5_tutorial