Vous l’aurez certainement remarqué, le format SVG (Scalable Vector Graphics) est de plus en plus utilisé pour afficher certaines images sur le web. Alors à quoi correspond ce format d’image et comment l’utiliser correctement sur les pages de votre site web ? Vous trouverez ici toutes les informations que vous recherchez !
Qu’est-ce que le format SVG ?
Basé sur le langage de balisage XML, le format SVG permet aux navigateurs web de retranscrire des images ou graphiques vectoriels. Contrairement aux formats traditionnels d’images dites matricielles (JPEG, PNG etc.) qui sont faites de pixels, le format SVG représente des lignes et des formes, ce qui lui donne l’avantage d’être redimensionnable à l’infini, sans jamais donner un effet pixellisé à l’image !
Le second avantage de l’utilisation de ce format d’image est qu’il est bien souvent beaucoup plus léger que les formats traditionnels. Attention toutefois à ne l’utiliser que pour des images simples comme un logo ou des pictogrammes par exemple, car c’est le navigateur web qui s’occupe de traiter ce type de fichiers. Des images plus complexes pourraient vite affaiblir les performances de celui-ci.
Comment intégrer une image SVG sur un site web ?
Il y a plusieurs manières d’utiliser des images au format SVG et de les intégrer dans une page web, au même titre que les autres formats d’images. Toutefois, comme certains navigateurs historiques (Internet Explorer 8, Android 2.3 et autres) ne sont pas compatibles avec ce format de fichier, il faudra penser à faire des adaptations au niveau du code pour pouvoir afficher l'image dans un autre format sur ces navigateurs (JPEG ou PNG par exemple).
Dans une balise <img>
On peut tout simplement commencer par intégrer une image SVG dans une balise
<img> en HTML. Comme évoqué plus haut, pour des soucis de compatibilité avec tous les navigateurs, on placera l’appel à notre image au format SVG dans la propriété
srcset de la balise
<img> et la même image au format PNG dans la balise
src.
<img src="image.png" alt="mon image" srcset="image.svg" height="90px" width="90px" />
En tant que code HTML
Il est également tout à fait possible d'intégrer un SVG sous forme de code directement dans le HTML, en utilisant la balise
<svg>. L'inconvénient principal de cette méthode est que les modifications CSS ne sont pas supportées sur ce type de balise. Il faudra donc modifier le code situé à l'intérieur de la balise HTML pour effectuer des modifications, ce qui peut rendre la tâche parfois assez peu optimisée.
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="#FF0066" d="M57.4,-13.4C65.9,7.7,58.6,39.1,41.3,50.1C24,61.2,-3.4,51.7,-24.1,36C-44.7,20.3,-58.8,-1.7,-53.7,-18.1C-48.5,-34.4,-24.3,-45.2,0.1,-45.2C24.4,-45.2,48.8,-34.5,57.4,-13.4Z" transform="translate(100 100)" />
</svg>
En tant qu’image de fond en CSS
Tout comme du côté HTML, on peut aussi tout à fait appeler une image SVG côté CSS afin de la placer en tant qu’image de fond d’un élément.
background: url("image.png");
background-image: url("image.svg");
Tout comme pour la méthode précédente, on fera en sorte que notre code soit compatible sur un maximum de navigateurs web, en déclarant deux images de fond (une au format PNG puis une au format SVG) pour créer un back-up sur les navigateurs historiques.
Suivant la méthode que vous jugerez la plus adaptée à votre projet, il existe une multitude d'outils permettant de transformer un SVG en code, en image de fond ou simplement en image. A vous de jouer !