Répondant aux besoins graphiques légers, le SVG (Scalable Vector Graphics) est un format d'image idéal pour adopter sur son site des visuels vectorisés. Qu'ils soient statiques, dynamiques ou interactifs, les visuels utilisant le SVG peuvent être redimensionnés à volonté sans jamais subir de perte de qualité.
La naissance du format
Élaboré en 1998 par une collaboration des grands du web (IBM, Apple, Microsoft ou encore Xerox), ce format d'image à néanmoins été lent à percer dû à la lente adaptation des navigateurs. Bien qu'intégrable dès la sortie, son installation était malheureusement contraignante et paradoxale, puisqu'une extension propriétaire était requise, alors que ce format d'image se voulait ouvert.
Aujourd'hui, ce format s'est répandu et est interprété par la plupart des navigateurs web, tels que :
- Firefox (version 4 et supérieure)
- Google Chrome (version 16 et supérieure)
- Safari (version 5 et supérieure)
- Opéra (version 9.5 et supérieure)
Les avantages du SVG par rapport aux autres formats
Outre la possibilité de redimensionner les images à l'infini sans perte de qualité, le SVG est également une alternative pour réaliser simplement des petites animations, en coordination au SMIL (Synchronized Multimedia Integration Language). Il permet également de présenter des données dynamiques pour un rendu plus lisible et plus adapté.
Ce format est très léger quand il vous faut présenter des formes simples, puisque seules les données des formes sont stockées (coordonnées, couleurs, effets). Ces images sont donc plus légères que les formats traditionnels, ce qui influe directement sur le poids de la page et améliore son temps de chargement, critère d'évaluation par les robots pour le SEO. En effet, les formats JPEG, PNG ou GIF, plus complexes, ont besoin de plus d'informations, comme la mémorisation du contenu de l'image pixel par pixel, ce qui les rend nécessairement plus lourds.
Enfin, son apprentissage est très facile. Basé sur le langage XML et ouvert, il peut aussi bien être édité par l'intermédiaire d'un éditeur de textes et manipulé par du JavaScript en cas de besoin (redimension dynamique), mais aussi être modifié via le CSS.
Créer une image SVG pour son site web
Les plus hardis préfèreront user d'un éditeur de textes pour créer leurs formes, mais ceux qui préfèrent se tourner vers un éditeur graphique y trouveront également leur compte. De nombreux outils permettent de manipuler ce format pour un rendu immédiat :
- Inkscape (libre et gratuit)
- Draw (OpenOffice ou LibreOffice, libres et gratuits)
- Illustrator (suite Adobe payante)
Intégrer le format à son site
Depuis l'apparition de l'HTML5, l'intégration du format d'images est nettement plus simple grâce à la balise <svg>. En effet, cette nouvelle balise permet d'intérargir avec les nœuds de SVG directement au sein du document HTML.
Le CSS est également la méthode la plus appropriée, en particulier lorsque le SVG est destiné au background. Un simple background:url() permet d'inclure cette ressource comme une image classique, à l'instar d'un JPEG ou d'un PNG.
Le SVG, format d'avenir ?
Bien que supporté nativement sur les dernières versions des navigateurs, il existe des personnes bien intentionnées qui ont su créer de nouvelles librairies pour combler ces lacunes, en particulier pour IE 6 et supérieur. Au vu des nombreux avantages proposés par le SVG, il n'est pas impossible que ce format devienne une donnée recommandée dans l'ergonomie d'un site.
PAGIZ à votre service pour le traitement de l'image
Nos experts sont à votre disposition pour retravailler toutes les images de votre site. Redimensionner, retravailler, changer le format, réduire le poids, toutes ces actions concourent à l'amélioration de votre site. Demandez dès maintenant l'assistance de notre équipe par téléphone au 01 84 20 46 02 ou via notre formulaire de contact.
