Los SVG (del inglés Scalable Vector Graphics), son formatos gráficos vectoriales muy útiles por su flexibilidad y la capacidad de mostrar imágenes en web, sin perder calidad al cambiar de resolución.

Los SVG se definen en formato XML. Esto nos permite, además de dibujarlos, realizar acciones y animaciones sin necesidad de cargar la página. Es muy parecido al funcionamiento del HTML. Se definen diferentes elementos geométricos que se pueden ir alterando mediante órdenes.

Ventajas de utilizar SVG

Si los comparamos con los gif, png o jpg, las ventajas son:

• Podemos crearlo y editarlo en cualquier editor de texto, no hace falta tener un photoshop o un illustrator por ejemplo.
• Es escalable, esto significa que no tendremos problemas de calidad sea cual sea la resolución de pantalla y dispositivo, incluso podemos imprimirlos en alta calidad.
• Podemos hacer animaciones como las que hacíamos con flash, pero en este caso, con permiso de la W3C.

Crear imágenes SVG con Adobe Illustrator

Existen numerosos programas para generar archivos SVG, incluso crearlos desde cero con código (soy diseñador y no llego a tanto), así que los creo con Illustrator. El procedimiento es el siguiente:

1. Una vez creado el gráfico, salvamos como SVGZ comprimido.
2. Opciones de guardado
   1. Perfiles SVG –  Deja la opción que viene por defecto.
   2. Fuentes – En la opción de texto, te da la opción de trazarlo desde nuestro SVG o convertirlo en contorno.
   3. Opciones – Podemos incrustar la imagen en el archivo SVG (aumentando el tamaño),  o enlazar, que incluirá una etiqueta image que vinculará la imagen a nuestro SVG. Yo utilizo esta última.
   4. Opciones Avanzadas – Selecciono elementos de estilo Illustrator que lo que hace es crear unos estilos CSS que gestionan el color de relleno y del borde. Para que el archivo pese menos, en decimales, dejo marcado 1 decimal
   5. Flexible hará que los archivos se adapten al tamaño de la web (responsive) .
   6. Código SVG  abre el editor de texto y nos muestra el código generado por nuestro SVG.

Crear SVG en código

El mismo código que nos genera el Illustrator, podemos escribirlo nosotros directamente. En este ejemplo vemos cómo se pinta un círculo rojo con borde negro y situado en una posición determinada (coordenadas cx y cy) y con un radio r

<svg width="800" height="100">
<circle cx="500" cy="50" r="40" stroke="black" stroke-width="4" fill="red" />
Sorry, your browser does not support inline SVG.
</svg>

• Formas:  Rectangle <rect> / Circle <circle> / Ellipse <ellipse> / Line <line> / Polyline <polyline> / Polygon <polygon> / Path <path>

Tenéis toda la información para dibujar formas, atributos, etc…  en W3Schools.com

Una de las reglas fundamentales y que tenemos que tener siempre en cuenta, es que los elementos que estén en una línea posterior, se pintarán por encima, es decir, si queremos hacer un gráfico en el que la base es un cuadrado rojo, encima hay un círculo negro y este a su vez contienen un texto, el código sería así:

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="red" />
  <circle cx="150" cy="100" r="80" fill="black" />
  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>

EJEMPLO:

Elemento <path>

Se usa para pintar líneas, curvas, arcos, …

Para empezar a pintar, tenemos que hablar del parámetro «d» cuya misión es definir la forma de un elemento. Este atributo contiene una serie de comandos que a su vez utilizan más parámetros.

Comencemos por un punto, el x,y (10,10). El comando «Mover a» se llama con la letra M. Cuando se empieza a leer el código  llegamos a esa letra acompañada de dos coordenadas, sabemos que vamos a movernos a ese punto, es decir para pasar al punto (10, 10) escribiríamos «M 10 10«.

Todos los comandos tienen dos variantes, cuando los escribimos en mayúscula los referimos a coordenadas absolutas y en minúscula coordenadas relativas. Si estamos en el punto (20,20) y aplicamos M 10 10, le estamos diciendo que desde el punto en el que está se mueva hasta el punto 10, 10, si por el contrario escribimos m 10 10, le estamos diciendo que tome como referencia el punto en el que está, para desde ahí, desplazarse 10 en horizontal y 10 en vertical, es decir, en este caso acabaría en el punto 20,20

