SVG - una introducción
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>.
Por defecto
- la esquina izquierda arriba de la ventana grafica se encuentra en un punto de coordenadas {x:0,y:0}
- la anchura de un elemento SVG es de 300px y la altura de 150px.
- el tamaño de la ventana grafica ( viewport ), o sea: el contenido del elemento SVG, es de 300/150 unidades de usuario.
- una unidad de usuario equivale a 1 pixel.
Podemos controlar i modificar toda esto utilizando el atributo viewBox, los atributos width y height, transformaciones etc...
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.
Definimos el sistema de coordenadas local utilizando el atributo viewBox. En este caso viewBox="0 0 250 100". Esto quiere decir que la ventana grafica utilizada para dibujar el circulo empieza en el punto {x:0,y:0}, tiene una anchura de 250 unidades de usuario y una altura de 100 unidades de usuario.
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> .
Importante
En los ejemplos anteriores he especificado tanto el atributo viewBox como la altura width y la anchura height del elemento SVG. Estos atributos son opcionales. Si no los especificamos, por defecto el tamaño del elemento SVG es de 300px/150px.
Si especificamos solo el viewBox, por defecto el elemento SVG toma toda la anchura disponible ( por ejemplo la anchura del elemento padre ). El elemento guarda la misma relación de aspecto y la altura será calculada en función del parámetro que decide la altura del atributo viewBox.
En el ejemplo anterior el viewBox = "0 0 250 100". Suponiendo que la anchura disponible es de 500px la altura del elemento svg será de 200px.