Esta es una etiqueta nueva en
HTML5, y nos permite introducir gráficos de vectoriales en un documento web de forma nativa.
Como bien sabemos,
SVG es un lenguaje para descripción de gráficos en
2D usando
XML, lo que significa que cada elemento esta disponible dentro del SVG
DOM, y al mismo tiempo permite incluir eventos
JavaScript dentro de estos elementos.
En SVG cada figura dibujada es considerada un objeto, de modo que si se cambian loa atributos de un objeto, el navegador esta en capacidad de dibujar automáticamente toda la figura.
Una de las grandes ventajas que SVG trae consigo, es la independencia de la resolución, esto significa que si se amplia la imagen, la calidad de esta no se deteriora, pues en realidad se esta dibujando completamente teniendo en cuenta las nuevas condiciones, cosa que no sucede con las imágenes de formatos como por ejemplo jpg, las cuales al ampliarlas se pixelaran.
Su principal desventaja es que cuando el grafico SVG es muy complejo el renderizado de este se tornara lento, básicamente porque cualquier cosa que use demasiado el DOM tendrá problemas de rendimiento.
El uso de esta etiqueta es relativamente sencillo, tal como vemos a continuación:
<svg xmlns="http://www.w3.org/2000/svg">
...
</svg>
Como pueden ver, básicamente solo necesita especificar el espacio de nombres que corresponde a la especificación SVG y listo, partiendo de este punto veamos algunos ejemplos del uso de esta etiqueta con algunas figuras básicas.
Crear un Circulo
<svg id="circulo" height="200" xmlns="http://www.w3.org/2000/svg">
<circle id="circuloRojo" cx="50" cy="50" r="50" fill="red" />
</svg>
Crear un circulo es muy sencillo, para ello hacemos uso de la etiqueta
circle, esta tiene los siguientes atributos:
- cx = centro en el eje x, medido en pixeles.
- cy = centro en el eje y, medido en pixeles.
- r = radio del circulo, medido en pixeles.
- fill = color de relleno.
Crear un rectángulo
<svg id="rectangulo" height="200" xmlns="http://www.w3.org/2000/svg">
<rect id="rectanguloAzul" width="200" height="100" fill="blue" />
</svg>
Para crear un rectángulo hacemos uso de la etiqueta
rect, esta tiene los siguientes atributos:
- width = ancho del elemento en pixeles.
- height = altura del elemento en pixeles.
- fill = color de relleno del elemento.
Crear una elipse
<svg id="elipse" height="200" xmlns="http://www.w3.org/2000/svg">
<ellipse id="elipseRoja" cx="100" cy="50" rx="100" ry="50" fill="red" />
</svg>
Para este caso, hacemos uso de la etiqueta
ellipse, la cual tiene los siguientes atributos:
- cx = centro en el eje x, medido en pixeles.
- cy = centro en el eje y, medido en pixeles.
- rx = radio en el eje x, medido en pixeles
- ry = radio en el eje y, medido en pixeles.
- fill = color de relleno del elemento.
Crear un polígono
<svg id="poligono" height="200" xmlns="http://www.w3.org/2000/svg">
<polygon id="poligonoAmarillo" points="20,10 200,20, 150,50" fill="#ffff21" />
</svg>
Para crear un polígono, hacemos uso de la etiqueta
polygon, la cual tiene los siguientes atributos:
- points = corresponde a la lista de puntos (coordenadas x e y) que conforman los extremos del polígono.
- fill = color de relleno del elemento.
Crear líneas rectas
<svg id="linea" height="200" xmlns="http://www.w3.org/2000/svg">
<line id ="lineaNegra" x1="0" y1="0" x2="200" y2="100" style="stroke:black;stroke-width:2"/>
</svg>
Crear una línea rectas es realmente sencillo, para ello hacemos uso de la etiqueta line, la cual cuenta con los siguientes atributos:
- x1 = punto inicial en el eje x, en pixeles.
- y1 = punto inicial en el eje y, en pixeles.
- x2 = punto final en el eje x, en pixeles.
- y2 = punto final en el eje y, en pixeles.
- style = estilo del elemento.
Crear gradientes a un elemento
<svg id="gradientes" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse id="elipseGradiente" cx="100" cy="50" rx="100" ry="50" style="fill:url(#gradient)"/>
</svg>
Es posible definir gradientes a un elemento, para ello es necesario que se define la gradiente a aplicar en el atributo style del elemento, como vemos en el ejemplo.
La etiqueta defs no permite agrupar el código que tiene como fin definir algún tipo de característica de los elementos, el código que esta dentro de estas etiquetas no es mostrado en el navegador.
En nuestro caso particular, definimos las características de la gradiente enmarcando los pasos dentro de la etiqueta radialGradient, la cual tiene el id que usamos en el estilo definido en el elemento al que afecta.
Insertar imágenes vectoriales en HTML mediante el lenguaje SVG
Por medio de los ejemplos anteriores hemos podido ver los sencillo que es crear figuras por medio del lenguaje SVG, pero también es posible tomar una imagen definida en formato vectorial e incrustarla en nuestro documento.
Como ejemplo usare el siguiente logo:
Como pueden ver, lo he realizado usando
Inkscape, que es una herramienta libre para la creación de gráficos vectoriales. una vez terminado el logo, lo guardo en formato
SVG plano, el cual voy a abrir usando
Notepad++.
Ahora podemos ver nuestro logo definido en el lenguaje SVG, ahora podemos tomar la información contenida en este archivo y ponerla en nuestro documento HTML.
<svg id="LogoUnderground" xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer4"
style="display:inline">
<g
id="g3823">
<path
d="m 359.64285,348.125 c -80.047,0 -144.9375,64.8905 -144.9375,144.9375 0,80.047 64.8905,144.9375 144.9375,144.9375 80.047,0 144.9375,-64.8905 144.9375,-144.9375 0,-80.047 -64.8905,-144.9375 -144.9375,-144.9375 z m -0.375,52.0625 c 51.49101,0 93.25,41.43473 93.25,92.53125 0,51.09652 -41.75899,92.53125 -93.25,92.53125 -51.49101,0 -93.21875,-41.43473 -93.21875,-92.53125 0,-51.09652 41.72774,-92.53125 93.21875,-92.53125 z"
id="path3006"
style="fill:#ff0000;fill-rule:evenodd;stroke:none;display:inline" />
<rect
width="353.57141"
height="59.285713"
x="182.85715"
y="463.41965"
id="rect3794"
style="fill:#0036fb;fill-opacity:1;stroke:none" />
<text
x="359.21317"
y="507.37894"
id="text3796"
xml:space="preserve"
style="font-size:40px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:120.00000477%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;font-family:Arial;-inkscape-font-specification:Arial Bold"><tspan
x="359.21317"
y="507.37894"
id="tspan3821">UNDERGROUND</tspan></text>
</g>
</g>
</svg>
De esta manera podemos incluir las imágenes vectoriales en nuestro documento HTML, queda claro que no es del todo una buena practica, pues como sabemos no ayuda mucho a los temas de mantenibilidad.
