Cómo empezar con SVG

El svg es un conjunto de etiquetas que se usan para dibujar gráficos vectoriales. Para dibujar una figura hay que poner una etiqueta al principio y otra al final (con una barra /). Estas etiquetas tienen ciertos atributos: <etiqueta atributo="valor"></etiqueta>. Los navegadores interpretan esas etiquetas y visualizan el contenido transformado en un dibujo. No se necesita ningún programa concreto para crear svg, se puede usar un editor de texto como el "Notepad" de Windows, o el "vi" de Linux.

Como sugerencia, te recomiendo algunos libros de html, libros de css, libros de javascript que sirven para entrar en detalle en estas materias.

Qué es el formato SVG?

Es un formato gráfico que tiene la característica de que si ampliamos la imagen, no se pixela ni se ve borrosa, al contrario del resto de formatos rasterizados como PNG o JPG. 
Tal como su acrónimo indica (Scalable Vector Graphics) este formato gráfico se suele llamar vectorial.
El formato del fichero es de tipo XML, es decir con "etiquetas", algo parecido a el lenguaje HTML.

Dónde descargar imágenes vectoriales?

Si necesitamos incluir alguna imagen vectorial profesional en nuestra web, se pueden descargar varias gratuitas como por ejemplo desde freepik.com aunque también hay de pago tipo fotolia,  Shutterstock, etc.
O también se las puede diseñar uno mismo con varios programas de edición de imágenes vectoriales, como por ejemplo Adobe Illustrator o Inkscape.

Abrir archivos svg

Los archivos svg tienen un formato de etiquetas XML que se puede ver con cualquier editor de texto. Para poder visualizar el dibujo que representan estas etiquetas XML hay que utilizar un programa que sea capaz de interpretarlas, como un navegador web.

Como ayuda puedes utilizar el editor svg que hay más abajo en la página para copiar esas etiquetas svg y "renderizar" el dibujo haciendo click en .

Cómo crear una imagen vectorial con svg

Vamos a explicar las etiquetas básicas de las imágenes SVG y vamos a ir viendo ejemplos para que veamos en que consiste. Estos ejemplos se pueden modificar en el Editor de SVG para comprobar el resultado.

Lo primero que hay que hacer es poner las etiquetas de apertura y de cierre del código SVG, especificando un tamaño del lienzo con ancho y alto en píxeles:

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

A continuación se van escribiendo las siguientes etiquetas para dibujar figuras geométricas:

<rect>

Se usa para dibujar un rectángulo. Por ejemplo con un relleno de color rojo con un ancho de 200 píxeles y una altura de 50 píxeles situado en la coordenada x=0, y=0:

Para ello dentro de las etiquetas anteriores <svg>nuestro código</svg>, escribimos:

<rect width="200" height="50" fill="red" x="0" y="0"/>

 

Mira el ejemplo 1 y visualiza el resultado pulsando en

Hay que comentar que por defecto, si no se especifica la x,y se dibuja en el origen 0,0 que es el top left de CSS.

Es decir arriba a la izquierda.
El sistema de coordenadas va con el eje X de izquierda a derecha y con el eje Y de arriba hacia abajo.

X Y (0,0)

Especificando el atributo x e y situamos el rectángulo en las coordenadas que queremos.
Con la etiqueta stroke podemos fijar el color del trazo en la mayoría de las etiquetas.
Con stroke-width="4" especificamos el grosor del trazo. Y con fill especificamos el color del relleno, ya sea con una palabra (blue, red, black, etc..) o con un código rgb(rojo,verde,azul) o un hex: #FFAACC.

En un rectángulo también se puede definir una esquina redondeada con rx, ry que son los radios de la elipse que encajan en la esquina redondeada.

<circle>

Se usa para crear un círculo:

<circle cx="0" cy="0" r="50" fill="orange"/>


donde cx, cy son las coordenadas del centro del círculo. Y r es el radio del círculo. Por supuesto fill es el color del relleno.

Mira el ejemplo 2 y visualiza el resultado pulsando en

<ellipse>

Se usa para dibujar elipses:

<ellipse cx="250" cy="25" rx="100" ry="25"/>

Mira el ejemplo 3 y visualiza el resultado pulsando en

Para dibujar un "ojo" sería:

Mira el ejemplo 6 y visualiza el resultado pulsando en

<ellipse cx="250" cy="50" rx="100" ry="25" fill="none" stroke="black" stroke-width="2"></ellipse><circle cx="250" cy="50" r="25" fill="blue"></circle><circle cx="250" cy="50" r="5" fill="black"></circle>

