Visualización SVG Básica

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. Aquellos navegadores con capacidad de visualizar archivos SVG reproducirán el dibujo por separado en una página web.

Para colocar un dibujo SVG dentro de un documento XHTML (Extensible Hypertext Markup Language) o HTML (Hypertext Markup Language), se puede incluir el dibujo SVG dentro del documento XHTML usando los Espacios de nombres, o bien utilizar la etiqueta XHTML <object> para incluir un archivo SVG externo.

[Aviso]Aviso

Otro método que podemos encontrar para incluir un dibujo SVG dentro de un documento web se basa en la utilización de la etiqueta <embed>. Sin embargo, esta etiqueta no forma parte de la especificación del estándar XHTML (ni tampoco de la especificación HTML 4). Los modernos navegadores de Internet (como, por ejemplo, Firefox y Opera) cumplen el estándar XHTML y utilizan la etiqueta <object>, mientras que el plug-in de Adobe requiere el empleo de la etiqueta <embed>.

Utilizando Etiquetas Object

Una forma sencilla y fácil de incluir un dibujo SVG dentro de una página web es utilizar la etiqueta object del lenguaje XHTML. A continuación se muestra un ejemplo de ello:

<?xml version="1.0"?>     1
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
   <title>SVG Included with <object> tag in an XHTML File</title>
  </head>
  <body>

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

   <object type="image/svg+xml" data="web_square.svg">     2
    Browser does not support SVG files!     3
   </object>

  </body>
</html>
   

1

Declaración XML.

2

Inclusión del archivo SVG. El texto "image/svg+xml" es el tipo MIME del archivo que se quiere incluir. Se debe especificar así.

3

El texto que mostrará el navegador web si no admite archivos SVG. Estos navegadores deben ignorar las etiquetas que no son capaces de comprender, y por ello mostrar este texto.

Utilizando Espacios de Nombres

Mediante los llamados Espacios de nombres es posible colocar directamente un archivo SVG dentro de un archivo XHTML. El siguiente es un ejemplo de un archivo XHTML muy sencillo que muestra un cuadrado azul. El cuadrado se dibujó con Inkscape. (Para lograr mayor claridad en el ejemplo, el dibujo Inkscape se guardó en un archivo en formato SVG plano, y se eliminaron algunos de los atributos del rectángulo no utilizados.)

<?xml version="1.0"?>     1
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">     2
  <head>
   <title>SVG Embedded into an XHTML File</title>
  </head>
  <body>

<h1>An SVG rectangle (via Name spaces)</h1>

<!-- Created with Inkscape (http://www.inkscape.org/) -->     3
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"     4
   version="1.0"
   width="150"
   height="150"
   id="svg1341">
  <defs
     id="defs1343" />
  <g
     id="layer1">
    <rect
       width="90"
       height="90"
       x="30"
       y="30"
       style="fill:#0000ff;fill-opacity:0.75;stroke:#000000;
              stroke-width:1px"
       id="rect1353" />
  </g>
</svg>     5

  </body>
</html>
   

1

Declaración de la versión XML. Observe que solo hay una declaración <?xml?> en el documento.

2

Comienzo del espacio de nombres XHTML.

3

Principio del contenido SVG de Inkscape. Atención: la línea de declaración <?xml?> del archivo SVG se ha eliminado.

4

Declaración del espacio de nombres SVG. Hay que tener en cuenta que, cuando el atributo 'xmlns' no tiene ninguna extensión (por ejemplo, ':svg'), entonces la línea declara un espacio de nombres por defecto.

5

Final del espacio de nombres SVG y del contenido SVG de Inkscape.

El archivo anterior será interpretado y ejecutado correctamente por Firefox siempre y cuando el nombre del archivo termine con la extensión .xml. Sin embargo, este archivo no será validado por la herramienta de validación de lenguaje XHTML W3C Markup Validation Service. Para conseguir que el archivo sea validado por esta herramienta, es necesario realizar algunos cambios. La sentencia DOCTYPE se debe cambiar para que contenga este texto: "XHTML 1.1 plus MathML 2.0 plus SVG 1.1". La versión del estándar SVG debe ser la 1.1 para que coincida con el DOCTYPE. Además, todas las etiquetas SVG deben contener el prefijo "svg:" para así declarar explícitamente el espacio de nombres al que pertenecen. Este último cambio es necesario debido a posibles conflictos entre los espacios de nombres XHTML y SVG. Con estos cambios, el siguiente archivo si logrará la validación indicada.

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
  "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
   <title>SVG Included via Namespace in an XHTML File</title>
  </head>
  <body>

<h1>An SVG rectangle (via Name spaces)</h1>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg:svg     1
   xmlns:svg="http://www.w3.org/2000/svg"     2
   version="1.1"
   width="150"
   height="150"
   id="svg1341">
  <svg:defs
     id="defs1343" />
  <svg:g
     id="layer1">
    <svg:rect
       width="90"
       height="90"
       x="30"
       y="30"
       style="fill:#0000ff;fill-opacity:0.75;stroke:#000000;
              stroke-width:1px"
       id="rect1353" />
  </svg:g>
</svg:svg>

  </body>
</html>
   

1

Principio del contenido SVG de Inkscape. Observe que el objeto es ahora declarado con un prefijo 'svg:'. Todos los objetos SVG deben utilizar este prefijo.

2

Declaración del espacio de nombres SVG. Como se puede apreciar comparando esta versión del archivo con la anterior, en esta línea se ha añadido ':svg' a la declaración 'xmlns'.