Dans le cadre de l’optimisation d’un site internet, et notamment de son temps de chargement, il est indispensable de sélectionner correctement le format des images utilisées. Parmi eux, le format SVG peut être tout à fait adapté à certains types d’image.
Qu’est ce que le format SVG et quels avantages offre ce format ?
Qu’est ce que le format SVG ?
Signifiant Scalable Vector Graphics, le format SVG est basé sur du XML et est parfaitement adapté pour le web. Il est utilisé principalement pour l’affichage d’illustrations ou de graphiques sur internet. Il est par ailleurs possible de réaliser des images d’une grande complexité en SVG et même de les animer !
Attention toutefois, ce format d’image n’est pas adapté pour des photographies !
Si coder un fichier SVG à la main peut s’avérer extrêmement complexe, différentes plateformes vous permettent d’en trouver, parfois gratuitement, pour les utiliser sur votre site web. Il est également possible convertir certaines images PNG ou JPEG en SVG dans un soucis de gain de performance.
Quelques banque d’images SVG :
- Creative Fabrica : vous trouverez de nombreux fichiers SVG en téléchargement sur ce site. Si la majorité d’entre eux sont payants, il en existe également des gratuits.
- Icon Monstr : si vous cherchez des icônes téléchargeables gratuitement, Icon Monstr est fait pour vous ! Vous pouvez télécharger toutes les icônes présentes sur le site en format PNG ou SVG.
- Design Bundles : vous trouverez de nombreux fichiers SVG sur cette plateforme avec un large choix de fichiers totalement gratuits !
Sachez qu’il est également possible d’exporter en SVG depuis certains logiciels comme Adobe Illustrator.
Les avantages du format SVG
Le format SVG offre de nombreux avantages s’il est utilisé correctement.
Le principal atout de ce format est qu’il est possible de redimensionner une image sous n’importe quel format sans aucune perte de qualité. En effet, les images SVG sont vectoriels et ne peuvent donc pas être pixelisées.
De plus, le format SVG étant constitué de code HTML, il est tout à fait possible de modifier la couleur d’une image grâce au CSS, offrant à ce format une très grande flexibilité.
Il est également possible d’animer des images SVG pour dynamiser votre site internet. Voici un exemple d’icône SVG animées :
Enfin, le format SVG est particulièrement léger et peut vous aider à améliorer les performances de votre site Internet. Privilégiez le pour votre logo ou vos icônes par exemple.
Comment utiliser le format SVG sur mon site WordPress ?
Par défaut, WordPress ne prend pas en compte le format SVG. Ainsi, si vous souhaitez importer une image SVG dans l’onglet « média » de l’administration de votre site WordPress, vous obtiendrez une erreur.
Il est toutefois possible d’autoriser ce type de fichier en utilisant le plugin gratuit SVG Support.