<line>

Se usa para dibujar una línea y es tan sencillo como especificar dos puntos, cada uno con la coordenada x e y, es decir traza una línea desde el punto x1,y1 hasta el punto x2,y2. Se puede especificar el grosor con strike-width y el color del trazo con strike:

<line x1="0" y1="0" x2="240" y2="240"/>

Mira el ejemplo 4 y visualiza el resultado pulsando en

<polyline>

Otra etiqueta muy relacionada con esta es la polyline que permite ir dibujando y conectando líneas especificando los puntos x,y. Estos puntos se definen en el atributo points.

Mira el ejemplo 9 y visualiza el resultado pulsando en

<text>

Se usa para incluir un texto. Basta con poner el texto y situarlo en la coordenada x,y:

<text x="20" y="20">Texto</text>


Mira el ejemplo 5 y visualiza el resultado pulsando en


NOTA: el origen del texto siempre se centra en la parte inferior izquierda. Así pues habrá que tener cuidado a la hora de centrarlo con text-anchor: middle

Se pueden crear links en SVG como en HTML mediante la etiqueta a. Se utiliza el atributo xlink:href="direcc" para definir la url destino del link. Lo interesante es que se puede definir un link para una figura, como un rectángulo, o un círculo. Otro atributo importante es target para indicar si se abre en una ventana nueva o en la misma.

Mira el ejemplo 14 y visualiza el resultado pulsando en

<polygon>

Se usa para dibujar un polígono y se realiza uniendo una serie de puntos con sus diferentes coordenadas x e y:

<polygon points="x1,y1 x2,y2 x3,y3 etc"/>

 

<svg style="border: solid 1px black;" width="800" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg"><g transform="translate(30,30) scale(2)"><polygon points="0,10 10,0 30,0 40,10 20,30" stroke="black" stroke-width="2" fill="#E0FFFF"></polygon><line x1="0" y1="10" x2="40" y2="10" stroke="black"></line><line x1="10" y1="10" x2="20" y2="30" stroke="black"></line><line x1="30" y1="10" x2="20" y2="30" stroke="black"></line><line x1="10" y1="10" x2="20" y2="0" stroke="black"></line><line x1="30" y1="10" x2="20" y2="0" stroke="black"></line></g></svg>

En el ejemplo anterior hemos utilizado una técnica recomendable, que es dibujar en un eje con unidades de 10 y luego trasladamos y escalamos el objeto a nuestro antojo. De este modo es más fácil dibujar con coordenadas unitarias. Para ello hemos utilizado la etiqueta <g> que sirve para agrupar elementos y luego transformarlos.

Mira el ejemplo 7 y visualiza el resultado pulsando en

01020304010203040

 

Gradientes

