SVG en la página HTML

Los archivos SVG se pueden insertar en un documento HTML con las siguientes etiquetas: <embed>, <object> o <iframe>.

SVG en la página HTML

A continuación, verá tres métodos diferentes para insertar archivos SVG en una página HTML.

Uso de la etiqueta <embed>

La etiqueta <embed> es soportada por todos los navegadores principales y permite el uso de scripts.

Notas:¡El uso de la etiqueta <embed> para insertar SVG en una página HTML es el método recomendado por el Adobe SVG Viewer! Sin embargo, si necesita crear XHTML válido, no puede usar <embed>. Ninguna especificación de HTML tiene la etiqueta <embed>.

Sintaxis:

<embed src="rect.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

Notas:La propiedad pluginspage apunta a la URL de descarga del plugin.

Uso de la etiqueta <object>

La etiqueta <object> es una etiqueta estándar de HTML 4, soportada por todos los navegadores más nuevos. Su desventaja es que no permite el uso de scripts.

Notas:¡Si ha instalado la última versión del Adobe SVG Viewer, ¡¡¡al usar la etiqueta <object> los archivos SVG no funcionan (al menos no en IE)!!!

Sintaxis:

<object data="rect.svg" width="300" height="100" 
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

Notas:El atributo codebase apunta a la URL de descarga del complemento.

Uso de la etiqueta <iframe>

La etiqueta <iframe> funciona en la mayoría de los navegadores.

Sintaxis:

<iframe src="rect.svg" width="300" height="100">
</iframe>

Espero...

Si solo pudiera agregar elementos SVG entre sí mediante la referencia del espacio de nombres de SVG, sería genial, y se vería así:

<html xmlns:svg="http://www.w3.org/2000/svg">
<body>
<p>Este es un párrafo HTML</p>
<svg:svg width="300" height="100" version="1.1" >
<svg:circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg:svg>
</body>
</html>