SVG en HTML5

SVG (I)

Qué es SVG

SVG (Scalable Vector Grafics) que por sus siglas significa Vectores Gráficos Escalables y dicho así tal vez no lo entendamos, pero lo entenderemos mejor si decimos que es una aplicación para hacer dibujos, banners, gráficos, etc. tanto estáticos como animados.

Con SGV podemos hacer las mismas cosas que con canvas, pero ten cuidado ya que su forma de trabajar es diferente.

Utilizando canvas los dibujos son creados mediante píxeles (mapa de bits) en cambio  con SVG se crean mediante gráficos vectoriales, es decir, el dibujo se adapta al tamaño, de forma que al ampliarlo o reducirlo en la pantalla se muestra siempre uniforme y no muestra los contornos de los píxeles para ampliaciones muy grandes, algo así como Responsivo, tal vez en pantalla no tenga mucha importancia, pero ten en cuenta que si queremos en algún momento imprimirlo en un tamaño grande los dibujos hechos con SVG muestran un mejor acabado.

Características de SVG 

SVG es muy fácil de usar, ya que se basa en el lenguaje XML, es decir el mismo lenguaje de etiquetas que usa HTML, por lo que no tenemos que usar javascript ni otro lenguaje diferente del HTML para incorporar figuras SVG en la página, ya que el XML es el mismo lenguaje que utilizan tanto HTML como SVG y así podremos crear las figuras y dibujos con SVG mediante etiquetas que incorporamos al lenguaje HTML.

Incrustar elementos SVG en la página  se puede hacer desde el mismo código HTML. SVG dispone de una serie de etiquetas y atributos para introducir los elementos. A continuación crearemos un circulo en color verde, el cual es hecho mediante SVG:

El código que hemos puesto para poder verlo es el siguiente:

<svg width=200 height=200>

<circle cx=100 cy=100 r=90 stroke="blue" strokewidth=3 fill="green"/>

</svg>

Por ahora no explicare el código anterior ya que en los siguientes Blogs publicaremos como trabajar con SVG, aunque si eres observador te darás cuenta que atributos y etiquetas hacen que el circulo se vea en color verde en su relleno y azul en su borde.
Ahora bien al estar el código SVG formado por los mismos elementos que el HTML podemos también agregar los lenguajes CSS y javascript, recuerda que con CSS podemos indicar el estilo de los distintos elementos y con javascript podemos dar movimiento a los elementos creados con SVG y realizar otra serie de efectos (aparición, desaparición, agrandar, etc.). También podemos realizar estos efectos mediante CSS3 pero sin embargo también podemos crear animaciones mediante el código SVG, sin necesidad de utilizar javascript ni CSS3.

¿Cómo introducir código SVG en tu página web?

Anteriormente observamos que para introducir un elemento SVG en la página podemos utilizar la etiqueta <svg> ... </svg>, a lo cual te comento que este es el elemento contenedor dentro del cual dibujaremos los demás elementos y así mismo debemos indicar mediante los atributos witdh y height la anchura y la altura del elemento contenedor, o en su caso también podemos indicarlo mediante código CSS, lo importante es que siempre tenemos que dar una altura y anchura del elemento correspondiente.
Se que te estas preguntando si la única forma de crea un elemento SVG es agregando el código correspondiente dentro de tu página web, pero te informo, por si no lo sabias, que también podemos poner el elemento SVG en un archivo aparte, mismo que después se tendrá que incorporar a la página o en el sitio que queramos, solo tenemos que crear un nuevo archivo en el que incorporamos el código SVG.

El archivo deberá tener la siguiente sintaxis:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
               ... código del contenido de SVG

</svg>

La estructura es similar que cuando incrustas un elemento SVG directo a tu página web, el código va encerrado dentro de la etiqueta "svg", recuerda que al ser éste un lenguaje XML es conveniente poner en la etiqueta los atributos de este lenguaje es decir: <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> posteriormente pondremos el código en SVG y al final cerramos la etiqueta "svg".
Listo el archivo lo guardaremos aparte con la extensión .svg, por ejemplo circulo.svg, después este archivo lo mandaremos llamar desde nuetra página, a lo cual lo podemos hacerlo de varias formas:

• Como imagen: agregándolo dentro del atributo src:

<img src="circulo.sgv" alt="circulo" width="200" height="200">

• Como iframe: incrustandolo dentro del atributo src:

<iframe src="circulo.svg" width="200" height="200"></iframe>

• Con la etiqueta embed; atributos src, width y height:

<embed src="circulo.svg" height="200" width="200" />

• Con la etiqueta object; atributos data width y height:

<object data="circulo.svg" width="200" height="200"></object>

Te recuerdo nuevamente que en todos los casos tenemos que incluir la ruta del archivo, así como la altura y anchura de la ventana donde veremos el

SVG (atributos "height" y "width").

Compatibilidad con Navegadores

Si bien SVG es compatible con todos los navegadores,  con Internet explorer sólo es compatible a partir de la versión 9 en adelante,  si utilizas versiones anteriores, será necesario utilizar un plugin (Adobe SVG Viewer), mismo que puedes descargar desde la página de Adobe, descargar plugin.

Pero ¿cómo sabremos si el navegador es compatible o no con SVG?, muy sencillo, podemos avisarle al usuario utilizando un tip muy útil, ¿recuerdas el código anterior del ejemplo del circulo verde? no?, no te preocupes lo vuelvo a poner,:

<svg width=200 height=200>
<circle cx=100 cy=100 r=90 stroke="blue" strokewidth=
3 fill="green"/>
Por favor utilizar un navegador compatible con SVG (Chrome, Firefox, Opera o Safari).
</svg>

Como te puedes dar cuenta eh agregado un texto de aviso(texto en amarillo), mismo que esta dentro de la etiqueta SVG, OJO este aviso sólo se verá si el navegador no es compatible, de lo contrario mostrara el elemento SVG correspondiente, y así  de
esta forma podremos advertir al usuario de que la página no mostrara los elementos SVG.

Estén muy atentos, próximamente estaré publicando el siguiente blog, en el cual hablaremos de las figuras básicas en SVG.