3 janvier 2020

Intégration de fichiers SVG

Le format vectoriel SVG présente de nombreux avantages comme un poids réduit, le support des animations, des filtres et des CSS, adaptation aux différentes tailles d'écran sans perte de qualité. Les avantages du format SVG cités ici ne sont pas exhaustifs mais c'est suffisant pour avoir envie de l'utiliser. Voici quelques solutions d'intégration HTML.

Dans un fichier HTML

Avec la balise image

La solution la plus simple pour intégrer un fichier SVG dans son code HTML c'est d'utiliser la balise <img>.

<img src="svg/mon-fichier.svg" alt="intégration du fichier SVG avec la balise image" />

Le revers de cette simplicité c'est l'impossibilité de modifier le fichier SVG avec les CSS.

SVG inline et HTML

L'autre solution est d'écrire directement le fichier SVG dans le code HTML.

<!-- fichier: exemple.html -->
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Exemple SVG</title>
  </head>
  <body>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 64 64"
      fill="currentColor"
      class="mon-fichier">
      <path d="M2.133 13.867h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"></path>
      <path d="M2.133 28.8h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"></path>
      <path d="M2.133 43.733h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"></path>
    </svg>
  </body>
</html>

Le fichier SVG inline garde tous ses avantages et on économise une requête serveur.
Evidemment pour la clarté du code, ça peut poser problème.

Dans un template

La solution vraiment idéale est d'utiliser un language de templating. Voici un exemple basé sur le language Nunjucks.

SVG inline et template

J'ai donc un fichier SVG mon-fichier.svg. Comme nous sommes dans un language de templating, j'ajoute une variable dans le code du fichier SVG {{ monFichierSize }} pour définir sa taille.

<!-- fichier: mon-fichier.svg -->
<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 64 64"
  width="{{ monFichierSize }}"
  height="{{ monFichierSize }}"
  fill="currentColor"
  class="mon-fichier">
  <path d="M2.133 13.867h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"></path>
  <path d="M2.133 28.8h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"></path>
  <path d="M2.133 43.733h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"></path>
</svg>

J'ai mon template Nunjucks exemple.njk. J'utilise la fonctionnalité include pour écrire le fichier SVG dans mon template et je défini la taille de mon-fichier.svg en affectant une valeur à la variable.

{# fichier: exemple.njk #}
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Exemple SVG</title>
  </head>
  <body>
    {% set monFichierSize = 36 %}
    {% include "svg/mon-fichier.svg" %}
  </body>
</html>

Dans le template Nunjucks, le code reste simple et lisible.
Une fois passé par le moteur de templating, on retrouve notre fichier SVG inline dans le fichier exemple.html.

Utiliser les macros

Les macros de Nunjucks permettent de créer des morceaux de contenu réutilisable. Si on a plusieurs fichiers SVG comme des icônes, on peut se servir des macros pour créer sa propre bibliothèque.
Je crée un fichier mes-icones.njk pour regrouper mes icônes de réseaux sociaux. J'écris une macro par icône et je passe la variable {{ size }} qui me permettra de définir la taille de l'icône.

{# fichier: mes-icones.njk #}

{# icône linkedin #}
{% macro linkedin(size) %}
<svg 
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 448 512"
  width="{{ size }}"
  height="{{ size }}"
  class="icon-linkedin">
  <path fill="currentColor" d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path>
</svg>
{% endmacro %}

{# icône whatsapp #}
{% macro whatsapp(size) %}
<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 448 512"
  width="{{ size }}"
  height="{{ size }}"
  class="icon-whatsapp">
  <path fill="currentColor" d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"></path>
</svg>
{% endmacro %}

{# icône instagram #}
{% macro instagram(size) %}
<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 448 512"
  width="{{ size }}"
  height="{{ size }}"
  class="icon-instagram">
  <path fill="currentColor" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path>
</svg>
{% endmacro %}

Maintenant que ma bibliothèque est créée, je peux importer ces fichiers SVG dans mon template exemple.njk avec la function import de deux façons.

{# fichier: exemple.njk #}

{# liaison des valeurs à une variable #}
{% import "mes-icones.njk" as icon %}
{{ icon.linkedin(24) }}
{{ icon.whatsapp(24) }}
{{ icon.instagram(24) }}

{# importation des valeurs #}
{% from "mes-icones.njk" import linkedin, whatsapp as messagerie, instagram %}
{{ linkedin(24) }}
{{ messagerie(24) }}
{{ instagram(24) }}

Comme pour la solution précédente le code reste simple et lisible et on retrouve nos fichiers SVG inline dans le fichier exemple.html.

Dans une feuille de style

Pour utiliser un fichier SVG comme background d'un élément HTML, on l'intégre comme une image avec la propriété CSS background-image. Dans la feuille de style le fichier SVG ne peut pas être modifié.

.ma-classe {
  background-image: url("svg/mon-fichier.svg");
  ...;
}

On peut également l'intégrer inline mais il faut l'encoder au format base64. On économise alors une requête serveur.

.ma-classe {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgd2lkdGg9IjM2IiBoZWlnaHQ9IjM2IiBmaWxsPSJ3aGl0ZSI+DQogIDxwYXRoIGQ9Ik0yLjEzMyAxMy44NjdoNTkuNzMzYzEuMTc4IDAgMi4xMzMgMC45NTUgMi4xMzMgMi4xMzN2Mi4xMzNjMCAxLjE3OC0wLjk1NSAyLjEzMy0yLjEzMyAyLjEzM2gtNTkuNzMzYy0xLjE3OCAwLTIuMTMzLTAuOTU1LTIuMTMzLTIuMTMzdi0yLjEzM2MwLTEuMTc4IDAuOTU1LTIuMTMzIDIuMTMzLTIuMTMzeiI+PC9wYXRoPg0KICA8cGF0aCBkPSJNMi4xMzMgMjguOGg1OS43MzNjMS4xNzggMCAyLjEzMyAwLjk1NSAyLjEzMyAyLjEzM3YyLjEzM2MwIDEuMTc4LTAuOTU1IDIuMTMzLTIuMTMzIDIuMTMzaC01OS43MzNjLTEuMTc4IDAtMi4xMzMtMC45NTUtMi4xMzMtMi4xMzN2LTIuMTMzYzAtMS4xNzggMC45NTUtMi4xMzMgMi4xMzMtMi4xMzN6Ij48L3BhdGg+DQogIDxwYXRoIGQ9Ik0yLjEzMyA0My43MzNoNTkuNzMzYzEuMTc4IDAgMi4xMzMgMC45NTUgMi4xMzMgMi4xMzN2Mi4xMzNjMCAxLjE3OC0wLjk1NSAyLjEzMy0yLjEzMyAyLjEzM2gtNTkuNzMzYy0xLjE3OCAwLTIuMTMzLTAuOTU1LTIuMTMzLTIuMTMzdi0yLjEzM2MwLTEuMTc4IDAuOTU1LTIuMTMzIDIuMTMzLTIuMTMzeiI+PC9wYXRoPg0KPC9zdmc+");
  ...;
}

Liens

Building Better Interfaces with SVG par Sara Souedian
Using SVG par Chris Coyer
Nunjucks Templating Language par Mozilla
Base64.Guru pour encoder en Base64

Dernière mise à jour le 21 mai 2020