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.