Quand il s’agit d’utiliser des pictogrammes ou tout simplement afficher une image décorative, nous avons à notre disposition différentes méthodes.
Celle qui parait instinctivement la plus simple consiste à appeler des images en PNG dans un dossier dédié. Cependant, non seulement le rendu n’est pas optimal, mais cela reste une méthode peu optimisée en termes de chargement et de maintenabilité du projet.
C’est pourquoi nous allons aborder le sujet des images SVG (Scalable Vector Graphics : un format d’image de plus en plus utilisé qui permet de pallier ces problématiques.
Qu’est-ce qu’un SVG ?
Le SVG est une forme ou une image vectorielle ; c’est à dire qu’il n’est pas basé sur des pixels mais sur des figures géométriques. Nous avons donc une image sous forme de code (basé sur du XML) dans laquelle sont écrits les différents points et propriétés de la forme à afficher.
<svg width="75" height="75" viewBox="0 0 75 75" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="75" height="75" fill="#C70232" fill-opacity="0.8"/>
<path d="M49.1673 42.3327C47.3702 40.5356 45.2311 39.2052 42.8972 38.3999C45.3969 36.6783 47.0391 33.797 47.0391
30.5391C47.0391 25.2792 42.7598 21 37.5 21C32.2402 21 27.9609 25.2792 27.9609 30.5391C27.9609 33.797 29.6031
36.6783 32.1028 38.3999C29.769 39.2052 27.6299 40.5356 25.8328 42.3327C22.7163 45.4492 21 49.5927 21 54H23.5781C23.5781
46.3234 29.8234 40.0781 37.5 40.0781C45.1766 40.0781 51.4219 46.3234 51.4219 54H54C54 49.5927 52.2837 45.4492
49.1673 42.3327ZM37.5 37.5C33.6618 37.5 30.5391 34.3774 30.5391 30.5391C30.5391 26.7008 33.6618 23.5781 37.5
23.5781C41.3382 23.5781 44.4609 26.7008 44.4609 30.5391C44.4609 34.3774 41.3382 37.5 37.5 37.5Z" fill="#ffffff"/>
<circle cx="54" cy="55" r="12" fill="#ffffff"/>
<path d="M60.3911 56.148H55.8311V61.008H53.1431V56.148H48.6071V53.736H53.1431V48.888H55.8311V53.736H60.3911V56.148Z" fill="#C70232"/>
</svg>
Le format SVG présente différents avantages :
- Ce format est très léger : seules les coordonnées des traits et leurs propriétés sont chargées.
- Il est possible de redimensionner un SVG sans aucune perte de qualité (ce qui n’est pas le cas des formats d’image JPG ou PNG), ce qui permet d’avoir un rendu net même sur les écrans haute définition ou les smartphones.
- Il permet d’avoir un projet facilement maintenable, par exemple en convertissant nos SVG en font (nous y reviendrons plus tard).
- Les éléments dessinés en SVG peuvent être modifiables directement dans le code du SVG. Il est possible d’utiliser un morceau de SVG pour l’insérer dans un autre.
- Le code du SVG peut être directement inclus dans l’HTML, et donc être accessible via le DOM. De ce fait, il est possible d’attacher des évènements en JS et de gérer des animations en CSS ou JS.
Utiliser des images SVG dans un projet
Il existe différentes manières d’utiliser des images SVG dans un projet web, mais l’utilisation la plus intéressante selon moi est la création d’une font contenant tous les pictogrammes du projet. Cela permet d’avoir un projet facilement maintenable avec des icônes réutilisables dans l’ensemble projet.
En effet, une fois les icônes converties en font, elles ont les mêmes propriétés qu’une font classique. Il est donc possible de changer leur taille, leur couleur, et d’appliquer n’importe quel effet de style comme on le ferait sur un texte habituellement.
Certains outils en ligne (comme https://icomoon.io/) permettent de convertir facilement des SVG en font.
La font générée doit être appelée comme n’importe quelle font habituelle à l’intérieur du projet. Chaque pictogramme est rattaché à un code (généré par l’outil) qui permettra de l’appeler à l’endroit voulu. Ce code est à insérer dans un pseudo-élément CSS (:before).
L’une des méthodes recommandée pour la gestion des icônes est la création d’une feuille de style dédiée, avec à l’intérieur une liste de classes ayant chacune leur icône. L’avantage de cette approche est avant tout d’avoir la liste exhaustive de toutes les icônes, et de pouvoir retrouver facilement le code d’une des icônes du projet. De plus, cela permet directement d’appeler la classe de l’icône à l’endroit voulu (et donc de l’afficher), sans avoir à toucher au CSS.
.icon-facebook:before {
content:"\e909";
}
.icon-twitter:before {
content:"\e90a";
}
.icon-youtube:before {
content:"\e90b";
}
Cependant, pour les SVG assez complexes (avec plusieurs couleurs et des formes complexes), ce système de font n’est pas recommandé. Cela demande d’utiliser plusieurs balises HTML pour chaque partie colorée du picto, ce qui va à l’encontre de notre but premier : faciliter la gestion des icônes.
Lorsque le SVG est complexe, ou lorsqu’il forme toute une image, il est alors possible de l’appeler comme une image classique. Il conservera ses avantages (sa légèreté et son rendu). Il peut être aussi intéressant de modifier l’aspect d’une icône SVG directement en CSS, sans passer par un logiciel de PAO. Cela permet de limiter le nombre d’appels concernant les images et ainsi optimiser la vitesse de chargement de la page.
.icon-star {
fill: gold;
stroke: coral;
stroke-width: 5%;
stroke-linejoin: round;
}
Les inconvénients du format SVG
Il faut tout de même noter que ce format possède (quelques) inconvénients. Tout d’abord en amont lors de sa création : il peut être un peu plus long pour un graphiste de créer des images en SVG. Cependant ce temps est nécessaire pour un projet de qualité et il est vite rattrapé lors de l’intégration graphique.
Parlons aussi de la compatibilité sur les navigateurs : le format SVG existe depuis 1998, il est donc supporté par tous les navigateurs récents. Mais il faut savoir qu’en dessous d’Internet Explorer 9, le SVG n’est plus accepté. Il est donc nécessaire de faire un backup avec des PNG, ce qui allonge le temps d’intégration du projet. C’est aussi le cas pour la création d’email (certaines webmails ayant des moteurs de rendu assez anciens, il faut utiliser des images en JPG ou PNG).
Il faut aussi savoir que la taille d’une image SVG peu vite augmenter s’il est composé de beaucoup de petits éléments.
Pour conclure
Le SVG est à mon sens indispensable pour les projets web et mobiles. Il permet d’avoir un rendu agréable et léger.
L’utilisation de font pour la gestion des icônes permet de ne pas avoir à stocker les images dans différentes tailles ou couleurs et permet d’avoir une gestion pratique des icônes à l’intérieur d’un projet. De plus, cela permet une certaine liberté en termes de design (effets sur l’icône ou effets au survol) qu’il ne serait pas possible d’avoir avec une image classique.
Il ne faut donc pas hésiter à utiliser au maximum ce format d’image au vu de tous ses avantages !
