All posts tagged: Animaciones con SVG

Guía Práctica de SVG en la web

Sin comentarios

Introducción

Vivimos en la era de los píxels. Como diseñadores y desarrolladores web, los píxels pueden ser tanto nuestros amigos como nuestros enemigos. Queremos que todo sea bonito y nítido para cualquiera que use algunos de los websites en los que trabajamos, pero debemos mantener bajos los tamaños de archivo para no afectar al rendimiento. Y no nos quedan muchas otras opciones cuando se trata de iconos, logos e ilustraciones en la web que no sean SVG. Los Scalable Vector Graphics (Gráficos Vectoriales Escalables) pueden quedar nítidos a cualquier resolución de pantalla, pueden tener tamaños de archivo súperpequeños, y pueden ser fácilmente editados y modificados.

Esta guía pretende ofrecer una visión práctica de cómo usar SVGs en tus websites, dando algunos consejos y trucos para sacarles el máximo partido.

SVG

Scalable Vector Graphics es un lenguaje de marcado (markup) basado en XML que puede contener vectores bidimensionales. Los vectores pueden ser formas simples, sucesiones de vectores (“paths”), o cualquier otra cosa que se pueda hacer en el Illustrator. Es un formato de imagen que tiene más en común con una página web que con una imagen JPEG. SVG es mucho más potente que cualquier otro formato de imagen que podamos usar en la web, ya que podemos manipularla mediante código (sea en el editor de texto o con CSS / JS).

  • Independiente de la resolución
  • Implementado en todos los navegadores modernos
  • Protegido contra cambios futuros (es un estándar del W3C)
  • Fácil de hacer y editar
  • Manipulable con CSS y JS
  • Altamente compresible

Preparación & Optimización

Preparar un SVG para usarlo en la web es un proceso simple, no más complicado que exportar un JPEG o un PNG. Trabaja como lo harías normalmente en tu editor de gráficos vectoriales preferido (Illustrator, Sketch, Inkscape [que es libre], etc [o incluso Photoshop si usas capas de formas]) con el gráfico del tamaño con el que esperes que vayas a usarlo. Explicaremos algunas cosas que hacemos en Illustrator, que es el que usamos normalmente, pero los mismos principios se aplican a cualquier software. Probablemente querrás convertir los textos a contornos, ya que lo más probable es que no se muestre en la tipografía correcta a no ser que tengas pensado darle estilo con una tipografía web que uses en la página (¡se puede hacer!). No te preocupes por expandir todos los objetos a formas sólidas, sobre todo si tienes trazos, ya que podrías querer manipularlos en la página, y normalmente expandirlos no reduce el tamaño de archivo. Los nombres que pongas en las capas o grupos se incluirán en el SVG como una ID del elemento. Esto puede venir bien para dar estilos, pero aumentará un poco el tamaño final del archivo.

Al exportar, asegúrate de que el diseño está sobre un área de píxels enteros (o sea, no 23.3px X 86.8px); sino, puede que no quede realmente nítido, y luego recorta el área de trabajo (artboard) alrededor. Puedes hacerlo en Illustrator con Object > Artboards > Fit to Artwork Bounds. Luego pulsa guardar como y elige SVG con los ajustes por defecto. Se puede hacer alguna optimización aquí, pero no vale realmente la pena, porque luego lo optimizaremos en post-proceso, y el tiempo que pasemos jugando aquí con los ajustes será perdido.

Trucos para reducir el archivo

(Ver recursos para enlaces a artículos externos)

Hay bastantes buenos artículos sobre optimización de SVG en la web, que ofrecen mucha información sobre el tema, pero me gustaría compartir unos consejos y trucos que para nosotros son los más efectivos y útiles. No suponen mucho más trabajo y pueden añadirse fácilmente a tu rutina habitual.

Para mantener los SVGs lo más pequeños posible querremos eliminar efectivamente todo lo que no sea necesario. La herramienta más conocida y (para mí) la mejor para post-procesar SVGs es SVGO. Sirve para eliminar todo el código que no se necesita — nota: recuerda ser cuidadoso al usarlo si tienes pensado manipular con CSS / JS, ya que a veces puede sobre-optimizar los archivos, haciendo más difícil hacer luego con ellos lo que habías pensado. Algo muy práctico de SVGO es que puede añadirse al proceso de trabajo para que sea automático (o se puede usar un GUI para hacerlo uno mismo, si se prefiere).

Dando un paso más en lo de ‘eliminar todo lo innecesario’, podemos hacer algo más en el editor gráfico. Primero, asegurarnos de que estamos usando el menor número posible de “paths” y formas para conseguir lo que queremos, y también de que hay el menor número posible de puntos en los “paths”. Se trata de combinar y simplificar todo lo que se pueda, y luego eliminar el mayor número posible de puntos de los “paths”. VectorScribe es un plugin de Illustrator que incluye Smart Remove Brush Tool (Pincel de Eliminación Inteligente), que permite eliminar puntos manteniendo la forma general intacta.

