El formato gráfico SVG (IV)
por Luciano Moreno, del departamento de diseño web de BJS Software.

Características de los ficheros SVG.-

Vamos a estudiar ahora cómo es un fichero SVG "por dentro", para lo cual es necesario tener algunos conocimientos previos de XML. Existen diferentes libros buenos y multitud de manuales en Internet que os pueden servir para introduciros en este lenguaje de marcas. Y para facilitar las cosas, también vamos a ir viendo cómo podemos generar los ejemplos usando WebDraw.

Como normas básicas de XML, recordemos las sigientes:

• Todas las etiquetas deben tener pareja de cierre, salvo las que por propia definición no la poséen, en cuyo caso deberá añadirse al final de la misma una barra de cierre "/".
• XML distingue entre mayúsculas y minúsculas, por lo que no es lo mismo la etiqueta <ETQ> que la <etq>. Por lo tanto, si abrimos una etiqueta en minúsculas, su pareja de cierre debe ir en minúsculas, y lo mismo para las mayúsculas.
• Todos los valores de los atributos de una etiqueta deben ir entre comillas "". 

Las especificaciones concretas para SVG las tenéis disponibles en http://www.w3.org/TR/SVG/

En cuanto a herramientas de dibujo, disponemos de las comunes de las aplicaciones de gráficos vectoriales: rectas, curvas Bézier, formas geométricas, textos editables, etc. También es posible usar opciones más avanzadas, como rastrillado de objetos.

Los ficheros gráficos SVG pertenecen al tipo MIME  "image/svg-xml", y se guardan en disco con la extensión ".svg". Su código interno sigue las especificaciones XML, siendo la estructura general de un fichero SVG la siguiente:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="200" height="200" x="0" y="0">
.....Código XML/SVG...
</svg>

En la primera línea tenemos la declaracción de documento XML y la versión del mismo usada, que en nuestro caso es la 1.0. También encontramos la declaración standalone="no", que establece que el documento no va a tener un DTD particular asociado.

Posteriormente encontramos la definición general de tipo de documento, con la ruta en la que se encuentra el DTD elaborado por el W3C para los ficheros SVG. Esta declaración es necesaria para poder construir documentos SVG bien formados, ya que sirve para validar la correcta sintaxis de las etiquetas y la estructura del documento creado.

A continuación viene el cuerpo del documento SVG, que se encuentra delimitado por la pareja de etiquetas <svg...>...</svg>, que le dice al navegador web que el documento es un gráfico SVG. Dentro de estas etiquetas incluiremos todas las declaraciones de objetos SVG que necesitemos para construir nuestro gráfico.

Dos atributos fundamentales de la etiqueta svg son width y height, que van a establecer las dimensiones del gráfico completo, es decir, del rectángulo que va a contener los elementos del mismo. Si no se especifican estas dimensiones, el gráfico ocupará toda la ventana del navegador.

Lo mismo ocurre con los atributos x e y,, que van a definir la posición que va a tener el rectángulo del gráfico (denominado lienzo o canvas), respecto la ventana del navegador web.

Es posible utilizar para todos estos atributos valores enteros (absolutos) o valores porcentuales (relativos).

Incluir ficheros SVG en una página HTML.-

En primer lugar, y como ya hemos dicho, es necesario tener instalado el plugin SVG en nuestro equipo. Plugin que generalmente es el SVG Viewer de Adobe, y que podeis obtener en castellano en

http://download.adobe.com/pub/adobe/magic/svgviewer/win/3.x/3.0/es/SVGView.exe.

Normalmente cuando se instala este plugin nos pide la localización en nuestro PC de Internet Explorer y Netscape Navigator, y una vez acabada la instalación sólo hay que abrir nuestras páginas web con gráficos SVG. La única pega que podemos encontrarnos es en el caso de Netscapoe 6x, ya que a veces no reconoce bien el plugin.

Desde el punto de vista del código HTML, en diferentes web nos alertan de la necesidad de incrustar el fichero SVG usando tanto la etiqueta EMBED como la etiqueta OBJECT, teóricamente porque los navagadores Netscape no soportan bien OBJECT, pero Nestcape 4.73 soporta perfectamente ésta etiqueta. En general, podemos incrustar el gráfico con ambas.

La sintaxis general, combinando ambas etiquetas, para incrustar un fichero SVG en nuestras págfinas web es del tipo:

<object data="ruta_fichero/fichero.svg" width="w" height="h" type="image/svg-xml">
  <embed src="ruta_fichero/fichero.svg" name="nombre" width="w" height="h" type="image/svg-xml" pluginspage="http://www.adobe.com/svg/viewer/install/">
</object>

Donde ruta_fichero/fichero.svg es la ruta local o la URL del gráfico a mostrar, w y h son las dimensiones del gráfico (que generalmente deberán coincidir con las del lienzo del mismo) y pluginspace (atributo opcional) define la ruta de instalación del plugin, de tal forma que aquellos visitantes que no lo tengan instalado serán redireccionados a la web de descarga. Notad también cómo OBJECT usa el atributo DATA para especificar la lozalización del fichero, mientras EMBED usa el atributo SRC para el mismo fin.

Ejemplo:

<html>
<head>
  <title>Ejemplo de gráfico SVG</title>
</head>
<body bgcolor="#ffff99">
<center>
<object data="../images/intro_1.svg" width="200" height="200" type="image/svg-xml">
  <embed src="../images/intro_1.svg" name="ejemplo" width="200" height="200" type="image/svg-xml" pluginspage="http://www.adobe.com/svg/viewer/install/">
  </object>
</center>
</body>
</html>

Que podéis visualizar en esta ventana.

Decir también que existe otra forma más vanazada y útil de incrustar un fichero SVG en un documento, y es mediante los elementos XML namespaces, pero dejaremos este método para los documentos escritos en este metalenguaje.