adsense

XRL Tech Corner

Tutoriales online de programación, CMS, Raspberry y artículos sobre tecnología.

Imágenes vectoriales con SVG

En este artículo vamos a realizar un tutorial de imágenes SVG.

Qué es el formato SVG?


Es un formato gráfico que tiene la característica de que si ampliamos la imagen, se ve perfecta, y no como el 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 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. 

Puedes utilizar el editor svg que hay más abajo en la página para copiar esas etiquetas y "renderizar" el dibujo.

 

Cómo crear una imagen vectorial con svg


Vamos a continuar explicando las etiquetas básicas de las imágenes SVG y vamos a crear un fichero de ejemplo para que veamos en que consiste.

Primero empezamos poniendo los tags de apertura y 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" >

A continuación vamos a dibujar un rectángulo 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 nuestro código, escribimos:

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

 

 

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.

Especificando el atributo x e y lo situamos el rectángulo en las coordenadas que queremos.
Con la etiqueta stroke podemos fijar el color del trazo.
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.

A continuación vamos a 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.

 

 

Del mismo modo se pueden dibujar elipses:

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

 

 

Y un "ojo" como en el ejemplo anterior sería:

 

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


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

<line x1="10" y1="10" x2="40" y2="40"/>



Para incluir un texto basta con poner el texto y situarlo en la coordenada x,y:

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



Ojo porque 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


Para dibujar un polígono 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"><line x1="0" y1="10" x2="40" y2="10" stroke="black"><line x1="10" y1="10" x2="20" y2="30" stroke="black"><line x1="30" y1="10" x2="20" y2="30" stroke="black"><line x1="10" y1="10" x2="20" y2="0" stroke="black"><line x1="30" y1="10" x2="20" y2="0" stroke="black">

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 que sirve para agrupar elementos y luego transformarlos.

01020304010203040

 

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. El último 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:

etc

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 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 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, ...





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 ...


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"> 
 

 

 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" />
 

Prueba tu mismo con este editor svg online

A continuación tienes la posibilidad de usar un editor y generador de svg para que puedas probar el código por ti mismo:

Valora este artículo del blog:
Animaciones css con keyframes
El diseño gráfico en la web
 

Comentarios

No hay comentarios por el momento. Se el primero en enviar un comentario.
¿Ya està registrado? Ingresa Aquí
Invitado
Viernes, 20 Octubre 2017
Si desea registrarse, por favor rellene los campos de nombre de usuario y nombre.

Imagen Captcha