Le format SVG est couramment employé pour afficher des images, des graphiques et des illustrations 2D sur des sites web. Ce format vectoriel permet par ailleurs les agrandissements et les réductions de taille sans perte de résolution. Découvrez les principales caractéristiques des images SVG, leurs avantages et inconvénients, et la manière dont le format SVG a évolué.
SVG (Scalable Vector Graphics) est un format de fichier vectoriel optimisé pour le web. Contrairement aux fichiers pixellisés comme les JPEG, les fichiers vectoriels stockent des images via des formules mathématiques basées sur des points et des lignes dans une grille. Les formats vectoriels comme SVG autorisent donc les redimensionnements à volonté sans perte de qualité, ce qui en fait le choix idéal pour les logos et les images en ligne complexes.
Leurs capacités de redimensionnement n’expliquent pas à elles seules le succès des fichiers SVG chez les designers web. Ces fichiers sont écrits en code XML. Ils stockent donc les informations texte en tant que texte littéral et non en tant que formes. Ainsi, les moteurs de recherche comme Google peuvent lire les mots-clés des images SVG, ce qui peut potentiellement faire remonter le site web dans les résultats de recherche.
Les fichiers SVG sont identifiables à leur extension .svg.
La création du fichier SVG remonte à la fin des années 1990. À cette époque, le World Wide Web Consortium (W3C) avait demandé aux développeurs de proposer un nouveau type de format d’image vectorielle. Les six propositions concurrentes reçues ont permis d’élaborer ce qui est par la suite devenu le format SVG de W3C.
Le format SVG n’a pas connu un succès rapide. Il a été relativement peu utilisé jusqu’en 2017, lorsque les gens ont commencé à comprendre les avantages de son utilisation dans les navigateurs web modernes. Les fichiers SVG sont maintenant couramment utilisés pour les images 2D des sites web, car la plupart des applications de dessin vectoriel et des navigateurs les gèrent facilement.
Le format Scalable Vector Graphics a beaucoup évolué ces dernières années. Mais dans quels domaines les fichiers SVG sont-ils utilisés en pratique ?
Les designers utilisent souvent des fichiers SVG pour afficher des icônes comme des boutons, ainsi que des logos d’entreprise. Ces fichiers peuvent être agrandis ou réduits sans aucune altération de la qualité, ce qui en fait le choix idéal pour les images qui apparaissent dans plusieurs emplacements et dans différentes tailles.
Grâce au code XML dans les fichiers SVG, les moteurs de recherche comme Google peuvent lire les graphiques et les images contenant une forte proportion de texte et améliorer leur référencement. Google étant en mesure de détecter les mots-clés dans les fichiers SVG, il peut potentiellement améliorer le classement d’une page web dans les résultats de recherche. Par ailleurs, les fichiers SVG prennent également en charge l’animation.
Découvrir d’autres types de fichiers vectoriels
Avant d’enregistrer vos images au format SVG, mieux vaut en connaître les avantages et les inconvénients.
De Chrome à Edge en passant par Safari et Firefox, les navigateurs les plus populaires permettent désormais d’ouvrir des fichiers SVG sous Mac et Windows. Lancez simplement votre navigateur et cliquez sur Fichier > Ouvrir pour sélectionner le fichier, qui s’affiche alors dans le navigateur.
Vous pouvez tout aussi facilement ouvrir une image SVG avec un logiciel intégré sur votre ordinateur. Double-cliquez sur le nom du fichier pour obtenir une liste des programmes pouvant l’ouvrir. Il peut aussi s’ouvrir automatiquement dans un programme compatible.
Suivez ces étapes si vous utilisez Adobe Photoshop :
Remarque utile : comme Photoshop est un éditeur d’images pixellisées, beaucoup d’utilisateurs préfèrent créer et modifier des fichiers SVG dans Adobe Illustrator, un éditeur d’images vectorielles.
Le format SVG ne convient pas seulement aux images statiques. Un large éventail d’outils en ligne peuvent vous aider à intégrer des éléments animés dans vos images web. Les animations SVG peuvent inclure des éléments relativement basiques, comme un curseur permettant de passer d’une diapositive à l’autre dans une infographie. Vous pouvez également animer des illustrations, pour faire bouger les aiguilles d’une horloge par exemple.
Pour repérer un fichier SVG : .svg. Vous pouvez également repérer des images vectorielles comme les fichiers SVG en les agrandissant à 200 % ou plus sur l’écran de votre ordinateur. Une image vectorielle conserve des lignes nettes et des couleurs impeccables. Elle n’est pas pixellisée ou floue.
Bien que les images SVG soient principalement utilisées sur le web, elles ne se limitent pas à ce type d’utilisation. Par exemple, les fichiers SVG ne sont pas déformés par le redimensionnement et peuvent donc être utilisés comme templates pour l’impression sur vêtement (t-shirts, etc.). Un fichier JPEG composé de nombreux pixels ne s’imprimerait pas de façon aussi nette.
La taille d’un fichier SVG dépend de la quantité de données image qu’il contient. Toutefois, il est généralement moins volumineux que la plupart des autres types de fichiers. Les images complexes comportant de nombreux tracés et points d’ancrage occupent davantage d’espace que les designs plus simples et plus nets. Essayez de réduire le nombre d’instructions complexes contenues dans le fichier.
Pour résumer, les SVG sont des fichiers vectoriels tandis que les PNG sont des fichiers pixellisés. Si vous agrandissez ou réduisez trop un fichier PNG, il devient flou et pixellisé. Les fichiers SVG ne contiennent pas de pixels, donc leur résolution ne diminue jamais. Par ailleurs, les fichiers PNG ne prennent pas en charge l’animation.
Découvrez un autre format courant pour les logos et les images web.
Découvrez pourquoi les fichiers JPEG conviennent particulièrement aux photos numériques complexes.
Découvrez ce que les spécialistes d’Apple pensent de ce nouveau type de fichier pixellisé.
Découvrez ce format vectoriel largement utilisé pour Adobe Illustrator.
Quel format de fichier prévaut dans le domaine du design web ?
Étudiez attentivement leurs résultats dans le domaine de l’impression.
Réalisez des dessins vectoriels et des illustrations.
7 jours gratuits, puis 23,39 € par mois.
Créez des mises en page pour l’impression et le digital (logiciel PAO).
7 jours gratuits, puis 23,39 € par mois.
Accédez à l’ensemble des applications de création et bien plus encore.
7 jours gratuits, puis 60,91 € par mois.