Visualización Básica de Gráficos SVG

Hay varias maneras diferentes de visualizar archivos SVG dentro de una página web. La manera más sencilla es simplemente crear un enlace a un archivo SVG mediante la etiqueta <a>. Aquellos navegadores con capacidad de visualizar archivos SVG reproducirán el dibujo por separado en una página web. Para incluir un contenido SVG como parte de una página web se pueden utilizar cualquiera de las siguientes opciones:

A continuación se describen cada una de estas opciones. Un apartado final está dedicado a algunas alternativas que podemos utilizar para reproducir contenidos SVG en navegadores antiguos.

La Etiqueta <object>

Utilizar la etiqueta <object> es la forma más básica de incluir un fichero SVG externo. La principal ventaja de usar esta etiqueta es que tiene un mecanismo natural de respaldo para visualizar un contenido alternativo en caso de que el contenido SVG no sea visualizado. Esta etiqueta requiere la definición de un atributo data que contiene la ubicación del fichero SVG, normalmente una dirección relativa. Es muy recomendable definir el atributo type ya que permite que los navegadores no descarguen aquellos contenidos que no reconocen. En el caso de contenidos SVG, el valor que hay que dar a este atributo es "image/svg+xml". Si el navegador no puede reproducir el contenido del archivo SVG, entonces el navegador intentará visualizar el contenido situado entre la etiqueta de apertura <object> y la etiqueta de cierre </object>. En este caso, una buena idea es colocar ahí una versión en formato PNG del dibujo SVG.

Ejemplo básico de un cuadrado.
Ejemplo de un dibujo SVG muy sencillo incluido mediante una etiqueta <object>.
<!DOCTYPE html>     1
<html xmlns="http://www.w3.org/1999/xhtml">     2
  <head>

    <meta charset="UTF-8"/>     3
    <title>SVG Included with <object> tag</title>

  </head>
  <body>

    <h1>An SVG rectangle (via <object> tag)</h1>

    <object type="image/svg+xml" data="web_square.svg">     4
      <img src="web_square.png" alt="Blue Square"/>     5
    </object>

  </body>
</html>
   

1

Declaración HTML. Con el estándar HTML5 no es necesario un DTD.

2

Declaración del Espacio de nombres HTML. Aquí se especifica el uso de sintaxis XML.

3

La codificación de caracteres utilizada en el archivo. Generalmente la codificación usada en la actualidad es la UTF-8.

4

Inclusión del archivo SVG mediante una etiqueta object. El código "image/svg+xml" es el tipo MIME del archivo incluido.

5

El archivo en formato PNG que tiene que ser visualizado en caso de que el navegador no consiga reproducir el gráfico SVG.

Existen un par de problemas bien conocidos en los navegadores Chrome 6 y Safari 5 (que utilizan en mismo motor de visualización) cuando se utiliza la etiqueta <object>. El primer problema es que los dibujos SVG se visualizan con un fondo no transparente. El segundo es que a menudo los gráficos SVG no se reproducen con el tamaño adecuado, y se visualizan con barras de desplazamiento. El problema de la transparencia ya ha sido arreglado en Chrome 7. El problema con el tamaño de los dibujos seguro que también será corregido en breve.

La Etiqueta <embed>

Aunque la etiqueta <embed> nunca ha formado parte de las especificaciones HTML o XHTML, es ampliamente utilizada y reconocida por los navegadores. Por este motivo ha sido incorporada dentro de la especificación HTML5. Está diseñada para incluir contenidos que necesitan algún plug-in externo para funcionar. El plug-in de Adobe requiere el uso de la etiqueta <embed> y el reconocimiento de esta etiqueta es la única razón para utilizarla con gráficos SVG. Esta etiqueta no tiene ningún mecanismo de respaldo para visualizar un contenido alternativo en caso de que el navegador no sea capaz de reproducir el contenido SVG. Hay que tener en cuenta que con los navegadores Chrome 8 y Safari 5 puede ser necesario utilizar los atributos width y height para evitar que aparezcan barras de desplazamiento. Safari 5 también visualiza de forma incorrecta los dibujos SVG con fondos no transparentes.

Este es un ejemplo de utilización de la etiqueta <embed>. Solo es necesario el atributo src.

<embed src="web_square.svg"/>
   

La Etiqueta <iframe>

La etiqueta <iframe>, obsoleta en HTML 4 y XHTML, ha resurgido en la especificación HTML5 con el propósito de aislar contenidos que podrían suponer algún riesgo de seguridad. Esta etiqueta no tiene ningún mecanismo de respaldo para visualizar un contenido alternativo en caso de que el navegador no pueda reproducir el contenido SVG. Con esta etiqueta, el navegador dibuja un marco alrededor del gráfico SVG. Podemos conseguir que no aparezca este marco asignando al atributo frameborder un valor 0 (hay que tener en cuenta que esto no es válido en HTML5). El tamaño del marco se puede ajustar mediante los atributos width y height. Si el tamaño del marco es demasiado pequeño para contener el dibujo SVG, en su visualización el navegador añade barras de desplazamiento. Con esta etiqueta, Safari 5 visualiza de forma incorrecta los gráficos SVG añadiendo fondos no transparentes.

