SVG: Creando imágenes a través de código

svglogo

No se a vosotros, pero a mí eso de poder crear imágenes vectoriales sin tener que utilizar un editor gráfico me parece lo más. Y si encima sabes que se verá bien a cualquier tamaño y en dispositivos retina, la alegría es mayor.

Pero primero un poco de información básica:
¿Qué significan las siglas SVG? Scalable Vector Graphics (gráficos vectoriales escalables)
¿Qué es SVG? Es un estandar de marcado basado en el lenguaje XML, con el que podemos dibujar imágenes vectoriales en dos dimensiones.
¿Qué navegadores soportan imágenes SVG? En la web Can I use..? puedes ver el soporte de los navegadores actualizado a día de hoy.

Dicho esto, vamos al lío.

Empezamos por algo sencillo, una imagen con 3 líneas, el típico icono hamburger para los menús:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="43" height="25">
  <line x1="3" y1="2.5" x2="40" y2="2.5" stroke-width="5" stroke="black" stroke-linecap="round" />
  <line x1="3" y1="12.5" x2="40" y2="12.5" stroke-width="5" stroke="black" stroke-linecap="round" />
  <line x1="3" y1="22.5" x2="40" y2="22.5" stroke-width="5" stroke="black" stroke-linecap="round" />
</svg>

Recordad incluir el atributo xmlns, para especificar que estáis escribiendo SVG y no XML a secas.

Cómo véis, hemos añadido 3 elementos “line”, cada uno de ellos representa una línea y les hemos puesto varios atributos:
x1 la coordenada de inicio de la línea sobre el eje horizontal.
y1 la coordenada de inicio de la línea sobre el eje vertical.
x2 la coordenada del final de la línea sobre el eje horizontal.
y2 la coordenada del final de la línea sobre el eje vertical.
stroke-width el ancho de la línea (en píxeles)
stroke el color de la línea
stroke-linecap la terminación de la línea, en este ejemplo, redondeada.

Una cosa que tenéis que tener en cuenta a la hora de modificar el grosor de las líneas, es la posición de ésta sobre el lienzo. Ya que, si colocamos una línea pegada a la parte superior, al especificarle un borde de 5 píxeles, la línea seguirá en la misma posición, pero la mitad de ésta (2.5px) quedará oculta en la parte superior del lienzo. Por eso en el ejemplo que hemos hecho, la primera línea comienza a 2.5 píxeles de distancia de la parte superior (atributos y1 e y2). Una imagen vale más que mil palabras:

Hamburger SVG

Por otro parte, en el ejemplo hemos especificado el ancho (width) y el alto (height) de nuestro lienzo. Esto hace que la imagen tenga unas medidas fijas, pero podemos convertirlo en responsive rápidamente, y con ello conseguir que se adapte al tamaño del contenedor. Para hacerlo tenemos que quitar los atributos que contienen las medidas y añadir el viewBox. Quedando así:

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

Para ver nuestra pequeña obra de arte podemos incluir el código directamente en una página html o guardarlo en un archivo con extensión .svg, por ejemplo “hamburger.svg”. Si optamos por la segunda opción, es conveniente añadir la siguiente linea al comienzo del archivo, especificando la versión de xml y el tipo de codificado que utilizaremos:

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

Ver icono hamburger en SVG

Y no os creáis que sólo de líneas viven los SVG, hay más elementos que podéis utilizar (circle, polygon, path, etc) y con los que podéis hacer imágenes mucho más complejas. Pero de esos mejor os hablo más adelante :)

  • 18 abril 2016
  • Maquetación
  • , ,

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *