Imágenes Vectoriales en la web - SVG Responsive en HTML5

Para añadir vectores a nuestra web vamos a usar uno de los formatos de imágenes vectoriales que tenemos disponible, el  SVG (Scalable Vector Graphics).

Una de las cualidades que hace tan atractivo este formato, es que al utilizar vectores, se pueden ampliar sin que pierda calidad.

A continuación podéis ver el vector que hemos creado y la distribución en capas de las figuras.

Pongamos una capa principal que agrupa 4 formas.

- Cuadrado
- Circulo.
- Estrella.
- Sin Forma.

Como consejo cuanto mas simple sea el vector, mejor. Para ello podemos simplificarlo en Objeto > Trazado > Contornear Trazado.

A continuación guardamos el vector en Illustrator > Guardar Como > SVG con las siguientes opciones:

- Perfiles SVG 1.1
- Ubicación de Imagen  > Enlazar
- Opciones Avanzadas > Propiedades CSS > Elemento de Estilo
- Opciones Avanzadas > Decimales > 3
- Opciones Avanzadas > Marcar la opción Imprimir menos elementos <tspan>

A continuación añadimos nuestra imagen vectorial al HTML.

Existen tres maneras de referenciar el SVG, con la etiqueta <img>, <object> o incrustarlo dentro del HTML pegando la etiqueta <svg>.

A continuación podémos ver las dos primeras con el atributo width="100%", esto lo hacemos para que Internet Explorer lo trate como el resto de los navegadores que no es más que como una imagen escalable.

<img width="100%" src="vector-arbol.svg" />

<object><embed width="100%" src="vector-arbol.svg"></object>

Ahora nos a centrarnos en el código que tenemos del vector.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_Principal" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px" viewBox="0 45 300 194" style="enable-background:new 0 45 300 194;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#A3BD31;stroke:#727176;stroke-width:3;stroke-miterlimit:10;}
    .st1{fill:#DB9600;stroke:#FEEE00;stroke-width:3;stroke-miterlimit:10;}
    .st2{fill:#76AADB;stroke:#002E82;stroke-width:3;stroke-miterlimit:10;}
    .st3{fill:#BF0411;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
</style>
<path id="Sin_Forma" class="st0" d="M270.523,215.885c-84.824-14.106-167.837-15.06-248.648,0v-43.75
    c80.134,19.754,163.103,19.134,248.648,0V215.885z"/>
<polygon id="Estrella" class="st1" points="239.844,75.19 252.865,101.573 281.981,105.804 260.912,126.341 265.885,155.34 
    239.844,141.648 213.802,155.34 218.775,126.341 197.706,105.804 226.823,101.573 "/>
<circle id="Circulo" class="st2" cx="147.123" cy="118.75" r="35.677"/>
<rect id="Cuadrado_1_" x="21.354" y="83.073" class="st3" width="71.354" height="71.354"/>
</svg>

Para empezar podemos quitar las líneas correspondientes a la versión de XML, el DOCTYPE y el comentario generado por Adobe Illustrator de esta manera nos quedaremos sólo con la etiqueta <svg> .

Si nos fijamos bien cada capa que hemos creado en nuestro SVG se han convertido en una ID con el nombre de la capa que hemos puesto en Illustrator. Esto lo hemos conseguido al elegir Elemento de Estilo al exportar nuestra imagen vectorial.

También podemos ver una serie de clases dentro de la etiqueta <style type="text/css"> que contiene rellenos y bordes (fill:stroke) que están aplicadas a las diferentes formas que hemos creado.

<path id="Sin_Forma">  Se utiliza en para una forma compleja.
<polygon id="Estrella">
<circle id="Circulo">
<rect id="Cuadrado">

Cada forma va acompañada de sus coordenadas. Otras formas que existen son <line> <elipse> <text> <g>, esta última para crear grupos. No dudéis en visitar el artículo sobre Vectores SVG de la Wikipedia.

Nuestro consejo es que utilicéis las IDs para identificar las figuras, nombrando correctamente cada clase, ya que los nombres que genera no son muy descriptivos (.st0 .st01 . st02 .st03) y a continuación las borréis.

Ya podemos pasar a manipular nuestro SVG. Por ejemplo si queremos cambiar el tamaño, añadimos el estilo CSS a la etiqueta <svg>.

svg{width: 80%;}

Para hacer RollOvers simplemente localizamos la capa que queramos y añadimos el estilo CSS

.Estrella:hover{stroke:#333;fill:#BF1;}

También podemos animar las figuras que queramos por ejemplo con Animate.css. En nuestro caso hemos añadido las clases animated infinite wobble a la capa id="Sin_Forma".

Para animaciones mas complejas os recomendamos Snap.svg

Otra cosa que podemos hacer es hacer nuestro SVG Responsive añadiendo media queires, en este ejemplo vamos a cambiar el color del cuadrado.

@media screen and (max-width:1300px){
  #Cuadrado{fill:blue;}
}

Como siempre os hemos dejado un ejemplo en nuestro CodePen.

See the Pen SVG en HTML by Pedro Marín (@pedromarin) on CodePen.

Por último el formato SVG es válido por todos los navegadores y versiones superiores de Internet Explorer 8, como podemos ver en Can I use, pero existen varios Polyfills como SVG for EVERYBODY o SVG-Swap para solucionar este problema, lo que van a hacer es si el navegador no soporta el formato SVG nos va a cargar una imagen no vectorial.

Teniendo en cuenta cómo funcionan estos Polyfills también podemos dar soporte a través de SVG en  HTML5, como podemos ver en el siguiente ejemplo.

<figure>
   <picture>
      <source type="image/svg+xml" srcset="ejemplo-vectores.svg">
      <img src="ejemplo-vectores.png" alt="Ejemplo de Vectores">
   </picture>
</figure>

Simplemente si no reconoce la etiqueta <source> nos mostrará la siguiente que es <img>.