Dibujar con SVG en HTML5

Otra de las grandes novedades de HTML5 es el modelo de imagen basado en XML, Scalable Vector Graphics (SVG), este modelo al igual que canvas permite crear contenido visual atractivo e interactividad mediante un sencillo modelo de programación de declaraciones, Los objetos creados a través de SVG son guardados con la extensión .svg y después son llamados explícitamente a través con otro de los elementos que incorpora HTML5 <embed> o bien pueden ser incluídos directamente en el archivo html.

¡Si SVG no es compatible con tu explorador te aparecerá una alerta con un mensaje de error capturado a través de modernizr!

Las etiquetas svg, albergan en su interior el objeto o los objetos que serán creados ...

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> ... Los objetos ... </svg>

Los objetos y sus atributos ...

· rect -> permite crear elementos de cuatro lados
ATRIBUTOS: width="ancho" | height="alto" | stroke="color borde" | stroke-width="ancho borde" | fill="background" | filter="efectos"



· circle -> permite crear elementos circulares
ATRIBUTOS: cx="coordenada x" | cy="coordenada y" | r="longitud de radio" | stroke="color borde" | stroke-width="ancho borde" | fill="background" | filter="efectos"



· ellipse -> permite crear elementos circulares elípticos.
ATRIBUTOS: cx="coordenada x" | cy="coordenada y" | rx="longitud de radio x" | ry="longitud de radio y" | stroke="color borde" | stroke-width="ancho borde" | fill="background" | filter="efectos"



. line -> permite crear líneas
ATRIBUTOS : x1="coord" | y1="coord" | x2="coord" | y2="coord" | stroke="color borde" | stroke-width="ancho borde" | fill="background" | filter="efectos"



. Polygon -> Permite crear objetos poligonales con distinto número de lados.
ATRIBUTOS : points:"x,width heigh, ... ,y" | stroke="color borde" | stroke-width="ancho borde" | fill="background" | filter="efectos"



· polyline -> permite crear múltiples líneas.
ATRIBUTOS : points:"x,x y, ... ,y" | stroke="color borde" | stroke-width="ancho borde" | fill="background" | filter="efectos"



Ejemplo de efectos a través del atributo filter ....

Como se puede ver SVG es una utilidad muy completa y la que se le puede sacar mucho partido, para más información ir al siguiente enlace ... http://www.w3schools.com/svg/default.asp

Para usar modernizr pega este script en el head ...

<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>

Código para capturar la compatibilidad en el navegador de SVG con modernizr ...
Javascript ...

Código de los ejemplos SVG de este post ... HTML ...