Guía Práctica de SVG en la web

Manipulación CSS

Una de las grandes cosas de usar SVG es que podemos cambiar los estilos de los elementos internos usando nuestro querido viejo CSS. Por ejemplo, tenemos un icono naranja, y queremos que sea azul en algunas páginas; podemos hacerlo sin tener que hacer un nuevo icono azul. Ideal.

Hay dos formas de cambiar estilos: inline en el SVG, y externamente (o sea, sin nuestra hoja de estilo). Para poner los estilos inline, hay que incluirlos dentro de una etiqueta <style> y también dentro de <![CDATA[ ... ]]>. Es mejor hacerlo así, porque a veces los parsers de XML pueden tener conflictos con ciertos caracteres (por ejemplo: >). Y aunque ahora no tengamos ningún caracter extravagante por ahí, la mejor práctica es usar CDATA, porque se podría añadir alguno más tarde y descomponerlo todo.

Los estilos inline funcionarán en la mayoría de implementaciones. <img> y background-image no soportan animaciones CSS3 aunque estén inline (ver más en la sección animaciones). background-image no soporta media queries inline (ver más en sección media queries ).

Estilos inline

<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0"
	 viewBox="0 0 692.7 180.6" style="enable-background:new 0 0 692.7 180.6;" xml:space="preserve">
	<style type="text/css">
    <![CDATA[
    .st0 { fill: #000; }
    .st3 { fill: #fff; }
    ]]>
  </style>
	<defs>
		<linearGradient id="SVGID1" gradientUnits="userSpaceOnUse" x1="0" y1="85.7255" x2="294.4443" y2="85.7255">
			<stop offset="0" style="stop-color:#EF573D" stop-opacity="1"/>
			<stop offset="1" style="stop-color:#EC2227" stop-opacity="1"/>
		</linearGradient>
	</defs>
	<path class="st0" d="M282.2,0H12.3C5.5,0,0,5.5,0,12.3v104.9c0,6.8,5.5,12.3,12.3,12.3h56.5l18.8,42v-42h0.2l0,0h194.4
	c6.8,0,12.3-5.5,12.3-12.3V12.3C294.4,5.5,288.9,0,282.2,0z" fill="url(#SVGID1)"/>
	<path class="st3" d="M227.9,96c5.2,0.8,13.3,2,21.9,2c12.8,0,16.8-4.4,16.8-11.2c0-7.1-3-9.4-15.4-14.5l-4.8-2
	c-13-5.4-19.3-10.7-19.3-20.5c0-11.3,8-16.7,24.5-16.7c8.5,0,17.6,1.4,20.8,2.4v13h-6.6l-0.9-7.5c-3.7-0.4-9.4-0.8-13-0.8
	c-11.4,0-16.6,2-16.6,9.5c0,6.4,3.7,9.1,14.3,13.6l4.8,2c15.3,6.6,20.5,10.9,20.5,21.2c0,9.5-5.7,18.4-24.9,18.4
	c-9.2,0-18.7-1.6-22.1-2.5V96z" fill="#fff"/>
	<path class="st3" d="M115.5,103.4V57.6c0-10.9-0.9-17.3-12-17.3c-5.3,0-12.4,2.3-19.3,6.4c0.6,3.2,0.9,6.4,0.9,10.9v45.9h-8.4V57.6
	c0-11.1-0.6-17.3-11.4-17.3c-5.9,0-13,2.9-19.1,6.4v56.7H38V42.1l-7.1-0.4v-6.9h15.3v5.4c6.4-4.4,13.6-7.2,20.8-7.2
	c8.2,0,12.8,2.9,15.3,7.7c8.1-5.4,15.8-7.7,22.1-7.7c18.4,0,19.3,13,19.3,24.5v45.9H115.5z" fill="#fff"/>
	<path class="st3" d="M179.8,68.9h-11.6c-16.5,0-23.1,2.3-23.1,14.5v2.4c0,9.5,5.3,12.8,13.9,12.8c8.6,0,17.1-3.8,20.9-6.2V68.9z
	 M180.2,103.4v-4.9c-4.8,2.9-12.6,6.6-22.9,6.6c-13.4,0-20.5-6.1-20.5-19.7v-1.9c0-17.4,11.2-21,31.3-21h11.6v-5.8
	c0-13.4-2.9-16.6-18.2-16.6c-3.6,0-7.5,0.1-12.9,0.5l-0.8,7.7h-6.4V35.4c4.7-0.9,12.4-2.4,20.7-2.4c21.9,0,25.9,7.5,25.9,23.6v46.8
	H180.2z" fill="#fff"/>
	<polygon class="st3" points="204.9,103.4 204.9,42.1 198,41.8 198,34.8 213.3,34.8 213.3,103.4" fill="#fff"/>
</svg>

Si se quieren usar estilos externos, con los que habitualmente es más fácil trabajar y son más fáciles de mantener, no se puede usar <img> ni background-image. Si se usa <object>, necesitamos referenciar la hoja de estilo internamente desde el archivo SVG (ver el código más abajo). Recuerda: si lo haces así, el SVG no podrá saber cuál es su clase heredada (o sea, el <object>), así que no intentes hacerlo así para definir estilos. Los SVGs inline no necesitan incluir esto y por lo tanto es algo más fácil trabajar con ellos en este sentido.

Estilos externos

// Add to very start of SVG file before <svg>
<?xml-stylesheet type="text/css" href="style.css"?>

// In style.css
.st { fill: #000; }
.st1 { fill: #fff; }

Manipulación JS

Sólo apuntaremos algunas pistas básicas sobre cómo usar JS para cambiar cosas en un SVG. Si quieres incrustar los scripts dentro del archivo SVG, recuerda incluirlos entre <![CDATA[ ... ]]>, también para evitar errores de parsing. Los scripts no se ejecutarán si se usa <img> o background-image como medida de seguridad (esto es, para prevenir la ejecución de código potencialmente malicioso en la página).

Al trabajar con JS externo (o sea, no incrustado en el archivo SVG), si tenemos el SVG inline, podemos apuntar a él como haríamos con cualquier otro elemento DOM. Si se usa un <object> podemos apuntar a él con contentDocument. Se puede ser mucho más creativo, pero aquí dejo un ejemplo:

Scripts externos

window.onload=function() {
  var object = document.getElementById("logoObject");
  var svgDocument = object.contentDocument;
  var svgb1 = svgDocument.getElementsByClassName("st");
  var svgb2 = svgDocument.getElementsByClassName("st1");
  svgb1[0].setAttribute("fill", "#000");
  svgb2[0].setAttribute("fill", "#fff");
};

Anchura fija vs adaptatividad

Cuando se usan imágenes en la web en diseños adaptativos, hay dos opciones para darles estilo: se pueden mantener con tamaño fijo y ajustar para los puntos de cambio (breakpoints) si es necesario; o dejar que se redimensionen con la página dependiendo de su container correspondiente.

Si son de tamaño fijo, con lo único que hay que tener cuidado es que si usamos el SVG como background-image hay que asegurarse de incluir un background-size, porque los navegadores se pueden confundir y pueden o cortar la imagen o encogerla, especialmente si la imagen se muestra con un tamaño distinto del original.

Animación

Cuando se trata de animar SVGs, hay una pocas opciones que podemos usar: animación SVG (basada en la especificación SMIL), animaciones CSS3, o animaciones JS. La animación SVG y las animaciones CSS3 permitirán hacer la mayoría de las cosas que queramos, siendo la animación SVG ligeramente más potente al tener control sobre algunas cosas más. JavaScript permite hacer animaciones bastante complejas de forma relativamente fácil, especialmente con bibliotecas como Snap.svg. La animación SVG es súper potente. Puedo imaginar que será útil para ilustraciones que nos gustaría que incluyesen alguna bonita animación, pero, desde un punto de vista práctico, no todos los proyectos disponen de tiempo o de presupuesto para invertir en esto. Pero si lo haces, realmente es muy fácil empezar a jugar con esto, y hay algunos tutoriales estupendos online. Básicamente, se añade un elemento hijo de <animate> a cualquier “path” o forma de los SVGs, que controlarán la animación. Y lo mejor es que funciona con cualquier método de implementación. Internet Explorer no soporta animación SVG; pero se puede usar un polyfill, como FakeSmile si necesitas que funcione en IE también.

A menudo, cuando queremos animar un icono o una ilustración en la web, tendrá que ver con una interacción, por ejemplo, al pasar por encima, etc. Esto entraría en las categorías Manipulación CSS y Animación SVG Interactiva en la tabla de competencias de arriba, y por tanto no funciona con animación SVG ni con animaciones CSS3 si se usa <img> o background-image. Para conseguir animaciones interactivas con animación SVG podemos añadir begin="mouseover" y begin="mouseout", y con animaciones CSS3 como se haría en cualquier otro sitio: añadir clases a los elementos del SVG y darles estilo en hover. Una cosa a tener en cuenta es que si queremos dar estilo a las animaciones desde la hoja de estilo externa, funcionará como esperamos si tenemos el SVG inline, pero si usamos <object>, necesitaremos referenciar la hoja de estilo externa desde dentro del SVG también.

Animación SVG interactiva

Sólo funciona con <object> o inline.

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!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="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0"
	 viewBox="0 0 692.7 180.6" style="enable-background:new 0 0 692.7 180.6;" xml:space="preserve">
	<defs>
		<linearGradient id="SVGID1" gradientUnits="userSpaceOnUse" x1="0" y1="85.7255" x2="294.4443" y2="85.7255">
			<stop offset="0" style="stop-color:#EF573D" stop-opacity="1"/>
			<stop offset="1" style="stop-color:#EC2227" stop-opacity="1"/>
		</linearGradient>
	</defs>
	<path class="st0" d="M282.2,0H12.3C5.5,0,0,5.5,0,12.3v104.9c0,6.8,5.5,12.3,12.3,12.3h56.5l18.8,42v-42h0.2l0,0h194.4
	c6.8,0,12.3-5.5,12.3-12.3V12.3C294.4,5.5,288.9,0,282.2,0z" fill="url(#SVGID1)"/>
	
	
	<path class="st3" d="M227.9,96c5.2,0.8,13.3,2,21.9,2c12.8,0,16.8-4.4,16.8-11.2c0-7.1-3-9.4-15.4-14.5l-4.8-2
	c-13-5.4-19.3-10.7-19.3-20.5c0-11.3,8-16.7,24.5-16.7c8.5,0,17.6,1.4,20.8,2.4v13h-6.6l-0.9-7.5c-3.7-0.4-9.4-0.8-13-0.8
	c-11.4,0-16.6,2-16.6,9.5c0,6.4,3.7,9.1,14.3,13.6l4.8,2c15.3,6.6,20.5,10.9,20.5,21.2c0,9.5-5.7,18.4-24.9,18.4
	c-9.2,0-18.7-1.6-22.1-2.5V96z" fill="#fff"/>
	<path class="st3" d="M115.5,103.4V57.6c0-10.9-0.9-17.3-12-17.3c-5.3,0-12.4,2.3-19.3,6.4c0.6,3.2,0.9,6.4,0.9,10.9v45.9h-8.4V57.6
	c0-11.1-0.6-17.3-11.4-17.3c-5.9,0-13,2.9-19.1,6.4v56.7H38V42.1l-7.1-0.4v-6.9h15.3v5.4c6.4-4.4,13.6-7.2,20.8-7.2
	c8.2,0,12.8,2.9,15.3,7.7c8.1-5.4,15.8-7.7,22.1-7.7c18.4,0,19.3,13,19.3,24.5v45.9H115.5z" fill="#fff"/>
	<path class="st3" d="M179.8,68.9h-11.6c-16.5,0-23.1,2.3-23.1,14.5v2.4c0,9.5,5.3,12.8,13.9,12.8c8.6,0,17.1-3.8,20.9-6.2V68.9z
	 M180.2,103.4v-4.9c-4.8,2.9-12.6,6.6-22.9,6.6c-13.4,0-20.5-6.1-20.5-19.7v-1.9c0-17.4,11.2-21,31.3-21h11.6v-5.8
	c0-13.4-2.9-16.6-18.2-16.6c-3.6,0-7.5,0.1-12.9,0.5l-0.8,7.7h-6.4V35.4c4.7-0.9,12.4-2.4,20.7-2.4c21.9,0,25.9,7.5,25.9,23.6v46.8
	H180.2z" fill="#fff"/>
	<polygon class="st3" points="204.9,103.4 204.9,42.1 198,41.8 198,34.8 213.3,34.8 213.3,103.4" fill="#fff"/>
	<g opacity="0">
		<animate attributeName="opacity" to="0.3" begin="anchor.mouseover" dur="0.5" fill="freeze"/>
		<animate attributeName="opacity" to="0" begin="anchor.mouseout" dur="0.5" fill="freeze"/>
		<path class="st0" d="M282.2,0H12.3C5.5,0,0,5.5,0,12.3v104.9c0,6.8,5.5,12.3,12.3,12.3h56.5l18.8,42v-42h0.2l0,0h194.4
	c6.8,0,12.3-5.5,12.3-12.3V12.3C294.4,5.5,288.9,0,282.2,0z" fill="url(#SVGID1)" />
	</g>
	<a id="anchor">
	<rect x="0" y="0" width="300" height="220" fill-opacity="0"/>
	</a> </svg>

Animación CSS3

Sólo funciona con <object> o inline. También funciona con CSS externo, como se explicó arriba.

<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0"
	 viewBox="0 0 692.7 180.6" style="enable-background:new 0 0 692.7 180.6;" xml:space="preserve">
	<style type="text/css">
    <![CDATA[
    .st0 { fill: #000; transition: fill 0.1s; }
    .st3 { fill: #fff; transition: fill 0.1s; }
    .st3:hover { fill: red; }
    ]]>
  </style>
	<defs>
		<linearGradient id="SVGID1" gradientUnits="userSpaceOnUse" x1="0" y1="85.7255" x2="294.4443" y2="85.7255">
			<stop offset="0" style="stop-color:#EF573D" stop-opacity="1"/>
			<stop offset="1" style="stop-color:#EC2227" stop-opacity="1"/>
		</linearGradient>
	</defs>
	<path class="st0" d="M282.2,0H12.3C5.5,0,0,5.5,0,12.3v104.9c0,6.8,5.5,12.3,12.3,12.3h56.5l18.8,42v-42h0.2l0,0h194.4
	c6.8,0,12.3-5.5,12.3-12.3V12.3C294.4,5.5,288.9,0,282.2,0z" fill="url(#SVGID1)"/>
	<path class="st3" d="M227.9,96c5.2,0.8,13.3,2,21.9,2c12.8,0,16.8-4.4,16.8-11.2c0-7.1-3-9.4-15.4-14.5l-4.8-2
	c-13-5.4-19.3-10.7-19.3-20.5c0-11.3,8-16.7,24.5-16.7c8.5,0,17.6,1.4,20.8,2.4v13h-6.6l-0.9-7.5c-3.7-0.4-9.4-0.8-13-0.8
	c-11.4,0-16.6,2-16.6,9.5c0,6.4,3.7,9.1,14.3,13.6l4.8,2c15.3,6.6,20.5,10.9,20.5,21.2c0,9.5-5.7,18.4-24.9,18.4
	c-9.2,0-18.7-1.6-22.1-2.5V96z" fill="#fff"/>
	<path class="st3" d="M115.5,103.4V57.6c0-10.9-0.9-17.3-12-17.3c-5.3,0-12.4,2.3-19.3,6.4c0.6,3.2,0.9,6.4,0.9,10.9v45.9h-8.4V57.6
	c0-11.1-0.6-17.3-11.4-17.3c-5.9,0-13,2.9-19.1,6.4v56.7H38V42.1l-7.1-0.4v-6.9h15.3v5.4c6.4-4.4,13.6-7.2,20.8-7.2
	c8.2,0,12.8,2.9,15.3,7.7c8.1-5.4,15.8-7.7,22.1-7.7c18.4,0,19.3,13,19.3,24.5v45.9H115.5z" fill="#fff"/>
	<path class="st3" d="M179.8,68.9h-11.6c-16.5,0-23.1,2.3-23.1,14.5v2.4c0,9.5,5.3,12.8,13.9,12.8c8.6,0,17.1-3.8,20.9-6.2V68.9z
	 M180.2,103.4v-4.9c-4.8,2.9-12.6,6.6-22.9,6.6c-13.4,0-20.5-6.1-20.5-19.7v-1.9c0-17.4,11.2-21,31.3-21h11.6v-5.8
	c0-13.4-2.9-16.6-18.2-16.6c-3.6,0-7.5,0.1-12.9,0.5l-0.8,7.7h-6.4V35.4c4.7-0.9,12.4-2.4,20.7-2.4c21.9,0,25.9,7.5,25.9,23.6v46.8
	H180.2z" fill="#fff"/>
	<polygon class="st3" points="204.9,103.4 204.9,42.1 198,41.8 198,34.8 213.3,34.8 213.3,103.4" fill="#fff"/>
</svg>

Uso como sprites

Se pueden crear y usar sprites SVG igual que hacemos habitualmente con PNGs y background-image para tener beneficios de resolución, o podemos dar un paso más y usar la potencia extra que tenemos con SVG. El beneficio es que obtenemos toda la potencia del SVG con menos solicitudes HTTP.

Hay dos posibles aproximaciones. En la primera, definimos todos los iconos dentro de los elementos <symbol> del SVG, pero los ocultamos. Luego referenciamos cada uno cuando se necesiten con un elemento <use> que referencie el <symbol> con xlink:href="#id". La segunda aproximación usa el atributo viewbox del SVG para recortar el área “artboard” (el área del SVG que se muestra) alrededor de una cierta zona. Ambos son usos bastante avanzados de SVG, así que sólo deberíamos preocuparnos de ellos si los vamos a usar.

Si quieres aprender a usar estas técnicas, echa por favor una ojeada a los enlaces de recursos, especialmente el artículo de Sara Soueidan’s en 24ways .

Si se quiere usar un sprite SVG como se haría con un sprite PNG con CSS, debemos indicar que es necesario añadir los atributos width y height junto al atributo viewBox en el código del SVG. Durante el proceso de optimización se suelen eliminar, porque normalmente no se necesitan. En este caso, sin embargo, IE9 y 10 los necesitan para poder recortar correctamente parte de la imagen del sprite. La razón es que estos navegadores cogen el ancho y alto especificados en el CSS para el tamaño de imagen, pero estos son en realidad los tamaños de la parte de la imagen que se necesita (no de toda la imagen). Confuso, ya lo sé, pero es algo con lo que me encontré recientemente.

Media queries

Una cosa realmente chula de SVGs es que si se usan media queries en los estilos incrustados en el archivo, en lugar de trabajar desde el tamaño de viewport, trabajarán desde el tamaño de viewport del SVG. Esto significa básicamente que se traen de fábrica su propia implementación de trabajo de los elementos de las queries. Qué bueno. Esto nos permite controlar cómo se verá el SVG sea cual sea el tamaño.

Imagina que eres una gran marca y quieres que tu logo se use correctamente independientemente del tamaño en que se muestre. Bueno, pues desde luego que se puede hacer. Sólo hay que incrustar algunas media queries y se puede cambiar su formateo basándose en el tamaño en que se está mostrando. Esto funciona con todas las implementaciones menos background-image, y en todos los navegadores (nota: IE9–11 parece ignorar algunos puntos de cambio (breakpoints)). Puedes jugar con el deslizador de abajo para ver un ejemplo de cómo funciona:

Contingencias

Unas palabras sobre contingencias. SVG está soportado en todos los navegadores modernos. Si aun tienes que dar soporte a IE8, entonces tendrás que implementar contingencias, más probablemente en forma de PNGs. No me extenderé mucho en esto, porque probablemente ya no deberías estar dando soporte a IE8 ¯\_(ツ)_/¯. De todas formas, si quieres disponer de contingencias, básicamente las cosas se complican mucho y muy rápido, como suele ocurrir con SVG. Recomendaría leer este artículo exhaustivo de Amelia Bellamy-Royds en CSS-Tricks.

Recursos

General

• Ultimate guide to SVG
• How to Add SVGs to Your Web Page
• W3C About SVG
• Rethinking Responsive SVG
• Making SVGs Responsive
• Using SVG
• SVG Styling

Optimising

• Tips For Optimising SVG Delivery For The Web
• How To Optimize SVG
• Understanding and Manually Improving SVG Optimization
• SVG Optimization Video
• SVGOMG — SVGO GUI in browser

Animating

• A Guide to SVG Animations
• Styling And Animating SVGs With CSS
• SVG animations for fun and profit
• Snap.svg
• SVG.js

Spriting

• An Overview of SVG Sprite Creation Techniques
• Structuring, Grouping, and Referencing in SVG
• A guide to SVG <use> elements
• Grunticon
• SVG icon workflow
• Inline SVG icons