Introducción

Qué es SVG

SVG (Scalable Vector Grafics) significa Vectores Gráficos Escalables. Dicho así tal vez no
lo entendamos, pero lo entendremos 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, sin embargo su forma de
trabajar es diferente.

Mientras que con canvas los dibujos se crean mediante píxeles (mapa de bits). con SVG
se crean mediante gráficos vectoriales. Esto significa que 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.
Esto en pantalla tal vez no tenga mucha inportancia, pero si queremos imprimirlo en
un tamaño grande los dibujos hechos con SVG muestran un mejor acabado.

Características de SVG

SVG es fácil de usar, ya que se basa en el lenguaje XML, es decir el mismo lenguaje de
etiquetas que usa HTML. Esto significa que no tenemos que usar (en principio)
javascript ni otro lenguaje diferente del HTML para incorporar figuras SVG en la página,
ya que el XML es el mismo lenguaje de base que utilizan tanto HTML como SVG.
Podemos por tanto crear las figuras y dibujos con SVG mediante etiquetas que
incorporamos al lenguaje HTML.
Incluir 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. Vemos
aquí a la derecha un círculo 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" stroke-width=3 fill="aqua"/>
</svg>

No vamos a explicar de momento este código, ya que en páginas posteriores veremos

cómo trabajar con SVG. Lo que queremos ver aquí es que con un simple código de
etiquetas y atributos podemos crear dibujos en la página.

Al estar el código SVG formado por los mismos elementos que el HTML podemos
también aplicarle los lenguajes CSS y javascript.

Con CSS podemos indicar el estilo de los distintos elementos. Para ello disponemos
además de las propiedades habituales de CSS de algunas propiedades especiales para
estos elementos que veremos más adelante.

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. Sin embargo también podemos crear
animaciones mediante el código SVG, sin necesidad de utilizar javascript ni CSS3,
Veremos todo esto más adelante en este manual.

Introducir código SVG en la página

Cómo se ha visto anteriormente para introducir un elemento SVG en la página

podemos utilizar la etiqueta <svg> ... </svg>. Este es el elemento contenedor dentro
del cual dibujaremos los demás elementos.

Debemos indicar mediante los atributos witdh y height la anchura y la altura del
elemento contenedor, o podemos indicarlo también mediante codigo CSS. En todo
caso hay que dar siempre una altura y anchura este elemento.

También podemos poner el elemento SVG en un archivo aparte, para después

incorporarlo a la página en el sitio que queramos. Para ello creamos un nuevo archivo
en el que incorporamos el código SVG.

El archivo tendrá la siguiente sintaxis:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

... código del contenido de SVG
</svg>
El código va encerrado dentro de la etiqueta "svg". 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">

Después pondremos el código en SVG y al final cerramos la etiqueta "svg".

Todo ello lo guardaremos en un archivo aparte con la extension .svg, por ejemplo
circulo.svg.

Para incluir después este archivo en la página podemos hacerlo de varias maneras:

 Como imagen: incluyéndolo dentro del atributo src:

<img src="circulo.sgv" alt="circulo" width="200" height="200">
 Como iframe: incluyéndolo 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>

En cualquier caso debemos incluir la ruta del archivo, y la altura y anchura de la

ventana donde veremos el SVG (atributos "height" y "width").

Compatibilidad con navegadores.

SVG es compatible con todos los navegadores en sus versiones modernas, si bien en
Internet explorer sólo es compatible con las versiones 9 en adelante. Para versiones
anteriores es necesario usar un plugin. Podemos usar "Adobe SVG Viewer, el cual nos
lo podemos descargar desde la página de Adobe:

http://www.adobe.com/devnet/svg/adobe-svg-viewer-download-area.html

Si el navegador del usuario no es compatible podemos advertirselo para que cambie a

otro dentro de la etiqueta "svg", como texto de la misma, por ejemplo:

<svg width=200 height=200>

<circle cx=100 cy=100 r=90 stroke="blue" stroke-width=3 fill="aqua"/>
Tu navegador no es compatible con SVG, por favor cambia a Firefox, Chrome, Opera o
Safari.
</svg>

hemos incluido un texto dentro de la etiqueta SVG. Este texto sólo se verá si el
navegador no es compatible, de esta manera advertimos al usuario de que la página
no se verá de forma completa.
Para saber más

 Inkscape, editor de gráficos vectoriales libre. lección sobre Inkscape

 Open Clip Art: Repositorio de imágenes SVG libres
 Grupo de trabajo SVG en el W3C,
 Información sobre SVG en Mozilla Development Network
 Otros programas: Editor svg-edit que funciona en el navegador. Página de
