mejor manera de colocar SVG contenido en el archivo HTML

Question

De mi investigación, entiendo que hay tres maneras de colocar un archivo SVG dentro de HTML:

utilizando incrustar:

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

usando objeto:

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

usando iframe:

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

he experimentado con los tres en un banco de pruebas (django incorporada en el servidor dev, lo que hace las páginas en Firefox 3.6). En este entorno obviamente estéril, no he notado ninguna diferencia entre el rendimiento o la resolución de tres - w/r/t.

Mi pregunta es si una de estas es mejor que las otras dos, y si es así, cuál. La respuesta puede depender de los hechos, que he tratado de limitar a lo que es relevante:

Frecuentemente mostramos datos (por ejemplo, series de tiempo) en nuestro sitio web, generalmente creados en respuesta a alguna acción del usuario; en función de esa acción del usuario, se realiza una llamada a una base de datos, los datos devueltos se procesan y se envían al motor de trazado, que representa una imagen estática que luego se incrusta en la página, algo muy estándar.

Esto funciona bien, pero me gustaría agregar algunas características interactivas a estos gráficos (por ejemplo, información sobre herramientas, etiquetas de eje hipervinculadas, resaltando un grupo de puntos con un gráfico). Algunos de los gráficos son bastante sofisticados (por ejemplo, acondicionamiento de paneles múltiples) y no he encontrado una biblioteca de gráficos de JavaScript que incluya estas funciones. Finalmente decidí usar la misma biblioteca de trazado (Enrejado en R) pero renderizando cada gráfico en svg y luego agregando las funciones de interacción del usuario en un paso de postproceso, que consiste esencialmente en funciones de JavaScript que manipulan el XML directamente.

Answer 1

<embed> En general, evitaría. Está obsoleto en HTML4, no permite el contenido correcto alternativo y ha tenido una selección de problemas en IE.

<object> le permitirá incluir contenido HTML alternativo para navegadores sin soporte SVG. volverá a solicitar que descargue el archivo .svg. Cuál de ellos es el mejor depende probablemente de la aplicación.

La otra alternativa, para los navegadores modernos (incluyendo IE desde la versión 9) es para servir a su página web como application/xhtml+html e incluir los elementos SVG en la propia página.

Answer 2

para mí la mejor manera es esta fuente

<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

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