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...
Los gráficos SVG, como en este ejemplo de un mapa de Viena, pueden generarse dinámicamente en un servidor, a partir de los datos solicitados por el visitante (ver la dirección del ejemplo más abajo.)
A diferencia de otros formatos gráficos, el contenido de un archivo SVG es texto normal. Esto significa que puede editarse incluso con un bloc de notas. Aquí tenemos un ejemplo del código de un svg. Está escrito en xml; los diferentes componentes del gráfico se identifican en cada carpeta (por ejemplo, rect, polygon...) y los parámetros figuran al lado.
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 es un editor básico de gráficos vectoriales que tiene como formato nativo el SVG. cuenta con las herramientas de dibujo habituales en estos programas y una paleta de propiedades en las que se definen las propiedades de cada objeto, tales como color de relleno y contorno, transparencia...
Jasc Trajectory Pro = Jasc WebDraw. 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).
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.
Recogemos también algunos gráficos de ejemplo,(los ejemplos propios creados con Trajectory).
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...
Los gráficos SVG, como en este ejemplo de un mapa de Viena, pueden generarse dinámicamente en un servidor, a partir de los datos solicitados por el visitante (ver la dirección del ejemplo más abajo.)
A diferencia de otros formatos gráficos, el contenido de un archivo SVG es texto normal. Esto significa que puede editarse incluso con un bloc de notas. Aquí tenemos un ejemplo del código de un svg. Está escrito en xml; los diferentes componentes del gráfico se identifican en cada carpeta (por ejemplo, rect, polygon...) y los parámetros figuran al lado.
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 es un editor básico de gráficos vectoriales que tiene como formato nativo el SVG. cuenta con las herramientas de dibujo habituales en estos programas y una paleta de propiedades en las que se definen las propiedades de cada objeto, tales como color de relleno y contorno, transparencia...
Jasc Trajectory Pro = Jasc WebDraw. 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).
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.
Recogemos también algunos gráficos de ejemplo,(los ejemplos propios creados con Trajectory).