Generalidades

SVG (Scalable Vector Graphics) permite describir gráficos vectoriales 2D en XML. Inventado en 1998 por un grupo de trabajo (entre los que se encuentran Microsoft, Autodesk, Adobe, IBM, Sun, Netscape, Xerox, Apple, Corel, HP, ILOG, etc.), responde a la necesidad de obtener gráficos ligeros, dinámicos e interactivos. SVG es el tipo de presentación más elaborado para los documentos XML. Los componentes SVG, cada vez más integrados en páginas web, podrían sustituir a un gran número de objetos gráficos anticuados. Este capítulo permite descubrir el lenguaje SVG a través de numerosos ejemplos.

Los componentes SVG han entrado pisando fuerte en el ámbito de los componentes gráficos. Un plug-in permite a los navegadores visualizar los archivos SVG (el plug-in Adobe SVG). SVG es un estándar abierto ya que está escrito en XML. Los documentos SVG, propuestos por el W3C, permiten crear gráficos en dos dimensiones. Existen tres tipos de objetos: los vectores gráficos (líneas rectas o curvas), de imagen o de texto. Estos objetos gráficos pueden agruparse, transformarse y componerse para obtener un objeto único. SVG permite aplicar filtros, transformaciones, modelos de objetos, máscaras, etc.

SVG se ha posicionado como un competidor de Flash. Ahora bien, se espera que Flash y SVG se fusionen ya que Adobe (el editor del reproductor...

Interpretar el SVG

Si su navegador de Internet soporta los archivos SVG, basta con abrir su archivo .svg con él para probar sus creaciones gráficas. En caso contrario, deberá descargar un plug-in especial. Es posible editar sus archivos .svg con un simple editor de texto. Algunos editores están especializados en la edición de código fuente. Si utiliza uno de estos editores, ajústelo para utilizarlo con el tipo de sintaxis XML. Es una ayuda muy útil con archivos XML de gran tamaño. Esto permite ver el código con mayor claridad y realizar modificaciones de forma más rápida.

Puede encontrar el reproductor SVG de Adobe en la siguiente dirección: http://www.adobe.com/es/svg/viewer/install/

La sintaxis de SVG

1. La inicialización del documento

Un documento SVG es, ante todo, un documento XML. Debe contener obligatoriamente un prólogo para definir la gramática utilizada.

Los procesamientos gráficos se realizan dentro del elemento svg. A continuación, deberá especificar el título del gráfico con el elemento title y describirlo con el elemento desc (los motores de búsqueda utilizan esta descripción).

El siguiente ejemplo permite crear un gráfico de 10 cm por 10 cm:


<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"   
  "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">  
   
<svg width="10cm" height="10cm">   
<title>Ejemplo 1 SVG</title>   
<desc>   
    Un documento cuadrado de 10cm   
</desc>   
    <!-- aquí se encuentran las declaraciones gráficas -->   
</svg>

Podrá utilizar diferentes unidades de medida para especificar la longitud y la altura de su documento. La siguiente tabla muestra una lista con las unidades de medida disponibles:

Unidad	Significado
em	Tamaño de la fuente
ex	Altura de la letra x (la letra más baja)
px	Dimensión en píxeles (unidad por defecto)
pt	Dimensión en puntos (un punto = 1/72 de pulgada)
pc	Dimensión en picas (una pica corresponde a 1/6 de pulgada)
cm	Dimensión en centímetros
mm	Dimension en milímetros
in	Dimensión en pulgadas (inches)

El atributo viewBox permite definir un rectángulo en la zona del documento que podrá contener elementos gráficos visibles. Al redimensionar esta zona, los elementos que contiene se redimensionan de manera proporcional. El siguiente ejemplo permite crear dicha zona en toda la superficie del documento:


<svg id="body" width="10cm" height="10cm"   
    viewBox="0 0 100 100">

2. Añadir elementos gráficos

Añadir elementos gráficos es muy sencillo. Solo tiene que conocer el significado de los elementos y los atributos que corresponden a las diferentes formas gráficas. El siguiente ejemplo permite crear un cuadrado con un borde exterior negro...

Conclusión

Este capítulo le ha ayudado a adquirir las bases de la programación en SVG. Ahora ya sabe cómo crear sus propios objetos gráficos interactivos gracias a un lenguaje XML. El siguiente capítulo ofrece una breve presentación de otros lenguajes derivados del XML.