Luego tendremos que hacer zoom. Con Illustrator habilitaremos Pixel Preview con View > Pixel Preview, y miraremos dónde tenemos los puntos. Para reducir el tamaño al mínimo, los puntos deben ajustarse a la parrilla de píxels (o sea, sobre valores enteros de píxel). Lleva algún tiempo engancharlos y recolocarlos, pero vale la pena este pequeño esfuerzo añadido, ya que esto también nos asegura la reproducción más nítida posible (recuerda que es posible que antes te hayan quedado algunas zonas a medio píxel).

Si hay dos (o más) formas alineadas, podemos eliminar las áreas solapadas. Una cosa que hay que vigilar es que a veces queda una línea blanca entre ellas, aunque los “paths” estén alineados, así que a veces hay que solaparlas un poco para evitarlo. Nota: en SVG el índice z se define por el orden en que aparecen en el código, siendo el de más abajo el que está encima, así que hay que poner las formas de encima más abajo en el código.

Último pero no menos importante, una cosa que se suele olvidar, recuerda habilitar la compresión gzip para SVGs en tus websites en el archivo .htaccess.

AddType image/svg+xml svg svgz
<IfModule mod_deflate.c>
    <IfModule mod_filter.c>
        AddOutputFilterByType DEFLATE "image/svg+xml" \
                                      "text/css" \
                                      "text/html" \
                                      "text/javascript"
                                      ... etc
    </IfModule>
</IfModule>

Opciones de implementación

A la hora de usar SVGs en la web, hay varias formas de trabajar. Algunas ofrecen beneficios que nos pueden ser útiles dependiendo del resultado que queramos, y otras será mejor evitarlas. Si queremos atenernos a lo básico para lograr los beneficios de independencia de resolución y pequeño tamaño de archivo, podemos referenciar el SVG en un img o como background-image en CSS, igual que haríamos con cualquier otro formato de imagen.

Como haríamos con cualquier otra imagen. También se pueden usar SVGs en un elemento <picture>. Nótese que este método limita las funcionalidades de manipulación.

<img src="logo.svg" alt="Logo" height="65" width="68">

Background-image

Es mejor no codificarlos con base64, ya que se bloqueará la carga del resto de estilos mientras se descarga. Nótese que este método limita las funcionalidades de manipulación.

.logo {
  background-image: url(logo.svg);
}

Iframe

Se pueden cargar SVGs en un <iframe>. Esto permite hacer la mayoría de las cosas, pero no estoy seguro de que sea el mejor método si queremos avanzar ¯\_(ツ)_/¯.

<iframe src="logo.svg">Your browser does not support iframes</iframe>

Embed

<embed> está pensado para integrar ‘una aplicación externa’ o ‘contenido interactivo’. Se puede usar para SVGs, pero es preferible no hacerlo.

<embed type="image/svg+xml" src="logo.svg" />

Object

<object> es la mejor opción si queremos poder manipular un SVG sin tener que ponerlo inline en el HTML.

<object type="image/svg+xml" data="logo.svg">Your browser does not support SVGs</object>

Inline

Poner el código SVG inline ahorrará una solicitud HTTP, pero la imagen no quedará en la caché del navegador. Es la forma más fácil para manipular, pero mantener código SVG inline puede ser una lata.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 294.44 171.45">
<defs>
<linearGradient id="linear-gradient" y1="85.73" x2="294.44" y2="85.73" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ef573d"/>
<stop offset="1" stop-color="#ec2227"/>
</linearGradient>
</defs>
<path d="M282.17,0H12.28A12.28,12.28,0,0,0,0,12.29V117.15a12.28,12.28,0,0,0,12.28,12.29H68.76l18.82,42v-42H282.17a12.28,12.28,0,0,0,12.28-12.29V12.29A12.28,12.28,0,0,0,282.17,0Z"/>
</svg>

Para concluir

Si quieres sacar el máximo partido a tus SVGs, usa <object>. Alternativamente puedes meterlo inline para ahorrar solicitudes HTTP, pero no se almacenará en caché. Si sólo quieres usar SVGs como lo harías con cualquier otra imagen, usa <img> o background-image. También es posible usar <iframe> y <embed>, pero no creo que sean las mejores opciones a seguir (y acorde con los propósitos de este site, no trataré más sobre ellas).

 ObjectInlineImgBackground-image
Manipulación CSSAlgunas inlineAlgunas inline
Manipulación JSNoNo
Animación SVG
Animación SVG InteractivaNoNo

Nota: ‘Algunas inline’ significa que algunas funcionan, pero sólo si el <style> CSS está incrustado dentro del código del SVG. Más información en la sección siguiente.

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.

Vía: https://svgontheweb.com/

Jesús QuintanaGuía Práctica de SVG en la web
leer más