svg

Google ya indexa SVG, mientras IE9 mejora su implementación

SVG, el estándar del w3c para gráficos vectoriales, está dando mucho de qué hablar. Hasta ahora su uso no ha sido muy extendido, e incluso muchos diseñadores y programadores web ni siquiera lo conocen. Es posible que esto cambie poco a poco.

Ejemplo en SVG

Estos días ha habido dos importantes novedades que seguro ayudarán a impulsar esta tecnología.

SVG y la web

Los mapas de bits no escalan (Y nunca mejor dicho), por lo que en numerosas situaciones es preferible utilizar imágenes vectoriales. Por ejemplo, los escritorios de Linux ya están permitiendo emplear iconos vectoriales, de modo que se vean siempre bien definidos independientemente de su tamaño o de la resolución de la pantalla. Existen muchos formatos propietarios, pero, como siempre, para garantizar la interoperabilidad es preferible utilizar estándares, y ese es el formato SVG, que es un lenguaje para describir imágenes y aplicaciones gráficas en XML.

En el mundo web es igualmente interesante poder empotrar imágenes dinámicas generadas mediante SVG. Por ejemplo, hace un tiempo quise hacer unos mapas de densidades de población por municipios generados de forma automática para la Wikipedia. En realidad es muy sencillo. En ese caso podemos partir de una imagen con un objeto por cada término municipal, y mediante un editor de SVG (Por ejemplo, Inkscape) editar las propiedades del objeto y establecer como ID el código postal del municipio. De ese modo, podremos acceder mediante DOM al objeto que representa cada término municipal para posteriormente establecer el color de fondo dependiendo de su densidad (Expresiones regulares al rescate).
Mapa de España por provincias generado utilizando PHP y SVG

Y es que a veces nos complicamos mucho la vida, como por ejemplo dibujando a pelo polígonos sobre la API de Google Maps, cuando incluso podemos empotrar directamente imágenes SVG en un mapa de Google.

A día de hoy, la mayoría de los navegadores permiten visualizar directamente imágenes vectoriales SVG dentro de un documento XHTML, pero como a menudo sucede, Internet Explorer no renderiza de forma nativa SVG. ¿Qué podemos hacer en esos casos? Muy sencillo. Convertir dinámicamente a un mapa de bits. En el caso de PHP no he encontrado ninguna biblioteca o clase que permita la conversión de forma eficaz, sin embargo existen utilidades en la línea de comandos a las que podemos llamar para que realicen conviertan al formato deseado (Como el propio Inkscape o la utilidad convert de ImageMagick).