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

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP
ARTÍCULO ANTERIOR

SIGUIENTE ARTÍCULO