Curso SVG (Scalable Vector Graphics)

Autor, Contacto

Página del Autor |
Contacto |

Estándares W3C

JAVA en Usabilidad Web

| |

Curso SVG (Scalable Vector Graphics)
Tecnologías XML

SVG es una tecnología para describir gráficos de dos dimensiones, en XML. Sofisticadas y útiles aplicaciones SVG pueden ser posibles con la colaboración de lenguajes de servidor y bases de datos. SVG pertenece al curso integral XML, como con otros cursos, su conocimiento, abre posibilidades profesionales importantes, esto es, asociados al estudio de bases de datos (Postgres, MySQL) y Java o PHP. El acceso a este curso, como con todos, depende de mantener una correlatividad temática, en este caso con Estandares web, MySQL y XML integral.

Tecnologia SVG

Desarrollo de Productos Tecnológicos en XML

Opcional en el curso Integral XML, Base de Datos, PHP 6:

- Desarrollos con XML, XPath, XSLT y MySQL
- MySQL y XPath
- Sistemas de Publicación basados en XML
- Sistemas de Comunicación basados en XML
- Desarrollo de APIs para XML
- Desarrollo de Web Services XML
- Análisis de Datos con XML - XSL

SVG significa, Scalable Vector Graphics, una gramática XML para el desarrollo de gráficos vectoriales, en un espacio de nombre XML. Scalable significa que incrementa o disminuye uniformemente. Los graficos SVG pueden ser desplegados en forma independiente de la resolución de pantalla, también pueden ser magnificados para la observación de detalles.

Los vectores gráficos contienen objetos geométricos, tales como, lineas y curvas, estos dan gran flexibilidad, comparados con formatos como PNG o JPeg, donde la información esta almacenada para cada pixel del gráfico.

Las gramáticas XML existentes representan información textual o información cruda de ámbitos financieros, con capacidades mas limitadas que el elemento HTML, IMG. SVG viene a ocupar ese bache, ofrece gráficos vectoriales, junto con información estructurada, en un espacio de nombre XML.

SVG se escribe en texto plano, lo que abre posibilidades de generar gráficas en tiempo real para distintos terminales, incluida, la telefonía celular y una multitud de aplicaciones que manejan mapas, como las medio ambientales.

Ventajas de la utilización de SVG

SVG permite la utilización de tres tipos de objetos gráficos:

Objetos gráficos vectoriales (lineas, elipses, rectangulos, etc). Estos pueden ser agrupados, formateados, transformados y compuestos para su visualización.
Imágenes.
Texto.

SVG soporta caracteristicas avanzadas como:

Transformación anidadas (matrices de transformación).
Clipping Paths.
Alpha Masks.
Filtros gráficos.
Interactividad y dinamismo, soportados tanto de forma declarativa como vía scripting.

El SVG DOM permite a los lenguajes de script el acceso a todos los elementos, propiedades y atributos que componen un documento SVG. Además, existe la posibilidad de asignar eventos a los distintos elementos (onmouseover o onclick).

Gracias a la estandarización de los elementos en SVG y su integración con XHTML, podemos tener conviviendo scripts XHTML y SVG dentro del mismo documento. El tipo MIME que utiliza SVG es "image/svg+xml" [RFC3023].

Ventajas de utilizar SVG:

Renderizado con antialiasing.
Patrones de relleno y gradientes.
Filtros y efectos avanzados.
Clipping.
Animaciones.
No pierde calidad si se hace zoom o si se redimensiona.
Puede escalarse.
Ideal para ser impreso.
Pueden mostrarse de forma progresiva (igual que los GIF), no teniendo que esperar a que todo el documento sea descargado.
Pueden distribuirse en formato comprimido GZIP para la reducción del tiempo de descarga .SVGZ.
Pueden ser indexados y buscados debido a que su contenido es XML y es textual.
Pueden ser transformados por hojas de estilos (XSL o CSS).
Integración con otras tecnologias XML del W3 y compatible con:
XML 1.0
XML Namespaces
XLink y XML Base para la referencia a URIs
Xpointer
CSS
XSL
DOM nivel 1 y 2 incluyendo DOM-Style y DOM-Event
SMIL 1.0. Sólo algunas de sus funcionalidades
HTML 4 y XHTML 1.0
UNICODE
Accesibilidad a contenidos web (WAI)

Opciones de uso SVG en páginas web

This is a slightly modified version of a sample that shipped with Jasc WebDraw

SVG puede ser usado como:

A stand-alone SVG Web page
Embebido por referencia
Embebido inline
A través de links externos
A través de CSS
A través de XSL

SVG y los agentes de usuario

Firefox: implementa SVG en forma nativa desde su versión 1.5. A través del tiempo fue mejorando el cumplimiento del estándar, pero con alto consumo de procesador. En la nueva versión 3.5 de Firefox se puede comprobar que el render SVG se ha modificado y mejorado.
Opera: al igual que Firefox también implementa SVG en forma nativa, pero con poco consumo de procesador. La versión 9.5 Beta, incorpora la posibilidad de llamar en forma externa a una imagen en formato svg.
MSIE: No implementa SVG, por lo que se debe conseguir una extensión de la firma Adobe. Este módulo externo no permite mezclar SVG con HTML (XHTML) por lo que la funcionalidad es menor que con los navegadores mencionados arriba. Microsoft no ve con futuro a este estándar por lo que apostó al VML el cual tiene mucha menos funcionalidad que el SVG.
Safari: Su versión 3.1 (para computadores con sistema operativo Windows o Mac OS X) implementa SVG tanto para imágenes como para texto avanzado.
Chrome: Desde su primera versión implementa SVG de forma nativa (ya que utiliza WebKit).

En resúmen:

Poder crear gráficos vectoriales escalables con estándares web W3C (XML), con capacidad de proceso con otras tecnologías Estándares, tales como XSL, sobre un archivo de texto, con capacidades para ser generados en forma dinámica desde instrucciones Java, PHP, Perl y posibilidades de ser generados en tiempo real con la colaboración de una base de datos (MySQL, Postgres) formando parte de aplicaciones para cualquier plataforma, incluida la telefonia celular, genera enormes posibilidades profesionales.

Página del Autor de Usabilidad web |

Stds W3C, PHP, MySQL, MySQLi, SQLite, PostgreSQL
Desarrollo de software basado en web
Desarrollo de software en Java, Python y C++
Consultoría en Usabilidad, Accesibilidad y Estándares Web W3C
Diseños Centrados en el Usuario (DCU)
Miembro Asociación Profesionales de Usabilidad EEUU
Consultor independiente: Usabilidad, AI, y Estándares web W3C
Cursos en Buenos Aires, Argentina
http://www.usabilidadweb.com.ar/