demostración de svg-edit - Por probar: SVGCleaner
https://sourceforge.net/projects/svgcleaner/
 Webs que hace tiempo que no se actualizan: codedread de Jeff Schiller (soporte de
SVG en diferentes navegadores) - SVG-Whiz

La etiqueta <svg>
La etiqueta <svg> engloba la imagen SVG e incluye las formas que forman la imagen.

Una imagen SVG puede incluirse en una página web directamente o mediante la
etiqueta <img />, como se comenta en la lección Imágenes.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"

width="170" height="165" viewBox="0 0 170 165">
<polygon fill="yellow" stroke="red" stroke-width="7"
points="129,150 85,119 41,150 57,104 15,66
68,66 85,15 102,65 156,66 113,98" />
</svg>

El plano SVG
Los dibujos SVG se definen en un plano infinito en el que el eje Y está orientado hacia
abajo, como muestra el dibujo siguiente en el que se muestran los ejes de coordenadas,
cuatro puntos en rojo y sus coordenadas.

Y X (100, 100) (100, -100) (-100, -100) (-100, 100)

Atributos de <svg>
Los atributos version y xmlns de <svg>

El atributo version indica la versión de SVG empleada en el dibujo. En estos apuntes se

utiliza la versión 1.1.

El atributo xmlns indica el espacio de nombres empleada en el dibujo, es siempre

https://www.w3.org/2000/svg.
El atributo viewBox

El atributo viewBox establece la porción del plano SVG que muestra la imagen. Este
atributo se establece con cuatro valores:

 primer valor: abcisa (X) de la esquina superior izquierda de la porción del plano que
muestra la imagen
 segundo valor: ordenada (Y) de la esquina superior izquierda de la porción del plano
que muestra la imagen
 tercer valor: ancho de la porción del plano que muestra la imagen
 cuarto valor: alto de la porción del plano que muestra la imagen

El ejemplo siguiente muestra con una línea roja a trazos la porción del plano SVG que
se mostraría con unos valores determinados en el atributo viewbox.

Y X viewBox="-100 -50 200 150" (-100, -50) (100, 100)

La zona visible es independiente de los elementos dibujados, es decir, sólo se mostrarán

los elementos (o la parte de los elementos) que se encuentren en la zona visible definida
por el atributo viewbox.

Los ejemplos siguientes muestran tres dibujos con los mismos elementos SVG: los ejes
de coordenadas y un círculo de radio 100 centrado en el origen, pero con diferentes
atributos viewbox

 En el primer ejemplo, se ve todo el círculo porque la zona visible definida por

viewBox empieza arriba a la izquierda en el punto (-100, -100) y tiene un
tamaño de 200 x 200. El tamaño de la imagen es también de 200 x 200.
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
 width="200" height="200" viewBox="-100 -100 200 200"
 style="background-color: lightgray">
 <circle cx="0" cy="0" r="100" fill="none" stroke="red" stroke-
width="1" />
 <line x1="-200" y1="0" x2="200" y2="0" stroke="black" stroke-
width="1" />
 <line x1="0" y1="-200" x2="0" y2="200" stroke="black" stroke-
width="1" />
 </svg>
 Si en ese mismo dibujo la zona visible definida por viewBox empieza en el
punto (-5, -5) y tiene un tamaño de 105 x 105 sólo se verá el primer cuadrante
(valores X e Y positivos). El tamaño de la imagen es también de 105 x 105 para
que coincida con el tamaño de la zona visible.
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
 width="105" height="105" viewBox="-5 -5 105 105"
 style="background-color: lightgray">
 <circle cx="0" cy="0" r="100" fill="none" stroke="red" stroke-
width="1" />
 <line x1="-200" y1="0" x2="200" y2="0" stroke="black" stroke-
width="1" />
 <line x1="0" y1="-200" x2="0" y2="200" stroke="black" stroke-
