> Manuales > Introducción al formato SVG

Explicaciones detalladas sobre el formato gráfico vectorial SVG, un lenguaje de estándar abierto que forma parte de HTML5, usado para realizar dibujos vectoriales en 2D.

SVG son las siglas de Scalable Vector Graphics, que podríamos traducir libremente al español como gráficos basados en vectores escalables. En otras palabras, podemos decir que es un formato gráfico basado en XML para crear archivos vectoriales en 2D, con un lenguaje de marcado por medio de etiquetas.

Qué es SVG

Es recomendación del W3C desde 2001, aunque los navegadores hace menos tiempo que lo vienen implantando para dar soporte. Firefox comenzó a usarlo en 2004 y Google Chrome lo dispone desde su primer lanzamiento en 2007. Por su parte, Internet Explorer lo está implementando desde la versión 9.

Nota: El soporte a las diferentes partes del estándar SVG actualizado lo puedes ver en Caniuse. Observarás que casi todo SVG está ampliamente soportado, Lo que indica que podemos usarlo sin preocupaciones. Únicamente, las tipografías SVG carecen de un soporte generalizado.

En cuanto a versiones del estándar, va por la 1.1, aunque se supone que en verano de 2014 podremos asistir al lanzamiento de la versión 2. Entre sus posibilidades, podemos señalar la capacidad de usar tres tipos de objetos gráficos:

  1. formas de vectores gráficos (entre las que se incluyen líneas, poligonos, polilineas, rectángulos, círculos o elipses, etc.).
  2. imágenes y texto.

Además, a los objetos gráficos les podemos aplicar transformaciones (traslaciones, escala, etc.), animaciones y efectos de filtro (muy variados, como los que conocemos en programas de diseño como Photoshop).

Algunas ventajas de este formato son:

SVG como formato vectorial

El uso de graficos vectoriales tiene de por sí algunas características que son representativas y en el mundo web, todavía más destacables en comparación a los gráficos conocidos como "mapa de bits".

Nota: Las imágenes que normalmente usamos en un sitio web tienen mapas de bits, con extensiones como jpg, png o gif.

Su tamaño es generalmente menor en los vectores, en bytes, que sus versiones en mapa de bits. Por ejemplo, en la siguiente imagen podemos apreciar que el mismo gráfico en SVG ocuparía 2KB y en PNG sería aproximadamente el triple, en torno a los 6KB.

Además, la nitidez de un SVG siempre será mejor que un mapa de bits, sobre todo se notará si ampliamos la imagen. En un mapa de bits empezaremos a notar enseguida el pixelado en los bordes, lo que se conoce como "dientes de sierra", mientras que en SVG siempre se mantiene la nitidez perfecta, por ser vectorial.

En la siguiente imagen se ve una ampliación de un SVG y un PNG. Sobra decir que el de arriba es el SVG.

Puedes obtener un repaso extra a este formato en el artículo características de SVG.

Estructura de etiquetas para hacer un SVG

Al tratarse de un lenguaje basado en XML su unidad básica son las etiquetas (etiquetas como las del propio HTML). Por tanto, cuando queramos implementar una imagen SVG debemos usar una etiqueta, la cual tendrá una estructura como esta:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="400" height="230" viewBox="0 0 400 230">

Encontramos varios atributos que a continuación explicamos por orden de aparición (aunque en la práctica, al escribir la propia etiqueta podemos poner los atributos en el orden que deseemos):

Formas básicas

Ahora veremos una serie de formas básicas que podemos especificar dentro de una imagen SVG. Por supuesto, éstas se crearán a partir de etiquetas que se anidan dentro de la etiqueta global del SVG.

Rectangle:

Etiqueta para obtener un rectángulo.

<rect x="200" y="50" width="100" height="150" fill="#d6a085" stroke="#bd8347"
stroke­width="10" />

Los atributos x e y son coordenadas horizontal y vertical donde lo situamos, siendo la referencia la esquina superior izquierda. Luego asignamos altura y anchura, colores de relleno y de borde y el grosor de la línea del borde.

Si lo queremos con los bordes redondeados, añadimos rx="4", siendo 4 el radio del redondeado, que podemos cambiar a lo que nosotros deseemos, claro está.

Circle:

Etiqueta para hacer un círculo.

<circle cx="150" cy="100" r="40" fill="#16a085" stroke="#bdc3c7" stroke­width="4" />
Todos los atributos de los distintos tags para formas básicas son bastante parecidos. En este caso cx y cy son las coordenadas x e y del círculo, sin embargo, en este caso la referencia a situar es el centro del círculo. El atributo r es el radio.

Ellipse:

Etiqueta para hacer una elipse.

<ellipse cx="100" cy="100" rx="30" ry="80" fill="#16a085" stroke="#bdc3c7" stroke­width="4" />

Es muy parecido al círculo, solo que en una elipse definimos dos radios: uno horizontal y otro vertical, que pueden tener valores distintos.

Polygon:

Para definir un polígono a base de indicar sus puntos vértices.

<polygon points="200,100 250,180 160,210" fill="#16a085" stroke="#bdc3c7" stroke­width="4" />

Lo utilizamos para dibujar formas con tres o más caras. Cada par de valores en el atributo "points" indican uno de los vértices del polígono.

Line:

Una línea simple.

<line x1="50" y1="50" x2="150" y2="50" stroke="#bdc3c7" stroke­width="3" />
Indicamos la esquina del principio y fin, con sus coordenadas.

Polyline:

Una línea formada por varias líneas seguidas.

<polyline points="0,40 40,40 40,80 80,80 80,120" fill="none" stroke="#bdc3c7" stroke­width="10"
/>

Cada par de valores en el atributo "points" indican uno de los puntos de la línea.

Conclusión

Ahora con lo que hemos aprendido somos capaces de dibujar unas formas básicas en un documento HTML, agregando unas etiquetas como estas:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="400" height="230" viewBox="0 0 400 230">
    <line x1="50" y1="50" x2="150" y2="50" stroke="#bdc3c7" stroke­width="3" />
    <line x1="140" y1="50" x2="150" y2="100" stroke="#ff0099" stroke­width="6" />
    <ellipse cx="100" cy="100" rx="30" ry="80" fill="#16a085" stroke="#bdc3c7" stroke­width="4" />
    <rect x="200" y="50" width="100" height="150" fill="#d6a085" stroke="#bd8347" stroke­width="10" />
    <circle cx=0 cy=0 r=50 fill="#ddd"></circle>
    <polyline points="0,40 40,40 40,80 80,80 80,120" fill="none" stroke="#bdc3c7" stroke­width="10" />
    <polygon points="200,100 250,180 160,210" fill="#856" stroke="black" stroke­width="4" />
</svg>

Este artículo de momento termina aquí, pero tenéis más información en un evento retransmitido en DesarrolloWeb.com. De este mismo vídeo hemos algunas de sus partes publicar el presente texto como artículo.

Una excelente referencia de SVG encontrarás en Mozilla Developer Network, un recurso imprescindible para documentarnos cuando estamos trabajando con este lenguaje.

Y por supuesto mucha información adicional en el Manual de SVG de DesarrolloWeb.

Jorge ATGU

Diseñador gráfico y Web

Manual