Comandos de línea

Hay cinco comandos de línea para <path>.

• M (mover a), se necesitan dos parámetros para moverse, las coordenadas, x,y. Este comando no pinta, lo que hace es desplazar el cursor donde lo definamos.
  En el siguiente código puedes ver cómo  primero  colocamos el cursor en el punto 10,10 para una vez ahí, pintar un círculo con coordenadas 10,10 (las hacemos coincidir con nuestro cursor) con un radio 2 y de color rojo
• L (línea), dibuja una línea recta desde la posición actual a la siguiente que definimos. Se escribe L x y (or l dx dy) siendo dx dy los desplazamientos en horizontal y vertical. Este desplazamiento se puede también escribir definiendo cada desplazamiento por separado:
  H x (or h dx)
  V y (or v dy)
  

  <path d="M 10 10 H 90 V 90 H 10 L 10 10"/> en este código se combinan las dos, primero definimos el cursor en el punto 10,10, luego hacemos un desplazamiento en horizontal de 90 (H 90), otro vertical de 90 (V 90) y luego mediante con el comando L le decimos que regrese en horizontal a la coordenada 10 10. Acabamos de dibujar un cuadrado negro
  También podemos utilizar el parámetro Z para cerrar el dibujo (volver al origen definido con M), de este modo el código sería:

  <path d="M 10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>

  La ruta se moverá al punto (10,10) y luego se moverá horizontalmente 80 puntos hacia la derecha, luego 80 puntos hacia abajo, luego 80 puntos hacia la izquierda y luego de regreso al inicio. Fill define el color de relleno y stroke el borde.

Comandos de curva

Son bastante más complejos, para empezar tenemos tres comandos diferentes que pueden definir curvas. Dos de ellas están basadas en Bezier y la tercera en arcos de círculo.

Curvas Bezier

La curva cúbica, C, se crea mediante Beziers cúbicos con dos puntos de control para cada punto. Por lo tanto, para crear un Bezier cúbico, debemos especificar tres coordenadas. C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
Las últimas coordenadas (x, y) definen dónde queremos que termine la línea. Los otros dos son puntos de control. (x1, y1) es el punto de control para el inicio de su curva, y (x2, y2) es el punto de control para el final.
Los puntos de control describen esencialmente la pendiente de su línea que comienza en cada punto.
Es un poco complejo, vamos a ver si puedo explicarlo con un gráfico.

Pongamos el siguiente ejemplo:  <path d=»M 10 10 C 20 20, 40 20, 50 10″ stroke=»black» fill=»transparent»/>
Os pongo aquí la explicación de cómo pinta, relacionando cada punto con sus coordenadas en el mismo color.

Para unir varias curvas de Bezier, podemos utilizar el comando S o s, lo que hace es prolongar la pendiente última que hemos creado, utilizarla como otra pendiente y desde ahí seguir dibujando. Vemos el ejemplo a continuación, en el que vemos que el proceso es el mismo que el anterior, pero después del cuarto punto hay una S y lo que ha hecho ha sido prolongar la recta pendiente (la que baja y no acaba en un punto, para luego seguir con la pendiente creada por los puntos 150,150 y 180,80

Otro tipo de curva de Bezier es la curva cuadrática Q, que es bastante más simple que la cúbica.
Mediante un punto controla la pendiente de la curva tanto en el punto inicial como en el punto final. Y al igual que con la curva de Bezier cúbica, podemos unir múltiples Beziers cuadráticos, en este caso, con el parámetro T.

Os recomiendo si os interesa este tema, que acudáis al Developer de Mozilla, ahí podréis encontrar toda la documentación necesaria para controlar los SVG.

Una utilidad muy útil que tiene el SVG es que se puede animar, seguramente hayáis visto logotipos que se van creando en una animación. Podéis ver varios ejemplos en SVGATOR, que además es una web donde podéis animar online vuestros SVG.