Este es un ejemplo de utilización de la etiqueta <iframe>. Solo es necesario el atributo src. Hay que tener en cuenta que es necesario añadir una etiqueta de cierre, y que la sintaxis XHTML no permite incluir nada entre las etiquetas de apertura y cierre.

<iframe src="web_square.svg"></iframe>
   

La Etiqueta <img>

La etiqueta <img> se usa para incrustar imágenes. Para utilizarla es necesario definir dos atributos: src y alt. Este último sirve para describir la imagen en caso de que el navegador no pueda reproducirla, o el usuario no pueda verla (es decir, sea un usuario ciego).

Este es un ejemplo de utilización de la etiqueta <img>. Como se puede apreciar en el ejemplo, esta etiqueta es autocerrada.

<img src="web_square.svg" alt="Blue Square"/>
   

Hay dos razones para no utilizar la etiqueta <img> con dibujos SVG. La primera es que no tiene mecanismo de respaldo para reproducir un contenido alternativo si el navegador no puede visualizar la imagen. La segunda razón es que un gráfico SVG visualizado con esta etiqueta no puede ejecutar ningún script o tener asociada ninguna interacción (por ejemplo, un enlace). Por otra parte, una ventaja de utilizar esta etiqueta es que Safari 5 maneja correctamente las trasparencias. Otra ventaja es que esta etiqueta se puede utilizar dentro de un objeto <a> HTML, dentro los cuales el uso de las otras etiquetas tiene el inconveniente de que los dibujos SVG ignoran los clics del ratón.

Incrustar Código SVG

La especificación HTML5 incluye la posibilidad de incluir directamente código SVG dentro de un archivo HTML. Esto también se puede hacer con la especificación XHTML mediante la utilización de Espacios de nombres. Hay algunos puntos que es importante advertir:

  • Para incluir código SVG utilizando la sintaxis HTML debemos usar un navegador que tenga un analizador sintáctico HTML5. Hasta hoy, solamente Firefox 4 y Internet Explorer 9 tienen analizadores sintácticos HTML5. Hay que tener en cuenta que los Espacios de nombres no están permitidos en la sintaxis HTML (excepto los Espacios de nombresXHTML, XLink, MathML y SVG). Es necesario eliminar del código SVG las declaraciones Inkscape, Sodipodi o de otros Espacios de nombres.
  • Todos los navegadores más importantes, a excepción de Internet Explorer, ya reconocen el código SVG incrustado dentro de la sintaxis XML. También lo reconocen incluido dentro de un archivo escrito en el estándar XHTML.
  • Un archivo HTML5 normalmente termina con el código .html cuando se utiliza la sintaxis HTML. En cambio, cuando se usa la sintaxis XML, el archivo termina con el código .xhtml o .xml.

El siguiente es un ejemplo de código SVG incrustado dentro de un archivo HTML. Este archivo utiliza la sintaxis XHTML aunque también funcionará con HTML5. Hay que tener en cuenta que las declaraciones de los dos Espacios de nombres son opcionales en la sintaxis HTML5. En el código SVG se han eliminado todas las partes que no son estrictamente necesarias como los elementos del Espacio de nombres de Inkscape.

<!DOCTYPE html>     1
<html xmlns="http://www.w3.org/1999/xhtml">     2
  <head>

    <meta charset="UTF-8"/>     3
    <title>SVG Inlined</title>

  </head>
  <body>

    <h1>An SVG rectangle inlined</h1>

    <svg     4
       xmlns="http://www.w3.org/2000/svg"     5
       version="1.1"
       width="150"
       height="150">
      <rect
	 width="90"
	 height="90"
	 x="30"
	 y="30"
	 style="fill:#0000ff;fill-opacity:0.75;stroke:#000000"/>
    </svg>

  </body>
</html>
   

1

Declaración HTML. No es necesario un DTD.

2

Declaración del Espacio de nombres XHTML. Esta declaración es necesaria en XHTML, y opcional en HTML5. Hay que tener en cuenta que la declaración del espacio de nombres es idéntica en HTML5 y XHTML.

3

La codificación de caracteres utilizada en el archivo. Generalmente la codificación usada en la actualidad es la UTF-8. No es absolutamente necesaria, aunque si muy recomendable.

4

Principio del código SVG.

5

Declaración necesaria en XHTML, y opcional en HTML5.

Fondos con Estilo CSS

Es posible utilizar un gráfico SVG como un fondo con estilo CSS. Un problema que se presenta con este método es añadirle un mecanismo de respaldo en caso de que el navegador no pueda visualizar el dibujo SVG. Este mecanismo de respaldo es necesario para los navegadores Firefox 3.6 y anteriores, así como para Internet Explorer 8 y anteriores. Podríamos visualizar a la vez el dibujo en formato PNG y su versión en SVG encima. Sin embargo, con este truco, si el gráfico SVG tiene un fondo transparente, el dibujo PNG colocado debajo se podría ver a través de las transparencias (un problema al menos con Opera cuando se aplica zoom al archivo HTML). Además, Internet Explorer no ejecutará correctamente este mecanismo de respaldo. Una solución a este problema es utilizar dos líneas background-image, aunque Internet Explorer no reconocerá el código none de la segunda línea, volviendo a utilizar la primera.

