Curso de XML

El SVG y el VML son dos lenguajes XML utilizados para definici�n de gr�ficos vectoriales. El SVG es una propuesta del W3c, mientras que el VML es la propuesta sobre el mismo tema de Microsoft.

.�SVG

SVG (Scalable Vector Graphics) es un lenguaje XML que esta siendo desarrollado por el W3c para describir gr�ficos en dos dimensiones.

Recientemente, el 4 de septiembre de 2001, se ha aprobado la recomendaci�n de la versi�n 1.0. Sin embargo, ya exist�an aplicaciones desde los primeros borradores y, por supuesto, tras la aprobaci�n se incluir�n unas cuantas m�s.

  • Visualizadores
    • CSRIO Viewer, que es un estupendo visualizador de documentos SVG. Es gratis y est� escrito en Java. Adem�s viene acompa�ado de una utilidad que nos permite convertir dichos documentos en im�genes en formato JPEG.
    • IBM SVG viewer,tambi�n un buen visualizador en Java desarrollado por IBM.
    • Adobe a desarrollado un plug-in que permite visualizar este tipo de documentos en el IE y en el Nestcape.
  • Conversores
    • Cada d�a son m�s las aplicaciones de dibujo que nos permiten trabajar con este tipo de documentos.
      • CorelDraw ha anunciado recientemente un filtro para su versi�n 9.1, que permite exportar los gr�ficos desarrollados con esta aplicaci�n a SVG. En la versi�n 10 viene incluido de serie.
      • Adobe tambi�n ha realizado lo mismo para la versi�n 8.1 del Adobe Ilustrator, de manera que desde esta aplicaci�n podemos importar y exportar documentos SVG.
      • FOP de James Tauber que es una implementaci�n gratuita en Java de los XSL-FO que nos permite convertir nuestros documentos XML en PDF. Lo interesante es que tambi�n reconoce la sintaxis SVG y es capaz de pintarla en PDF.

Por tanto, a pesar de ser todav�a un borrador de trabajo, las posibilidades de ir realizando aplicaciones con esta especificaci�n son inmesas y adem�s considero que es una de las aplicaciones XML con m�s futuro, dada la facilidad que nos proporciona para crear, mantener y manipular gr�ficos y sobretodo para incluirlos en otros vocabularios XML.

Hasta ahora siempre ha sido bastante complicado crear gr�ficos de forma din�mica y todav�a m�s dif�cil incluirlos en nuestros documentos. La soluci�n siempre ha pasado por soluciones propietarias muy vinculadas a determinadas plataformas y entornos.

Imaginemos, por ejemplo, que tenemos que desarrollar una aplicaci�n que debe generar informes de forma din�mica y que hay que distribuir por Internet en HTML y en PDF. Y supongamos que la informaci�n m�s importante de esos informes son gr�ficos que tienen que generarse con informaci�n que hay en una base de datos y que dicha informaci�n va cambiando constantemente (p. ej. cotizaciones de bolsa). Una posible soluci�n ser�a tener el contenido del informe en XML y enlazados los gr�ficos que podr�amos incluir f�cilmente al haberlos generado en formato SVG desde la base de datos. Para presentarlo en PDF podemos utilizar el FOP de James Tauber y para presentarlo en HTML lo generamos utilizando XSLT y podemos utilizar el plug-in de Adobe para mostrar los gr�ficos SVG o convertirlos en imagenes JPG mediante el conversor que viene con el CSRIO. Como podemos observar, las combinaciones son inmensas, y lo mejor de todo es que muchas de las aplicaciones que tenemos que utilizar ya estan creadas. Y todo esto por trabajar con un est�ndar como el XML.

Un ejemplo de c�digo SVG es el siguiente:

Documento SVG
<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg SYSTEM "svg-19990812.dtd">

<svg width="3in" height="3in">
    <g style="stroke: #000000">
   <line x1="0" x2="150" y1="150" y2="150"/>
   <line x1="0" x2="0" y1="0" y2="150"/>
   <text x="0" y="10">Resultados</text>
   <text x="150" y="165">Zona</text>
   <rect x="10" y="50" width="20" height="100"/>
   <text x="10" y="165">Norte</text>
   <text x="10" y="45">10</text>
   <rect x="50" y="110" width="20" height="40"/>
   <text x="50" y="165">Sur</text>
   <text x="50" y="105">4</text>
   <rect x="90" y="90" width="20" height="60"/>
   <text x="90" y="165">Este</text>
   <text x="90" y="85">6</text>
    </g>
</svg>

En el que pintamos unos gr�fics que vista el CSRIO Viewer tiene el siguente aspecto:

Documento SVG presentado en el visor CSRIO Viewer

Es un ejemplo sencillo, pero demuestra las enormes posibilidades de este lenguaje XML, ya que este c�digo lo podemos generar f�cilmente a partir de la informaci�n que tenemos en una base de datos y haberlo incorporado sin problemas a nuestros documentos XML. O con las herramientas que existen hoy en d�a ya podemos convertido en una imagen JPG.

.�VML

VML es un lenguaje XML para definir gr�ficos vectoriales desarrollado por Microsoft.

Tiene la ventaja de que ya es una realidad y que el IE5 es capaz de pintarlo y las aplicaciones que vienen con el Office 2000 ya son capaces de trabajar con �l. con las y hasta ahora pruebas que he realizado, he visto que, por ejemplo, los gr�ficos que realizamos en el Word 2000 utilizando las herramientas de dibujo, al exportarlos a HTML ya aparecen en este formato.

La desventaja es que s�lo Microsoft apoya este lenguaje y que por tanto s�lo sus aplicaciones lo soportan.

Personalmente prefiero el SVG, pero evidentemente el VML es una alternativa a tener en cuenta en ciertas condiciones: que la aplicaci�n de la que hablabamos anteriormente tuviera que funcionar en una intranet en la que todas las personas que se conectan lo hacen a trav�s del IE5.

Esta es la imagen de un gr�fico en VML visualizado en el IE5:

Ejemplo de imagen VML

Si observamos el c�digo de la p�gina HTML, veremos lo sencillo que es incluir c�digo VML en nuestras p�ginas:

  • Tenemos que declarar el "namespace" vml de manera que indicamos al procesador que dentro de nuestro HTML estamos incluyendo otro vocabulario XML.
  • <html xmlns:vml = "urn:schemas-microsoft-com:vml">
    
  • Y luego tenemos que declarar el control Active X que lo pinta.
  • <OBJECT classid=CLSID:10072CEC-8CC1-11D1-986E-00A0C955B42E 
    id=VMLRender></OBJECT>
    <STYLE>vml\:* {
    	BEHAVIOR: url(#VMLRender)}
    </STYLE>
    	

Para m�s informaci�n sobre el tema, pod�is visitar estas direcciones:

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP
ARTÍCULO ANTERIOR

SIGUIENTE ARTÍCULO