Cómo usar iconos SVG y no morir en el intento

Los iconos SVG están desplazando a los iconos tradicionales (imágenes en mapa de bits: PNG, GIF, etc.) en los proyectos web, ya que son livianos, pueden adoptar cualquier tamaño sin distorsionarse, no es necesario alojarlos, entre otros aspectos; sin embargo, cuando decidimos embarcarnos en el bote de la modernidad, nos topamos con algo desconocido que ni se puede subir a este servicio. ¿Cómo emplearlos y no morir embrollados en el intento? Basta con solo descargarlo, abrir el documento en un editor de texto (como el Bloc de notas de Windows) y llevarnos el código que contiene, el cual, en su forma básica, vendría siendo similar al siguiente:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 112.196 112.196" width="32" height="32">
  <circle style="fill:#3B5998;" cx="56.098" cy="56.098" r="56.098" />
  <path style="fill:#FFFFFF;" d="M70.201,58.294h-10.01v36.672H45.025V58.294h-7.213V45.406h7.213v-8.34c0-5.964,2.833-15.303,15.301-15.303L71.56,21.81v12.51h-8.151c-1.337,0-3.217,0.668-3.217,3.513v7.585h11.334L70.201,58.294z" />
</svg>

Si nos llevamos el código anterior a nuestra plantilla, como resultado veremos un bonito icono de Facebook de 32×32 píxeles. El tamaño del icono se define con los ya familiares atributos width, para el ancho, y height, para el alto. Usualmente, esos dos valores están ausentes en los SVG que descargamos, por lo que veremos el icono en su tamaño original si nos olvidamos de ese detalle. Con esto dicho, ya puedes hacer uso de ellos.

Ahora analicemos los siguientes dos casos: si queremos agregar el mismo icono varias veces, nuestro sentido común nos indica que simplemente debemos duplicar el código y llevarlo al lugar preferido, pero no es muy práctico que digamos; y si deseamos agregar muchos más iconos, nuestra plantilla puede adoptar una apariencia algo enrevesada. Para estas situaciones, consideremos lo siguiente:

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="facebook-icon" viewBox="0 0 112.196 112.196">
    <circle style="fill:#3B5998;" cx="56.098" cy="56.098" r="56.098" />
    <path style="fill:#FFFFFF;" d="M70.201,58.294h-10.01v36.672H45.025V58.294h-7.213V45.406h7.213v-8.34c0-5.964,2.833-15.303,15.301-15.303L71.56,21.81v12.51h-8.151c-1.337,0-3.217,0.668-3.217,3.513v7.585h11.334L70.201,58.294z" />
  </symbol>
</svg>

En apariencia tenemos un nuevo código, pero en realidad es el mismo icono. Lo que hicimos fue encerrar el contenido del SVG inicial con la etiqueta symbol e identificarlo con un ID, que en este caso llamamos facebook-icon, sin olvidarnos trasladar el viewBox correspondiente. Podemos ubicarlo en cualquier parte del cuerpo (body) de nuestra plantilla, ya que por sí solo no mostrará nada. Lo que falta por hacer es llamar al icono por el ID (lo que está resaltado en verde) que le hemos asignado, sin olvidarnos definir el tamaño:

<svg width="32" height="32"><use xlink:href="#facebook-icon"></use></svg>
<svg width="64" height="64"><use xlink:href="#facebook-icon"></use></svg>
<svg width="24" height="24"><use xlink:href="#facebook-icon"></use></svg>

Con lo previo obtendremos tres iconos de Facebook con distintas dimensiones. Siguiendo la misma línea, podemos añadir cuantos iconos diferentes nos apetezca con la etiqueta symbol para llamarlos después con la etiqueta use, como podrás observar si le otorgamos vida al siguiente ejemplo:

<svg width="32" height="32"><use xlink:href="#facebook-icon"></use></svg>
<svg width="32" height="32"><use xlink:href="#tumblr-icon"></use></svg>
<svg width="32" height="32"><use xlink:href="#pinterest-icon"></use></svg>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="facebook-icon" viewBox="0 0 112.196 112.196">
    <circle style="fill:#3B5998;" cx="56.098" cy="56.098" r="56.098" />
    <path style="fill:#FFFFFF;" d="M70.201,58.294h-10.01v36.672H45.025V58.294h-7.213V45.406h7.213v-8.34c0-5.964,2.833-15.303,15.301-15.303L71.56,21.81v12.51h-8.151c-1.337,0-3.217,0.668-3.217,3.513v7.585h11.334L70.201,58.294z" />
  </symbol>
  <symbol id="tumblr-icon" viewBox="0 0 112.197 112.197">
    <circle style="fill:#395976;" cx="56.099" cy="56.098" r="56.098"/>
    <path style="fill:#F1F2F2;" d="M58.178,38.032V22.966h-9.725c-0.219,0.55-0.327,1.221-0.327,1.891c-0.102,0.327-0.222,0.564-0.222,0.89c-0.997,5.587-3.899,9.484-8.814,11.613c-1.459,0.673-2.798,0.775-4.242,0.673v12.146h7.146c0.116,17.092,0.116,25.903,0.116,26.351v1.013c0.897,7.457,4.796,11.926,11.717,13.606c2.785,0.772,5.794,1.116,8.814,1.116c3.9-0.12,7.696-0.789,11.493-2.007V75.964c-2.218,0.67-4.241,1.234-6.026,1.786c-3.456,1.01-6.358,0.341-8.713-1.891c-0.222-0.341-0.551-0.79-0.667-1.237c-0.329-1.784-0.538-3.678-0.538-5.461V50.178h15.497V38.032H58.178z" />
  </symbol>
  <symbol id="pinterest-icon" viewBox="0 0 112.198 112.198">
    <circle style="fill:#CB2027;" cx="56.099" cy="56.1" r="56.098" />
    <path style="fill:#F1F2F2;" d="M60.627,75.122c-4.241-0.328-6.023-2.431-9.349-4.45c-1.828,9.591-4.062,18.785-10.679,23.588c-2.045-14.496,2.998-25.384,5.34-36.941c-3.992-6.72,0.48-20.246,8.9-16.913c10.363,4.098-8.972,24.987,4.008,27.596c13.551,2.724,19.083-23.513,10.679-32.047c-12.142-12.321-35.343-0.28-32.49,17.358c0.695,4.312,5.151,5.621,1.78,11.571c-7.771-1.721-10.089-7.85-9.791-16.021c0.481-13.375,12.018-22.74,23.59-24.036c14.635-1.638,28.371,5.374,30.267,19.14C85.015,59.504,76.275,76.33,60.627,75.122L60.627,75.122z" />
  </symbol>