Además de los colores sólidos convencionales, podemos definir gradientes de color. Un gradiente es una transición que va de un color a otro. Esto se puede hacer de modo lineal, según el eje horizontal o vertical (o un vector), o de modo radial, siguiendo una curva. Las definiciones de los gradientes van entre las etiquetas: <defs> y </defs> y luego se referencian en los elementos para construir rectángulos, círculos, etc con el atributo fill:url(#migradiente).

El gradiente lineal se hace con la etiqueta linearGradient que engloba etiquetas stop dentro.

Mira el ejemplo 12 y visualiza el resultado pulsando en

El gradiente circular se hace con la etiqueta radialGradient y también engloba etiquetas stop dentro.

Mira el ejemplo 13 y visualiza el resultado pulsando en

Otra cosa a destacar es que el orden de las etiquetas es importante de cara a colocar algo en el fondo o en la parte de arriba.La última etiqueta que se defina en el fichero XML va arriba de todo.
Como hemos comentado anteriormente se pueden definir grupos de elementos con la etiqueta <g>:

<g><rect/><circle/>etc</g>

Patrones de relleno

Los patrones de relleno se usan para colorear el interior de una figura con un patrón hecho con imágenes (svg o bitmap). Los patrones de relleno se definen dentro de la etiqueta <defs> con la etiqueta <pattern>. Dentro de esas etiquetas se definen las figuras que formarán el patrón de relleno. Un patrón puede aplicar una transformación mediante el atributo patternTransform.

Mira el ejemplo 15 y visualiza el resultado pulsando en

Filtros

Los filtros se utilizan para realizar efectos sobre las figuras. Podemos realizar sombreados, difuminados, destellos, etc... Se definen con la etiqueta <filter> dentro de las etiquetas <defs>. Quizás el filtro más conocido sea el desenfoque Gaussiano. Se define con las etiqueta <feGaussianBlur>. Luego se aplica con el atributo filter a la figura que queramos.

Mira el ejemplo 18 y visualiza el resultado pulsando en

Recortes

Los recortes permiten recortar una figura svg siguiendo un determinado path. Los elementos que quedan dentro del path serán visibles y el resto invisible. De igual modo se definen dentro de la etiqueta <defs> con la etiqueta <clipPath> y dentro se definen las figuras que formarán parte del recorte. Las etiquetas de grupo <g> también pueden llevar el atributo de recorte, incluso un texto puede formar parte del propio recorte.

Mira el ejemplo 16 y visualiza el resultado pulsando en

Máscaras

Las máscaras son como una versión más avanzada de los recortes, pero jugando con las transparencias y la opacidad. Cuanto más cercano es el color al negro, más transparente será, y viceversa, cuanto más cercano es el color al blanco más opaco será. Incluso la máscar puede tener un relleno en forma de gradiente, con lo que se consigue un efecto de opacidad progresivo.

Mira el ejemplo 17 y visualiza el resultado pulsando en

Transformaciones

En SVG también se pueden realizar transformaciones como en css. Traslaciones, rotaciones, escalados, etc...se crean mediante el atributo transform. Mira este tutorial sobre animaciones css para aprender a realizar transformaciones y transiciones en css que sirven para SVG.

Cómo insertar svg en html?

Una vez tenemos el dibujo que queremos lo podemos incluir en la página web con el tag de <img> haciendo referencia externa a un fichero externo con la extensión .svg, aunque no es la mejor opción.

El problema es que de este modo no podemos animar muchas de las propiedades del SVG, como los colores, o los rellenos.
Por eso tenemos otro modo de insertar un SVG dentro de la página web html, y eso es literalmente poniendo todo el código svg entre los tags de HTML.
Ahora sí podemos animar las propiedades!

Otra cosa interesante es que podemos separar la parte de los estilos en un css normal y corriente: pero hay que tener en cuenta que hay que especificar "px" en las cantidades.

La etiqueta <svg> puede tener una clase con class="" y referenciada al fichero .css de estilos.
De este modo se pueden definir los estilos de rect, circle, etc, ...

<style>
circle {
   fill: red;
   stroke: white;
}
</style>



Se pueden anidar transformaciones como rotate (grados orig-x orig-y) o scale(factor).

Para crear imágenes o iconos "responsive", hay que cambiar la definición svg y poner un viewBox="0 0 ancho alto" y luego definir un viewport en el css.

svg { width:30%; height: auto;}

Cómo usar svg en html?

Para reusar imágenes svg dentro de una página web podemos usar la etiqueta symbol para definir el símbolo:

<symbol id="miicono">
codigo svg ...
</symbol>


Y se puede llamar con:

<use xlink:href="#miicono"/>

 

Animaciones web con svg


También podemos definir animaciones a través de rutas o "paths".

Las animaciones consisten en variar los atributos de ciertos elementos, por ejemplo podemos variar la coordenada x de un círculo para simular que se mueve a lo largo del eje x:

<circle cx="30" cy="40" fill="red" opacity="0.5" r="28" stroke-width="2" stroke="black">
<animate attributename="cx" attributetype="XML" begin="0s" dur="5s" from="10" to="340" repeatCount="indefinite"> 
 </animate></circle>

 

Mira el ejemplo 11 y visualiza el resultado pulsando en

 Otra opción es animar a través de rutas. Por ejemplo un círculo que se mueve a lo largo de un camino.

Al especificar begin=click, la animación empieza al pinchar sobre el círculo.

<circle id="circle" r="20" cx="100" cy="100" fill="tomato" />
 <animateMotion
    xlink:href="#circle"
    dur="1s"
    begin="click"
    fill="freeze"
    path="M0,0c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3    c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7
    c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.5
    c1.9-2.1,3.7-5.5,6.5-6.5" />

 

Mira el ejemplo 8 y visualiza el resultado pulsando en (hay que pulsar encima del círculo para iniciar la animación)


Usa el editor svg para crear un dibujo original y visualiza el resultado. Sirva esta "nave espacial" de modelo: Ejemplo 20
Luego compártelo con tus redes sociales pulsando el botón para guardar este dibujo y pulsando luego en

Y si quieres conocer los tutoriales promocionados, no te pierdas estas ofertas increibles. También puedes recibir nuestro boletín por correo,

Editor de SVG