body {
  background-image: url('background.png');
  background-image: none, url('background.svg'), url('background.png');
  background-size: 100% 100%;
}

Contenidos SVG en Navegadores Antiguos

El primer punto a tener en cuenta respecto a la compatibilidad de los contenidos SVG con los navegadores antiguos es decidir qué navegadores y qué versiones vamos a utilizar. Podemos dividir los navegadores en dos grupos: Internet Explorer y el resto. Las versiones de Internet Explorer anteriores a la 9 no reconocen de forma nativa ni el código SVG ni XHTML. Todas las versiones actuales o relativamente recientes del resto de los navegadores más importantes reconocen los códigos SVG y XHTML, aunque puede que no reconozcan completamente todo el estándar SVG (por ejemplo, Safari 5 no reconoce los filtros). Por lo tanto, la cuestión principal en este tema es: ¿cómo conseguir que un navegador Internet Explorer antiguo reconozca el código SVG? No es probable que esta cuestión deje de tener pronto sentido, ya que los usuarios de Internet Explorer son menos proclives a actualizar su navegador, que los usuarios de otros navegadores. Además, muchos de los usuarios de Internet Explorer no pueden actualizar su navegador ya que o bien utilizan como sistema operativo Windows XP, en el que no puede correr Internet Explorer 9; o bien están usando aplicaciones web que se basan en las características no estándar de Internet Explorer 6.

En este momento, la mejor manera de incluir contenidos SVG dentro de una página web es utilizar la etiqueta <object> con un mecanismo de respaldo en formato PNG. Este es un método sencillo que tiene en cuenta la incapacidad de las versiones antiguas de Internet Explorer para visualizar dibujos SVG. Si lo que necesitamos es utilizar una solución que se base exclusivamente en código SVG puro, entonces necesitamos recurrir a plug-ins para Internet Explorer. Existen diversos plug-ins que podemos utilizar:

  • El plug-in de Adobe. Aunque Adobe ha abandonado la actualización y mejora de este plug-in, todavía puede descargarse (Adobe perdió todo interés en el estándar SVG después de comprar Flash). El plug-in permite que el navegador reconozca de forma bastante completa los gráficos en formato SVG, aunque puede que nos resulte algo difícil conseguir que el plug-in funcione. Con este plug-in es necesario utilizar la etiqueta <embed>.
  • El plug-in Google Chrome Frame. Este plug-in sustituye el visualizador de Internet Explorer 6, 7 y 8 por el visualizador utilizado en Chrome. El plug-in se activa mediante la inserción de la línea <meta http-equiv="X-UA-Compatible" content="chrome=1"> dentro de la sección <head> del archivo HTML. Si Google Frame está instalado en el equipo, las páginas web serán visualizadas mediante el plug-in, en caso contrario serán reproducidas por el visualizador normal de Internet Explorer. Esta es una manera muy poco invasiva de incorporar el uso de un plug-in.
  • La biblioteca JavaScriptsvgweb utiliza el plug-in de Flash para visualizar contenidos SVG. Como la mayoría de los usuarios de Internet Explorer ya tienen instalado Flash, esta es una forma muy fácil de conseguir que Internet Explorer reproduzca dibujos SVG. Este método también se puede utilizar para lograr que aquellos navegadores que no reconocen completamente todo el estándar SVG puedan visualizar animaciones SMIL de gráficos SVG, y también familias tipográficas SVG. Las modificaciones que realiza este plug-in en los archivos HTML son más grandes que las que lleva a cabo Chrome Frame.

En la actualidad, la mayoría de los principales navegadores, excepto las versiones de Internet Explorer anteriores a la 9, reconocen el código SVG incrustado directamente tanto con la sintaxis XML en archivos HTML5, como en archivos propiamente XHTML. En cambio, las versiones anteriores de Internet Explorer no reconocen el código SVG incrustado directamente, por lo tanto, hay que añadir un mecanismo de respaldo utilizando necesariamente archivos HTML para Internet Explorer, mientras que se pueden utilizar archivos XHTML para el resto de navegadores. El empleo de código SVG insertado en archivos HTML5 utilizando sintaxis HTML requiere el uso de navegadores que tengan analizadores sintácticos HTML5. Actualmente solo Firefox 4 e Internet Explorer 9 tienen este tipo de analizadores sintácticos. El proyecto SVG Boilerplate está desarrollando métodos para poder utilizar código SVG en navegadores antiguos, incluyendo la inserción de código SVG en archivos HTML.

Por último, si trabaja creando contenidos gráficos vectoriales mediante programación, puede probar otros métodos para lograr que las versiones antiguas de Internet Explorer reproduzcan sus dibujos SVG. Uno de estos métodos alternativos es la utilización de la biblioteca Raphaël que usa JavaScript para generar código SVG o VML dependiendo del navegador.