Generando imagenes SVG

Hace poco he estado trabajando en un proyecto para una aplicacion web, uno de los valores agregados que trato de incorporar a la aplicacion es el manejo de estadisticas, entonces fue cuando decidi introducirme mas a lo que es la generacion de imagenes, especificamente en el uso de graficas para la representacion de datos.

Iniciando por lo simple, busque algunas graficas basadas en CSS, pequeñas graficas de barras, sencillas y de codigo muy liviano. La simpleza es una ventaja y en el caso de la programacion, como muchos sabran, menos es mas.

Se que lenguajes como PHP ofrecen soluciones mucho mas poderosas como un GDI para la manipulacion de imagenes, pero todo tiene su costo, y esto puede hacer a una aplicacion mas lenta, cargando una pagina con imagenes, volviendola mas pesada, ademas de que no todos los hosts tienen esta opcion instalada por default, etc.

Investigando un poco mas me tope con SVG.

SVG (scalable vector graphics) es un estandar abierto acogido por la W3C para el manejo de imagenes para la web basado en vectores, una tecnologia que viene desarrollandose desde hace ya un par de años.

SVG esta basado en XML, y como muchas de las nuevas tecnologias esta aun en fase de desarrollo, sin embargo es algo que promete mucho.

Como todos sabemos XML ha venido a dar un impulso tremendo a la web, pero que es el XML y como funciona? Si no conoces la respuesta a estas interrogantes te recomiendo que descubras mas de XML en este sitio.

Entendiendo un poco lo que es XML
Hare un pequeño parentesis para hacer una referencia breve de lo que trata XML.
XML es un lenguaje de etiquetas (markup) muy parecido al HTML. Pero cual es su funcion? a grandes rasgos XML viene a ser una forma de representar la informacion, y esa es su unica funcion, XML por si mismo no hace nada. Es la aplicacion que le demos a esa informacion lo que hace a XML una tecnologia muy poderosa. Es un concepto que de principio puede parecer dificil de entender pero veamoslo de esta manera..

Este es un ejemplo basico de un documento XML:

<?xml version="1.0" encoding="ISO-8859-1"?>
<catalogo>
 <cd idnum="1">
  <artista>The Strokes</artista>
  <album>Room on fire</album>
 </cd>
 <cd idnum="2">
  <artista>Funeral for a friend</artista>
  <album>Hours</album>
 </cd>
</catalogo>

En este documento podemos ver, que estamos almacenando la informacion para un catalogo de musica; las etiquetas en XML se explican a si mismas (cd, artista, album) y somos nosotros quienes definimos tales etiquetas, obviamente hay reglas y manera de definir un el contenido de un documento para poder validarlo, pero no entrare mucho en esos detalles.

Aplicaciones del XML
Asi que yo teniendo este documento, podria desarrollar una aplicacion que interprete dicha informacion contenida en el documento XML, la aplicacion por ejemplo, podria administrar un catalogo de musica. Ese es el punto fuerte de XML y lo que me lleva al tema original.

XML se ha extendido a muchas aplicaciones, algunas de las mas conocidas son el RSS, ASX, SOAP y porsupuesto SVG. Estas solo por mencionar algunas.

SVG
SVG como ya habia dicho, es usado para definir graficas basados en vectores utilizando XML, son graficas escalables, es decir, como son vectores, estan pueden ser agrandadas sin perder definicion, algo que ocurriria con las imagenes de bits y que comunmente se le conoce como ‘pixelado’. SVG se integra con otros estandares como DOM y XSL, permite animaciones y aplicacion de filtros.

El formato en si mismo ha sido definido por grandes compañias como Apple, Adobe, IBM, Kodak entre otras organizaciones.El gran competidor de SVG es Flash, pero a diferencia de este, SVG trabaja en conjunto con otros estandares ( ej. DOM y XSL ), ademas de ser de codigo abierto. Cualquiera de nosotros con el conocimiento previo y una herramienta como notepad puede crear un elemento SVG.

La gran desventaja de SVG es que aun no es completamente soportado por todos los navegadores, pero ya hay planes futuros de soportar totalmente este estandar por parte de grandes compañias como Microsoft y Mozilla. A partir de la version 1.5 de Mozilla Firefox SVG es soportado de manera nativa, aun no con todas sus caracteristicas pero sin duda un gran avance. Adobe desarrollo un plugin gratuito que nos permite ver este formato en el resto de los navegadores.

Algunas aplicaciones como Illustrator, Corel Draw, entre otras permiten exportar imagenes de vectores en este formato y el numero de editores sigue creciendo.

En la proxima pagina mostrare algunos ejemplos de SVG.

3 Comments

  • isaac moreno says:

    links rotos de las imagenes de ejemplo

  • Daniel says:

    Pues creo que la tendencia del software en estos dias es el uso de estos formatos abiertos. Illustrator ya maneja SVG y como sabemos Adobe ahora es dueño de Macromedia, asi que no me sorprenderia ver en un futuro ver a Flash usando SVG.

    Ojala y pronto escuchemos mas y mas de SVG, los rumores dicen que Firefox añadira soporte para texto SVG asi que solo nos queda esperar.

  • David Lozano says:

    Hola,
    Me parece muy importante que por fin exista un lenguaje para dibujar imágenes vectoriales abierto y basado en xml. Sólo falta que las aplicaciones empiecen a implantarlo.
    Aunque no veo yo que en un futuro flash, powerpoint y otros implementen la opción de exportar a svg. De momento he encontrado una aplicación gratuita que se llama Inkscape, que es una especie de Illustrator y permite entre otras cosas la conversión de formatos a SVG.

Trackbacks / Pingbacks

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*