</svg>

Si contamos con la posibilidad de subir archivos SVG a nuestro sitio (esto no se puede hacer en Blogger), podremos llevarnos el último bloque de código a nuestro editor de texto, guardarlo con extensión SVG y subirlo, para luego llamarlo con la etiqueta use, siempre y cuando la página en donde va ir el icono y el archivo SVG compartan el mismo dominio (p. ej. www.midominio.com) y protocolo (p. ej. https):

<svg width="32" height="32"><use xlink:href="URL-ARCHIVO-SVG#facebook-icon"></use></svg>
<svg width="32" height="32"><use xlink:href="URL-ARCHIVO-SVG#tumblr-icon"></use></svg>
<svg width="32" height="32"><use xlink:href="URL-ARCHIVO-SVG#pinterest-icon"></use></svg>

Como se está solicitando un recurso externo (algo que está guardado en otro lugar), el navegador web lo almacenará en su caché, agilizando la respuesta de nuestro sitio, puesto que no tendrá que cargar los iconos (el recurso externo) cada vez que se visite la página.

Para los que hacemos uso de Blogger y deseamos el mismo comportamiento, tenemos como única opción el uso de AJAX (conocimiento compartido por CSS-TRICKS):

<script>
  var ajax = new XMLHttpRequest();
  ajax.open("GET", "URL-ARCHIVO-SVG", true);
  ajax.send();
  ajax.onload = function(e) {
    var div = document.createElement("div");
    div.style.display = "none";
    div.innerHTML = ajax.responseText;
    document.body.insertBefore(div, document.body.childNodes[0]);
  }
</script>

El anterior script puede ir en cualquier parte de nuestra plantilla, pero usualmente se ubica antes de </body>, sin olvidar reemplazar lo que está en verde por la dirección en donde se tenga el archivo SVG. Los iconos se incrustan como es habitual, pero en este caso no se coloca la URL del archivo en la etiqueta use:

<svg width="32" height="32"><use xlink:href="#facebook-icon"></use></svg>

Pero las posibilidades no terminan ahí, también podemos incrustarlos en nuestra hoja de estilos (CSS) a través de la propiedad background-image:

<span class="icon"></span>

<style>
  span.icon {
    display: inline-block;
    width: 32px; /* Ancho especificado en el icono SVG */
    height: 32px; /* Alto especificado en el icono SVG */
    background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112.196 112.196' width='32' height='32'><circle style='fill:#3B5998;' cx='56.098' cy='56.098' r='56.098' /><path style='fill:#FFFFFF;' d='M70.201,58.294h-10.01v36.672H45.025V58.294h-7.213V45.406h7.213v-8.34c0-5.964,2.833-15.303,15.301-15.303L71.56,21.81v12.51h-8.151c-1.337,0-3.217,0.668-3.217,3.513v7.585h11.334L70.201,58.294z' /></svg>");
  }
</style>

Lo que está resaltado en verde no es más que el primer bloque de código descrito en esta entrada, solo quitamos los saltos de líneas y reemplazamos las comillas inglesas (") por comillas simples ('); sin embargo, se recomienda codificarlo:

background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20112.196%20112.196'%20width%3D'32'%20height%3D'32'%3E%3Ccircle%20style%3D'fill%3A%233B5998%3B'%20cx%3D'56.098'%20cy%3D'56.098'%20r%3D'56.098'%20%2F%3E%3Cpath%20style%3D'fill%3A%23FFFFFF%3B'%20d%3D'M70.201%2C58.294h-10.01v36.672H45.025V58.294h-7.213V45.406h7.213v-8.34c0-5.964%2C2.833-15.303%2C15.301-15.303L71.56%2C21.81v12.51h-8.151c-1.337%2C0-3.217%2C0.668-3.217%2C3.513v7.585h11.334L70.201%2C58.294z'%20%2F%3E%3C%2Fsvg%3E");

Los iconos empleados en esta entrada hacen parte del paquete Social Network Logo Collection, elaborados por Freepik y proporcionados por flaticon.com bajo la licencia CC 3.0 BY.