SVG (Scalable Vector Graphics) est un format vectoriel optimisé pour le web. Contrairement aux fichiers pixellisés comme les JPEG, les fichiers vectoriels du type SVG stockent des images via des formules mathématiques basées sur des points et des lignes dans une grille. Ils permettent donc de procéder à des redimensionnements à volonté sans perte de qualité, ce qui en fait le choix idéal pour les logos et les images en ligne complexes.
Ces capacités de redimensionnement n’expliquent toutefois pas à elles seules le succès du format SVG chez les designers web. Les fichiers écrits en code XML enregistrent les données texte en tant que texte littéral et non en tant que formes. Les moteurs de recherche comme Google peuvent donc lire les mots-clés des images SVG, ce qui est susceptible d’améliorer le classement du site web dans les résultats de recherche.
Les fichiers SVG sont reconnaissables à leur extension .svg.
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 ?
Icônes et logos de sites web
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 à plusieurs endroits et dans différentes tailles.
Infographies et illustrations
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 optimiser leur référencement. Google étant en mesure de détecter les mots-clés dans les fichiers SVG, il peut améliorer le classement d’une page web dans les résultats de recherche. Par ailleurs, les fichiers SVG prennent en charge l’animation.
Découvrir d’autres types de fichiers vectoriels
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.
L’extension .svg permet d’identifier un fichier SVG. Vous pouvez également repérer des images vectorielles de type SVG en les agrandissant à 200 % ou plus sur l’écran de votre ordinateur, car elles conservent des lignes nettes et des couleurs impeccables. Elle ne sont ni pixellisées, ni floues.
Bien que les images SVG soient principalement exploitées sur le web, elles ne se limitent pas à ce type d’usage. Étant donné qu’elles ne sont pas déformées par le redimensionnement, elles peuvent, par exemple, être utilisées comme templates pour l’impression sur vêtement (t-shirts, etc.). Un fichier JPEG composé de nombreux pixels ne serait pas aussi net à l’impression.
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 épurés. Essayez de réduire le nombre d’instructions complexes contenues dans le fichier.
Les SVG sont des fichiers vectoriels, tandis que les PNG sont des fichiers bitmap. 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.