width="1" />
 </svg>
  Si quiséramos mostrar el tercer cuadrante (valores X e Y negativos, la zona
visible podría empezar en el punto (-100, -100) y tener un tamaño de 105 x 105.
El tamaño de la imagen sería también de 105 x 105 para que coincida con el
tamaño de la zona visible.
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
 width="105" height="105" viewBox="-100 -100 105 105"
 style="background-color: lightgray">
 <circle cx="0" cy="0" r="100" fill="none" stroke="red" stroke-
width="1" />
 <line x1="-200" y1="0" x2="200" y2="0" stroke="black" stroke-
width="1" />
 <line x1="0" y1="-200" x2="0" y2="200" stroke="black" stroke-
width="1" />
 </svg>

Los atributos width y height de <svg>

El atributo viewBox establece la porción del plano SVG que se muestra en la imagen ,
mientras que los atributos width y height establecen el ancho y el alto de la imagen en la
página web.

Así, una misma imagen en el plano SVG se puede ver en la página web más o menos
grande, como muestran los ejemplos siguientes:

 En este primer ejemplo, el tamaño de la imagen coincide con el tamaño de la zona

visible
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
 width="100" height="100" viewBox="-50 -50 100 100"
 style="background-color: lightgray">
 <circle cx="0" cy="0" r="50" fill="none" stroke="red" stroke-
width="1" />
 </svg>
 En este segundo ejemplo, el tamaño de la imagen es el cuádruple (el doble en
horizontal y el doble en vertical) de la zona visible.
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
 width="200" height="200" viewBox="-50 -50 100 100"
 style="background-color: lightgray">
 <circle cx="0" cy="0" r="50" fill="none" stroke="red" stroke-
width="1" />
 </svg>
 En este tercer ejemplo, el tamaño de la imagen es la cuarta parte (la mitad en
horizontal y la mitad en vertical) de la zona visible.
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
 width="50" height="50" viewBox="-50 -50 100 100"
 style="background-color: lightgray">
 <circle cx="0" cy="0" r="50" fill="none" stroke="red" stroke-
width="1" />
 </svg>

Simplificar una imagen hecha con Inkscape

Las imágenes SVG se pueden crear escribiendo las etiquetas directamente en un
procesador de textos (como Brackets), pero también se pueden utilizar editores gráficos
como Inkscape o descargar de repositorios como Open Clip Art. El problema es que
Inkscape genera más código del necesario, por lo que a veces puede resultar
conveniente simplificar ese código.

Si se crea con Inkscape la imagen de la estrella de los ejemplos anteriores y se guarda la

imagen como SVG plano, se obtendría un código fuente similar a este:

<?xml version="1.0" encoding="utf-8" standalone="no"?>

<!-- Created with Inkscape (https://inkscape.org/es/) -->

<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="https://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="https://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="100"
height="100"
id="svg2">
<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
transform="translate(-100.10292,-228.90234)"
id="layer1">
<polygon
points="124,145 80,114 36,145 52,93 10,61 63,61 80,10 97,60
151,61 108,93 "

transform="matrix(0.60688557,0,0,0.60646101,101.24863,231.90161)"
id="polygon4069"
style="fill:#ffff33;stroke:#ff0000;stroke-width:7.30069113" />
</g>
</svg>

Para insertarla en un documento html 5 es necesario eliminar parte de este código:

<?xml version="1.0" encoding="utf-8" standalone="no"?>

<!-- Created with Inkscape (https://inkscape.org/es/) -->

<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="https://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="https://www.w3.org/2000/svg"
 xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="100"
height="100"
id="svg2">
<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
transform="translate(-100.10292,-228.90234)"
id="layer1">
<polygon
points="124,145 80,114 36,145 52,93 10,61 63,61 80,10 97,60
151,61 108,93 "

transform="matrix(0.60688557,0,0,0.60646101,101.24863,231.90161)"
id="polygon4069"
style="fill:#ffff33;stroke:#ff0000;stroke-width:7.30069113" />
</g>
</svg>

Por lo que la imagen quedaría:

<svg
width="100"
height="100"
id="svg2">
<g
transform="translate(-100.10292,-228.90234)"
id="layer1">
<polygon
points="124,145 80,114 36,145 52,93 10,61 63,61 80,10 97,60
151,61 108,93 "

transform="matrix(0.60688557,0,0,0.60646101,101.24863,231.90161)"
id="polygon4069"
style="fill:#ffff33;stroke:#ff0000;stroke-width:7.30069113" />
</g>
</svg>

Ese código se puede simplificar todavía más, hasta obtener el código que se ha utilizado
en esta lección:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"

width="170" height="165" viewBox="0 0 170 165">
<polygon fill="yellow" stroke="red" stroke-width="7"
points="129,150 85,119 41,150 57,104 15,66 68,66 85,15
102,65 156,66 113,98" />
</svg>
Para simplificar imágenes SVG se puede utilizar la página SVGOMG (el tamaño y
calidad del resultado depende de las opciones elegidas).

En el caso de la imagen de la estrella hecho con Inkscape, SVGOMG produciría el

siguiente resultado:

<svg xmlns="http://www.w3.org/2000/svg"
width="100" height="100">
<path fill="#ff3" stroke="red" stroke-width="7.3"
d="M124 145l-44-31-44 31 16-52-42-32h53l17-51 17 50 54 1-43 32z"
transform="matrix(.6069 0 0 .60646 1.146 3)"/>
</svg>

Última modificación de esta pá