SVG / JavaScript

Para empezar diremos que SVG significa Scalable Vector Graphics y que define un lenguaje basado en XML para la construccin de grficos vectoriales 2D con multitud de efectos y caractersticas avanzadas.

Repasando algunas de las tecnologas o estndares del W3, tenemos que:

  • XML o XHTML representan los datos, la informacin a representar. Algunos lenguajes basados en XML como MathML o CML definen conjuntos concretos de tags destinados a un fin especfico como son el lenguaje matemtico o qumico.

  • CSS o XSL definen la presentacin que tendrn los datos en diversos medios.

  • SVG define la representacin de grficos dentro de cualquier documento.

  • SMIL permite realizar animaciones basadas en tiempo.

SVG es el equivalente, basado en estndares, a la opcin comercial de Macromedia: Flash. SVG es una recomendacin 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 implementacin de Mozilla que soporta SVG ha sido dotada con la posibilidad de cambiar el backend de renderizado SVG en funcin de la plataforma. Actualmente, el ms 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 descripcin de grficos vectoriales en 2D en XML.

SVG permite la utlizacin de tres tipos de objectos grficos:

  • Objetos grficos vectoriales (lneas, elipses, rectngulos, etc). Estos pueden ser agrupados, formateados, transformados y compuestos para su visualizacin.

  • Imgenes.

  • Texto.

SVG soporta caractersticas avanzadas como:

  • Transformacin anidadas (matrices de transformacin).

  • Clipping Paths.

  • Alpha Masks.

  • Filtros grficos.

  • Interactividad y dinamismo, soportandos tanto de forma declarativa como va scripting.

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

Gracias a la estandarizacin de los elementos en SVG y su integracin 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 extensin .SVG o .SVGZ (en minsculas) en todas las plataformas.

Espacio de nombre utilizado por SVG:

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

DOCTYPE para la versin 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 versin 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.