SVG - una introducción

facebook-svg gplus-svg twitter-svg

Que significa SVG

SVG es el acrónimo de Scalable Vector Grafics ( graficos vectoriales expandibles ), un estandard W3C ( World Wide Web Consortium ), basado en XML ( eXtensible Markup Language). Utilizamos SVG para crear imágenes vectoriales bidimensionales.
El SVG es una normativa abierta ( open standard ) y fue desarrollado por el W3C desde 1999.
Hoy en día la mayoría de los navegadores son capaces de reproducir graficos SVG exactamente como reproducen una imagen.

A diferencia de canvas

A diferencia de <canvas> donde los gráficos son dibujados de manera programática, en el SVG los elementos pertenecen al DOM ( Document Object Model ). Por ejemplo: si queremos dibujar un circulo, el circulo es en realidad una etiqueta ( tag ) <circle>, y un <script> puede referirse al circulo y lo puede manipular, casi de la misma manera como puede manipular un <div>.

El sistema de coordenadas en SVG

El origen del sistema de coordenadas en SVG, exactamente como en <canvas> es la esquina izquierda arriba del lienzo SVG. Por lo tanto el eje Y aparece al revés, comparado con un sistema normal de coordenadas .

Un documento SVG

Podemos fácilmente crear documentos SVG utilizando esta estructura:


<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
                   xmlns:xlink="http://www.w3.org/1999/xlink" 
	               width="106px" height="122px" 
				   viewBox="41 54 106 122">
				   
</svg>

Para entender el porqué de esta estructura lea acerca de los espacios de nombre en SVG y acerca de viewport y viewbox

El documento tiene que llevar la extensión .svg ( ejemplo.svg )
El documento SVG puede ser abierto directamente en el navegador.

SVG en el HTML5

Con la llegada de HTML5, podemos incrustar elementos SVG directamente en las páginas HTML, y en este caso ya no es necesario declarar los espacios de nombre.


<!DOCTYPE html>
<html>
<title>SVG dibujar un círculo
<body>
<svg viewBox="0 0 250 100" width="250" height="100">
  <circle cx="125" cy="50" r="40" stroke="#003300" stroke-width="4" fill="#6ab150" />
</svg>
</body>
</html>

La anchura y la altura del elemento <svg> pueden ser definidos con los atributos width y height como en el ejemplo anterior, pero también podemos utilizar el CSS con este propósito.



  

La explicación del código

Una imagen SVG comienza con una etiqueta <svg>. Es el contenedor ( el lienzo ) donde vamos a poner los gráficos que dibujamos.

La anchura y la altura del elemento <svg> pueden ser definidos con los atributos width y height respectivamente. También podemos utilizar el CSS con este propósito.

El elemento <circle> se utiliza para dibujar un círculo.

Los atributos cx y cy representan las coordenadas x e y del centro del círculo. Si cx y cy se omiten, el centro del círculo está en el punto x=0, y=0 ( esquina izquierda arriba del lienzo SVG ).
El atributo r define el radio del círculo ( en este caso 40px ).
El atributo stroke define el color del trazado ( del borde ).
El atributo stroke-width  define el grosor del trazado ( en este caso 4px ).
El atributo fill define el color de relleno. ( en este caso #6ab150 ).

Al final cerramos el contenedor SVG: </svg> .