Agregar imágenes en formato SVG en modo eficiente dentro Drupal

En los tiempos que corren, donde los usuarios suelen escanear las páginas antes de detenese 3 segundos a leerlas, el uso de imágenes para representar las ideas o conceptos más importantes de nuestra historia se ha vuelto modena corriente. Con una imagen podemos lograr encender el interés y nos permite entonces crear una oportunidad. Pero este no es único requisito. Además tiene que ser lo más liviana posible, pero sin renunciar a la calidad. Y no solo. También necesitamos que sea fácilmente escalable o adaptable y pueda verse perfectamente en un ordenador de escritorio o en un dispositivo móvil. Todas estas cosas podemos lograrlas del modo más simple usando SVG.

Crear imágenes SVG

Existen innumerables. Los que yo uutilizo habitualmente son Gravit, Inkscape y Affinity Designer. Una vez que tenemos nuestro svg, podemos pasarlo por SVGOMG para tratar de reducir su tamaño. 

Agregar SVG a Drupal

Una simple imágen

Lo que hace que trabajar con SVG sea super-simple es que está basado en código XML. Qiere decir que para utilizar dentro el contenido no tenemos más habilitar los tags en el formato de texto que estemos utilizando: /admin/config/content/formats

Reutilizar los SVG

En el caso que necesitemos reutilizar las imágenes SVG sería conveniente recurrir a SVG sprites. Esta operación consiste en "convertir" todas los elementos SVG en SYMBOL y agrupar todos estos SYMBOL en un único SVG. Para explicarlo mejor, veamos como sería el código:

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="icon-nombre" preserveAspectRatio="xMidYMid meet" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;" viewBox="...
  </symbol>
  <symbol...
</svg>

Una vez que tenemos un único SVG, tendremos que incluir el código en un objeto que se presente en todas las páginas donde se necesiten. La opción más simple es utilizando un bloque. Recordemos que el formato de texto seleccionado en el bloque no deberá "limpiar" el código ingresado. Podríamos crear un nuevo formato y llamarlo por ejemplo raw html.

Luego, para cargar la imágen dentro del node bastará una simple linea de código:

<svg class="icon"><use href="#icon-nombre" xlink="http://www.w3.org/1999/xlink"></use></svg>

Una vez que tenemos el gráfico cargado podemos manipular su posición y tamaño con CSS:

svg.icon {
    margin-top: 30px;
    max-width: 100%;
    height: auto;
}