SVG / JavaScript

Para empezar diremos que SVG significa Scalable Vector Graphics y que define un lenguaje basado en XML para la construcción de gráficos vectoriales 2D con multitud de efectos y características avanzadas.

Repasando algunas de las tecnologías o estándares del W3, tenemos que:

  • XML o XHTML representan los datos, la información a representar. Algunos lenguajes basados en XML como MathML o CML definen conjuntos concretos de tags destinados a un fin específico como son el lenguaje matemático o químico.

  • CSS o XSL definen la presentación que tendrán los datos en diversos medios.

  • SVG define la representación de gráficos dentro de cualquier documento.

  • SMIL permite realizar animaciones basadas en tiempo.

SVG es el equivalente, basado en estándares, a la opción comercial de Macromedia: Flash. SVG es una recomendación del W3, el contenido de cada fichero es XML y no un formato binario cerrado.

 <?xml version="1.0"?>
 <svg xmlns="http://www.w3.org/2000/svg">
   <g style="fill-opacity:0.7; stroke:black; stroke-width:0.1cm;">
     <circle cx="6cm" cy="2cm" r="100" style="fill:red;"
       transform="translate(0,50)" />
     <circle cx="6cm" cy="2cm" r="100" style="fill:blue;"
       transform="translate(70,150)" />
     <circle cx="6cm" cy="2cm" r="100" style="fill:green;"
       transform="translate(-70,150)"/>
   </g>
 </svg>

Desde Febrero del 2004 la implementación de Mozilla que soporta SVG ha sido dotada con la posibilidad de cambiar el backend de renderizado SVG en función de la plataforma. Actualmente, el más avanzado es el basado en la GDI+ de Windows.

Implicaciones de este cambio:

  • Mozilla soporta documentos que contienen SVG, MathML, XHTML o XUL en un mismo documento. Esto es posible gracias a que Mozilla soporta espacios de nombres (XML Namespaces).

  • Todo este contenido puede ser accedido via scripting utilizando el SVG DOM, el cual es compatible con el XML DOM).

SVG es un lenguaje para la descripción de gráficos vectoriales en 2D en XML.

SVG permite la utlización de tres tipos de objectos gráficos:

  • Objetos gráficos vectoriales (líneas, elipses, rectángulos, etc). Estos pueden ser agrupados, formateados, transformados y compuestos para su visualización.

  • Imágenes.

  • Texto.

SVG soporta características avanzadas como:

  • Transformación anidadas (matrices de transformación).

  • Clipping Paths.

  • Alpha Masks.

  • Filtros gráficos.

  • Interactividad y dinamismo, soportandos 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 dentro de XHTML y SVG dentro del mismo documento.

El tipo MIME que utiliza SVG es "image/svg+xml" [RFC3023]. Se recomienda que los ficheros SVG tengan extensión .SVG o .SVGZ (en minúsculas) en todas las plataformas.

Espacio de nombre utilizado por SVG:

http://www.w3.org/2000/svg

DOCTYPE para la versión 1.0:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

DOCTYPE para la versión 1.1:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
ARTÍCULO ANTERIOR

SIGUIENTE ARTÍCULO

¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.