Format SVG
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é.
Qu’est-ce qu’un fichier SVG ?
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.
Histoire des fichiers 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.
Avantages et inconvénients des fichiers SVG
Avant d’enregistrer vos images au format SVG, mieux vaut en connaître les avantages et les inconvénients.
Avantages des fichiers SVG
- Contrairement aux formats pixellisés, les formats vectoriels comme SVG conservent la même résolution, que les images soient agrandies ou réduites. Vous n’avez pas à vous inquiéter d’une perte de qualité dans certains navigateurs ou lorsque vous redimensionnez les images pour les afficher à différents emplacements.
- Les fichiers SVG basiques sont souvent moins volumineux que les images pixellisées, composées de nombreux pixels de couleur au lieu d’algorithmes mathématiques.
- Les fichiers SVG gèrent le texte comme du texte (et non comme un design). Les lecteurs d’écran peuvent donc analyser les mots contenus dans les images SVG. C’est très utile pour les personnes qui ont besoin d’aide pour lire des pages web. Les moteurs de recherche peuvent également lire et indexer le texte des images SVG.
Inconvénients des fichiers SVG
- Les fichiers SVG sont parfaits pour les images web comme les logos, les illustrations et les graphiques. Mais ils ne contiennent pas de pixels, ce qui complique l’affichage des photos numériques de qualité. Les fichiers JPEG sont généralement plus appropriés pour des photographies riches en détails.
- Seuls les navigateurs modernes prennent en charge les images SVG. Vous aurez peut-être des difficultés à utiliser des fichiers SVG avec Internet Explorer 8 et d’autres navigateurs plus anciens.
- Le code contenu dans les images SVG peut être difficile à comprendre si vous n’êtes pas familier de ce nouveau format.
Ouverture d’un fichier SVG
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. Il suffit d’ouvrir votre navigateur et de cliquer sur Fichier >
Ouvrir pour sélectionner le fichier à consulter, qui s’affiche alors dans votre 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.
Création et modification d’un fichier SVG
Suivez ces étapes si vous utilisez Adobe Photoshop :
- Une fois que vous avez créé une image dans Photoshop, cliquez sur Fichier > Exportation > Exporter en tant que.
- Dans la boîte de dialogue qui apparaît, cliquez sur le menu déroulant Format et sélectionnez SVG.
- Sélectionnez Tout exporter et enregistrez le fichier.
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.
Format SVG : foire aux questions (FAQ)
Qu’est-ce qu’un fichier SVG ?
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.
Cas d’usage du format 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 dans plusieurs emplacements 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 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.
Les fichiers SVG prennent-ils en charge l’animation ?
Comment repérer un fichier SVG ?
Les fichiers SVG peuvent-ils seulement être utilisés sur Internet ?
Quelle est la taille des fichiers SVG ?
Qu’est-ce qui différencie les fichiers SVG et PNG ?
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é.