Todos los navegadores que sean serios y puedan soportar transiciones, animaciones y transformaciones también pueden soportar SVG ( Scalable Vector Graphics), un formato de imágenes vectorizadas que facilitan mucho el desarrollo sobre todo para dispositivos móviles.

Vamos a hacer el ejemplo mas basico de todos, crear un Botón de Play, el cual solo toman el codigo de fig1. lo graban como svg y lo abren desde cualquier navegador.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 0,400 200,200"/>
</svg>

Pero si queremos meter la imagen dentro de una pagina debemos darle un poco mas de información, por ejemplo.

See the Pen México en SVG by Francisco Moreno (@fmorenor) on CodePen.

<body>
	<h1>Contenido Base SVG</h1>
	<img src="svg/play.svg" alt="play" style="width: 50px; height: 50px"/>
	
</body>

Esto tiene sus ventajas sin embargo si ponemos el SVG directamente en el codigo HTML tenemos capacidades de manejo de CSS, y nos ahorra un poco mas de tiempo de request a un archivo extra, pero esto ya es por el tipo de diseño que hagamos, sobre todo si es para dispositivos moviles.

Viewbox es un atributo que se utiliza cuando creamos formas SVG. Si piensamos en un documento como un lienzo, el viewBox (o área de visión) es la parte del lienzo que deseamos que el espectador vea. A pesar de que la página puede cubrir la pantalla completa del equipo, la figura sólo puede existir dentro de esa área de visión que hemos definido. Viewbox indicar al parser que debe hacer un zoom sobre esa zona. Esto elimina el espacio en blanco extra.

El atributo viewBox actúa como una lente que disminuye o aumenta el punto o la zona enfocada.

Ahora algo muy simple vamos a alterar el color del polígono al archivo .svg

 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<style type="text/css">
	polygon{ fill:blue}	
</style>
<polygon points="0,0 0,400 200,200"/>
</svg>

Ahora si le agregamos un poco de efectos tenemos un codigo simple asi:

<body>
	<style>
	polygon{fill: red; stroke: black; stroke-width: 9px; transition: 1s all linear; }
	polygon:hover{fill: black;}
	</style>
</body>
</html>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<polygon points="10,19 10,390 190,200"/>
</svg>

 Animando un mapa en SVG

Bueno ahora vamos a crear una efecto de animación utilizando uno de los recursos grandioso del internet, los mapas de los países disponibles en SVG, y para este ejemplo utilizaremos el mapa de México.

En el archivo descargable  podrán ver que cada estado se puede definir por un PATH y una cadena de coordenadas, así que empecemos montando el mapa en nuestro html y haciendo un simple hover sobre cada uno de los estados.

Nos vemos en la próxima!!!, cualquier sugerencia o duda o reto échenle en  los comentarios. o puedes ver el resultado en codigo  aqui.

Las herramientas mas usadas para crear SVG de manera simple son:

  • Adobe Illustrator tiene una manera de exportar a SVG.
  • Inkscape ( http://inkscape.org), una alternativa opensource.
  • Raphael, que es una pequeño framework de Javascript para manipular y crear SVG, este lo veremos mas adelante en otro post.