SVG (I). Introducción

SVG son las iniciales de Scalable Vector Graphics. Es un estándar de la W3C que define una gramática XML para describir gráficos de dos dimensiones.

SVG trata tres tipos de objetos gráficos: formas vectoriales (curvas y rectas), imágenes y texto. Estos objetos gráficos pueden ser agrupados, transformados, formateados y compuestos en objetos previamente creados. El conjunto de funcionalidades transformaciones anidadas (nested transformations), corte de patrones (clipping paths), mascaras, filtros, efectos y plantillas de objetos.

Los gráficos SVG pueden ser interactivos y dinámicos. Las animaciones pueden ser definidas y activas de modo declarativo o por medio de scripts. Es posible usar un script adicional con acceso al DOM de SVG para obtener aplicaciones más complejas.

Significado de SVG

Su nombre se debe a:

  • Scalable: Los gráficos SVG pueden ser mostrados con diferentes resoluciones.
  • Vector: Los gráficos tienen formato vectorial, líneas y curvas. Frente a los formatos raster (matriz de puntos) que almacenan información por cada pixel del gráfico.
  • Graphics: Proporciona la sintaxis para describir gráficos usando XML.

SVG: Presente y futuro de los gráficos vectoriales para la web.

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 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, se ve que ambos formatos, siendo de mapa de bits, tienen serias limitaciones.

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 se pueden encontrar páginas enteras creadas en él. Ahora bien, se trata de un formato de fichero patentado por un fabricante (Adobe, que compro Macromedia la empresa creadora del formato flash), 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) 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. El texto contenido en un gráfico SVG es editable: puede seleccionarse,  buscar, indexar… etc.

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 logotipo) 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.

Ventajas de SVG

  • Tiene todas las ventajas asociadas a un formato vectorial: es escalable, compacto, 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, etc.
  • 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.
  • Es compatible con los estándares actuales de la web y con los futuros. 
  • Soporte de hojas de estilo CSS. 
  • Será posible crear páginas con gran riqueza tipográfica 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, etc. 
  • Puede generarse dinámicamente en un servidor web como respuesta a instrucciones de Java, JavaScript, Perl o XML. 
  • 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 ficheros.

Una respuesta a SVG (I). Introducción

  1. […] SVG (I). Introducción: Introducción al estándar, sus ventajas y posibles usos. […]

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: