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

  • 3 Jul 2019
  • svg, Drupal 7

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. 

<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;
}