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.
