Cómo poner una imagen SVG en una página web

El método estándar (W3C)

El método estándar para incluir una imagen —en realidad, aplicación— externa SVG dentro de una página HTML (o XHTML), el que indica el W3C, es mediante la etiqueta <object>. Funciona prácticamente con todos los navegadores que soportan SVG, incluso si emplean el applet Adobe SVG Viewer, salvo... (¿lo adivinan?) Internet Explorer. Si se considera que imagen.svg es una imagen SVG de tamaño 312 × 369 píxeles, es algo tan sencillo como esto:


<object data="imagen.svg" type="image/svg+xml" width="312" height="369"></object>


También sirve para imágenes SVG comprimidas (las que tienen extensión .svgz), aunque pueden encontrarse con sorpresas, sobre todo con Firefox, si el servidor web no está configurado adecuadamente; esto se comenta en «Servidor Apache y SVG».

Otras maneras, toleradas, son o bien mediante la etiqueta <embed>, comentada en el apartado siguiente, aunque no siempre funciona (Opera, por ejemplo, considera en alguna versión que es necesario emplear un applet, por lo que si no lo tiene, no funciona), o mediante la etiqueta <img>, que tiene la desventaja que pierde completamente la interactividad y dinamismo del SVG, por lo que no la recomiendo.

La pesadilla de MS Internet Explorer

Como siempre, Microsoft va por libre. Como emplea la etiqueta <object> para otras cosas, lo recomendable es emplear siempre para este navegador la etiqueta <embed>; eso sí: es necesario que haya instalado y configurado el applet Adobe SVG Viewer, tal como se comenta en «Cómo visualizar SVG en Internet Explorer». Para la misma imagen comentada en el apartado anterior, se usaría:


<embed src="imagen.svg" type="image/svg+xml" width="312" height="369" />


La única ventaja de este navegador es que no hace falta que el servidor web esté configurado. Como supone el tipo de dato según la extensión, discrimina desde el principio si es un SVG, para extensión .svg, o un SVG comprimido, para .svgz; aunque parece ventajoso, parece que este mecanismo es una de las fuentes de vulnerabilidad del navegador.

Otros métodos

Es posible incluir un SVG mezclado con el código XHTML; tiene ventajas, pero por su particularidad se comentará en otro artículo.

Ejemplo

Y aquí puede ver un ejemplo, el pingüino cósmico de Linux, en formato .svgz, para que vea que no es un cuento lo dicho: