El contenido gráfico de las páginas web parece estar bien cubierto por los dos formatos usuales de fichero: GIF y JPG. Cada uno de ellos tiene sus usos óptimos y, aparentemente, puede parecer que que ya no hace falta nada más para añadir imágenes a las páginas. Sin embargo, al analizar las cosas en más detalle, nos percatamos de que ambos formatos, siendo de mapa de bits, tienen serias limitaciones (tal como comentamos en los artículos dedicados a los formatos gráficos.)
Desde hace unos años, el formato vectorial Shockwave Flash, o simplemente Flash, se ha convertido en una alternativa cada vez más utilizada. Flash tiene muchas ventajas y, de hecho, hoy podemos encontrar páginas enteras creadas en él. Ahora bien, se trata de un formato de fichero patentado por un fabricante (Macromedia), y puede modificarlo a voluntad. Además, y a pesar de las numerosas mejoras que cada versión de Flash incorpora, éste es una solución externa a lo que es el lenguaje de creación de páginas web, el html. Por estas y otras razones, surgió la iniciativa de crear un formato estándar de fichero vectorial para la web, y así el consorcio de la www (http://www.w3.org/Graphics/SVG/) ha desarrollado el nuevo formato SVG (de Scalable Vector Graphic.)
¿Para qué SVG?
¿Qué necesidad hay de un nuevo formato gráfico? Básicamente, para superar las limitaciones de los ficheros de mapa de bits, los omnipresentes GIF y JPG. Además, otros formatos vectoriales ya existentes, como SWF, no estaban diseñados inicialmente para la web; eran más bien un formato para aplicaciones multimedia.
SVG se ha creado desde un principio como una forma más del lenguaje XML, el futuro lenguaje de creación de páginas web y muchos otros documentos. Se trata de un lenguaje extensible (es decir, se pueden añadir definiciones propias, aún manteniendo la compatibilidad con las definiciones estándar) y que separa por completo contenido de presentación; un mismo fichero xml puede representarse de diferentes maneras en función de dónde lo abrimos: el ejemplo que suele citarse es el de una definición de número telefónico, que se mostrará numéricamente y puede marcarse directamente en un teléfono, o puede mostrarse como registro de una base de datos o incluso en forma de gráfico (por ejemplo, su situación en un mapa o un logo) en un terminal gráfico de ordenador.
Cuando el lenguaje XML sea el estándar para la creación de páginas web, los ficheros SVG serán una parte más de las páginas, no un fichero accesorio.
¿Qué ofrece SVG?
Repasemos las ventajas del formato SVG y sus posibilidades.
- Tiene todas las ventajas asociadas a un formato vectorial (las que comentamos en las páginas de diseño gráfico): es escalable, compacto, con formas siempre editables a través de curvas Bézier, con contornos suavizados, transparencias, y capaz de incluir, si es preciso, bitmaps.
- El tamaño de los SVG es muy compacto.
- El texto que incluyen es editable: admite las fuentes escalables más comunes, como TrueType o Type 1. Esto supone una diferencia enorme con los actuales GIF o JPG: el texto que contienen se puede editar, seleccionar, ser indexado por los buscadores...
- La calidad de color es excelente; el color del gráfico se puede calibrar con los sistemas estándar de gestión de color.
- El fichero SVG no es binario: se trata de un fichero de texto normal y corriente. Esto significa que se puede editar incluso en el Bloc de notas, y sus contenidos se pueden indexar, buscar...
- Es compatible con los estándares actuales de la web y --lo que es más importante-- con los futuros.
- Soporte de hojas de estilo CSS. Esto significa que con las hojas de estilo podemos modificar, de la forma más poderosa y fácil, ¡incluso los gráficos de las páginas web! El control y poder creativo que esto supone es insuperable.
- Será posible crear páginas con una riqueza tipográfica y de layout sin precedentes, sin sacrificar la accesibilidad del contenido escrito.
- Puede incluir código (scripts) que modifican el gráfico dinámicamente en función de las necesidades.
- Al ser XML, es un formato extensible: los fabricantes podrán adoptarlo como formato nativo de sus aplicaciones, añadiendo las características específicas que deseen, pero siempre mantendrá la compatibilidad básica y universal con toda aplicación que reconozca el formato.
- Admite efectos como sonido, efectos visuales al hacer clic o mover el ratón, etiquetas informativas...
- Puede generarse dinámicamente en un servidor web como respuesta a instrucciones de Java, JavaScript, Perl o XML. Por ejemplo, pueden crearse al momento gráficos de excelente calidad con las cotizaciones de bolsa en tiempo real; un reloj analógico, con minutos y segundos, requiere sólo 2K de código.
- SVG puede llegar a simplificar extraordinariamente el "workflow" para la web. En una aplicación única se podrá generar casi todo el contenido de las páginas, y convertirse en un formato universal: todos los programas podrán abrir todo tipo de ficheos. Los gráficos SVG no seran, como hasta ahora, una versión mutilada de un gráfico que ha pasado por varias aplicaciones. Se ahorraran conversiones, pasos de un programa a otro, tareas de optimizar, cambiar de tamaño...
Este formato parece el sueño de todos los diseñadores hecho realidad. Ciertamente, las posibilidades están ahí. Pero aún hay un largo camino a recorrer. Las soluciones --o los apaños-- actuales (html + flash) tienen vigencia asegurada durante unos años. De momento, Flash ofrece mucha más interactividad, una implantación creciente y facilidad de uso. Casi el 80% de los navegadores pueden ver películas flash. Así, ¿Se trata de una batalla perdida antes de comenzar? ¿Sucederá lo mismo que con el formato PNG? Pese a sus excelentes cualidades, PNG no ha llegado a imponerse a los GIF o JPG, que son la norma en los gráficos para la web. De hecho, técnicamente es superior en algunos aspectos, pero sigue con las limitaciones de un formato bitmap, cosa que ha dificultado que llegara a ser utilizado de forma habitual.
La situación con los SVG es algo diferente, porque no pretende sustituir un formato que funciona perfectamente como el de Flash, sino abrir todo un nuevo mundo de posibilidades en el diseño web. Ver algunos ejemplos de lo que aportará SVG a la web nos abre los ojos a ideas sorprendentes.
Herramientas para crear y ver SVG.
El formato está lejos de ser algo común, pero ya hay aplicaciones pioneras que permiten crear este tipo de gráficos. Tal como comentamos, es previsible que con el tiempo aparezcan filtros de exportación para otras aplicaciones, o que los nuevos programas ya incorporen la opción de serie. Actualmente, sólo un puñado de programas tienen capacidad de crear SVG. Sin duda, en unos meses aparecerán muchos más (en las páginas del consorcio de la www se informa puntualmente). De momento, tenemos:
- Adobe Illustrator 9. La espléndida nueva versión de Illustrator, llena de interesantes novedades, está plenamente enfocada a la creación de gráficos web, incluyendo SVG.
- Corel Draw (versiones 9-10); dispone de un plugin de exportación a SVG.
- Mayura Draw, un programa poco conocido. Es una aplicación de dibujo vectorial básica, pero con el aliciente de ser minúscula, rápida y fiable...y freeware (versión 2). La versión 3 es comercial - shareware, y es la que permite guardar como SVG.
- Jasc Trajectory Pro. Un nuevo programa del mismo fabricante que Paint Shop Pro. En este programa SVG es el formato nativo, es decir, se trata de una solución pensada desde un principio para la creación de gráficos SVG. Existe una versión "preview" disponible en la web (www.jasc.com) De momento, el programa no se comercializa. La versión comentada, aunque plenamente operativa, tiene algunas pequeñas deficiencias.
Recursos y ejemplos.
Recomendamos visitar las páginas del consorcio de la www (http://www.w3.org/Graphics/SVG), o el excelente sitio de Adobe (www.adobe.com/SVG), desde donde accediremos a las últimas noticias sobre el desarrollo de este formidable adelanto en el diseño para la web. Una nueva web dedicada al tema es SVG 101, en www.svg101.com. Encontraremos enlaces a páginas con ejemplos, herramientas para crear y ver los gráficos, tutoriales....
En http://www.carto.net/papers/svg/text_e.html vemos una aplicación de SVG prototipo: mapas generados dinámicamente, a partir de una selección de información por parte del visitante. Un modelo de lo que se podrá hacer con SVG: generar gráficos a medida, en función de las necesidades del usuario, la fecha y hora, según el tipo de dispositivo visualizador...
Y claro, no podrían faltar en este artículo algunos ejemplos de tanta maravilla. Para ver los SVG hace falta, de momento, un plugin. El más cómodo de instalar es el SVG Viewer que ofrece gratis Adobe en el mencionado sitio.
Algunos ejemplos de SVG.
NOTA: Ejemplos propios creados con Trajectory.
Un reloj analógico que tiene sólamente un tamaño de fichero de 2k.
Un gráfico de ejemplo creado con Jasc Trajectory Pro (Preview). El programa, a a pesar de ser una herramienta muy básica, es capaz de crear sofisticados efectos de transparencia con las formas vectoriales.
NOTA: Para visualizar los ejemplos de SVG debes tener instalado el 
SVG Viewer que ofrece gratis Adobe.