Programación en castellano
Inicio > Tutoriales > Internet > XML > SVG y VML > Curso de XML
-Tutoriales

Curso de XML


SVG y VML

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:

 
Patrocinados
 

Copyright © 1999-2007 Programación en castellano. Todos los derechos reservados.
Formulario de Contacto - Datos legales - Publicidad

Hospedaje web y servidores dedicados linux por Ferca Network

red internet: musica mp3 | logos y melodias | hospedaje web linux | registro de dominios | servidores dedicados
más internet: comprar | recursos gratis | posicionamiento en buscadores | tienda virtual | gifs animados