Introducción
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">
Tutoriales
