Qu'est-ce qu'un fichier SVG ? Comment utiliser les fichiers SVG dans la conception web

Votre site web souffre-t-il de logos flous et d'images pixelisées sur différents écrans ? Le SVG (un format de fichier adapté au web) a la solution. Contrairement aux images basées sur des pixels, les fichiers SVG utilisent des formules mathématiques pour rester nets et clairs quelle que soit leur taille.

Que vous créiez une boutique en ligne ou que vous renouveliez l'identité de votre marque, comprendre les fichiers SVG peut transformer l'apparence de vos visuels auprès de vos clients. Voici tout ce que vous devez savoir sur les fichiers SVG, leurs caractéristiques principales et pourquoi ils sont essentiels pour les logos, les graphiques, les icônes et les autres éléments visuels web qui doivent avoir un rendu professionnel sur tous les appareils.

Qu'est-ce qu'un fichier SVG ?

SVG signifie Scalable Vector Graphics (graphiques vectoriels évolutifs), un format d'image qui utilise des vecteurs, une méthode de représentation graphique basée sur des formules mathématiques définissant des formes, des lignes et des couleurs unies. Contrairement aux images matricielles (ou bitmap), composées d'une grille fixe de pixels colorés, vous pouvez redimensionner les images SVG à n'importe quelle taille sans qu'elles deviennent floues ou pixelisées.

Les images SVG restent nettes quelle que soit la résolution, car l'ordinateur les redessine à partir d'instructions mathématiques précises, comme suivre une recette qui s'adapte à la taille de votre dîner.

Les fichiers vectoriels comme le SVG sont couramment utilisés pour les logos, les illustrations, les polices et les icônes (tout élément web qui doit rester net et cohérent quelle que soit sa taille). Les fichiers au format SVG sont généralement plus légers que les formats matriciels comme PNG et JPEG, ils se chargent donc plus rapidement et améliorent l'expérience client.

Comment fonctionnent les fichiers SVG ?

Les SVG utilisent un codage au format XML, similaire au texte balisé d'un fichier HTML, ce qui les rend modifiables dans n'importe quel éditeur de texte. Autrement dit, au lieu d'une grille de pixels, un fichier SVG stocke des formes, des lignes et des couleurs sous forme de code XML (la recette, en quelque sorte). L'encodage XML présente plusieurs avantages :

• Utile pour le référencement. Les moteurs de recherche peuvent analyser le XML pour identifier des mots-clés comme ceux présents dans votre logo d'entreprise, ce qui confère au SVG un avantage SEO par rapport aux images matricielles, dans lesquelles le texte intégré à l'image est essentiellement invisible pour les moteurs de recherche, sauf s'il est explicitement décrit dans le texte alternatif.
• Plus accessible. Les lecteurs d'écran peuvent analyser les fichiers SVG, améliorant ainsi l'accessibilité des sites web. Puisqu'un élément SVG peut être balisé sémantiquement (en utilisant les éléments <title> et <desc>), les lecteurs d'écran peuvent lire et décrire à voix haute ce que l'image représente, un atout pour les utilisateurs malvoyants.
• Idéal pour l'e-commerce. L'évolutivité du format SVG, sa taille de fichier réduite, son rendu impeccable et sa compatibilité avec les langages web comme CSS et JavaScript en font un choix judicieux pour le développement de boutiques en ligne. Shopify prend en charge nativement le format SVG, particulièrement dans le dossier des ressources utilisé pour le développement de thèmes, les logos et les icônes.

Attention toutefois : un contenu SVG malveillant contenant du JavaScript pourrait s'exécuter dans le navigateur d'un utilisateur, volant des cookies, détournant des sessions ou défigurant le site. Shopify nettoie automatiquement les fichiers SVG lors de leur téléchargement pour empêcher tout contenu malveillant dans le code XML et éliminer les risques de sécurité comme les attaques par script intersites.

Brève histoire du format de fichier SVG

Le format de fichier SVG a été proposé pour la première fois en 1994 par l'ingénieur logiciel néerlandais Martijn Koster. À la fin des années 1990, le World Wide Web Consortium (W3C) a lancé un appel à propositions pour un nouveau format graphique vectoriel adapté au web. Le W3C a établi les fichiers SVG en 1999 comme standard ouvert de format graphique vectoriel pour le web, et il est devenu une norme approuvée par l'Organisation internationale de normalisation (ISO) en 2003. Cependant, l'adoption du SVG a été lente au début, ne gagnant véritablement en popularité qu'après que les principaux navigateurs (Chrome, Firefox, Safari et Opera) ont introduit une prise en charge native à la fin des années 2000 et au début des années 2010.

Différences entre les fichiers SVG, PNG et JPEG

• Vecteurs mathématiques vs grilles de pixels
• Évolutivité
• Taille de fichier
• Cas d'usage
• Référencement et accessibilité
• Modification et interactivité

Contrairement aux fichiers matriciels basés sur des pixels comme les formats JPEG et PNG, le format SVG utilise des algorithmes pour dessiner une image. Cette méthode est utile et efficace pour la plupart des types d'images, à une exception près : les images photographiques ou très détaillées.

Voici les principales différences entre le format SVG et les formats matriciels :

Vecteurs mathématiques vs grilles de pixels

Le format SVG stocke les images sous forme de formules définissant des points, des lignes et des couleurs unies. Les formats matriciels utilisent des bitmaps, qui consistent en un nombre fixe de pixels individuels disposés sur une grille.

Évolutivité

Le navigateur recalcule la formule mathématique lorsque vous redimensionnez une image SVG. Vous pouvez donc la redimensionner sans perte de qualité. Les PNG et JPEG sont basés sur des pixels avec des résolutions fixes ; augmenter leur taille réduit la qualité, provoquant du flou ou de la pixellisation.

Taille de fichier

Les fichiers SVG ont tendance à être plus légers que les images matricielles, ce qui les rend utiles pour l'optimisation des images. Cependant, convertir une image photographique complexe au format SVG peut générer un fichier volumineux et inutilisable. Les fichiers PNG et JPEG sont plus efficaces pour les images détaillées présentant des dégradés de couleurs subtils. Par exemple, une image bitmap créée dans Adobe Photoshop avec des textures complexes, des pinceaux ou des éléments photo sera mieux enregistrée au format JPEG ou PNG, car ces détails ne se traduisent pas bien en lignes nettes.

Cas d'usage

Le format SVG est idéal pour les visuels bidimensionnels comme les diagrammes, les illustrations, les logos, les icônes et les schémas, car il s'adapte parfaitement aux différentes résolutions d'écran. Pour les autres formats d'image, le JPEG convient mieux aux photos numériques haute définition, tandis que le PNG est préférable pour les visuels web et les logos, grâce à sa compression sans perte et sa prise en charge de la transparence. Notez que, contrairement au format SVG, le format PNG n'est pas indépendant de la résolution, ce qui confère au format SVG un avantage majeur en matière d'évolutivité.

Référencement et accessibilité

Les visuels SVG permettent aux moteurs de recherche comme Google de lire le texte qu'ils contiennent, ce qui peut améliorer le classement de votre site web dans les résultats de recherche. Les fichiers SVG peuvent également être lus par les lecteurs d'écran, ce qui les rend plus accessibles aux personnes en situation de handicap. Les formats PNG et JPEG traitent le texte comme faisant partie de l'image, ce qui rend difficile leur lecture ou leur indexation par les moteurs de recherche et les lecteurs d'écran.

Modification et interactivité

Vous pouvez modifier les fichiers SVG dans un éditeur de texte en modifiant le balisage XML et les styliser ou les manipuler facilement avec des langages web comme JavaScript et CSS. Les formats PNG et JPEG nécessitent un logiciel d'édition d'images spécialisé pour effectuer des modifications, ce qui limite votre niveau de contrôle sur eux, mais réduit également le risque de code malveillant.

Pourquoi utiliser un fichier SVG ?

• Évolutivité infinie
• Taille de fichier gérable
• Avantages SEO
• Accessibilité
• Facilité de modification
• Prise en charge par les navigateurs

Les visuels SVG sont pertinents pour l'e-commerce car ils conservent leur netteté sur n'importe quel appareil, se chargent rapidement, améliorent le référencement et l'accessibilité, et fonctionnent sur tous les navigateurs web modernes. Voici plus de détails sur ces avantages :

Évolutivité infinie

Vous pouvez redimensionner les fichiers SVG vers le haut ou vers le bas sans sacrifier la qualité de l'image, car le navigateur recalcule les formules mathématiques de l'image pour les lignes et les points à n'importe quelle échelle.

Taille de fichier gérable

Les fichiers SVG sont souvent plus légers que les images matricielles comme les PNG et JPEG. Cette empreinte de données réduite permet des temps de chargement plus rapides et une meilleure expérience utilisateur.

Avantages SEO

Les moteurs de recherche comme Google peuvent facilement indexer le texte dans les fichiers SVG, ce qui peut potentiellement bénéficier à votre classement dans les moteurs de recherche. Par exemple, un logo d'entreprise intégré à un visuel SVG peut contenir le nom de l'entreprise et d'autres mots-clés.

Accessibilité

Les fichiers SVG stockent le texte comme de véritables éléments textuels, ce qui permet aux lecteurs d'écran de lire les fichiers SVG à voix haute et d'aider les personnes ayant des difficultés à lire les pages web.

Facilité de modification

Vous pouvez modifier le code XML dans les fichiers SVG à l'aide d'un éditeur de texte en modifiant les balises de balisage, ce qui rend les fichiers SVG hautement personnalisables et faciles à manipuler sans logiciel graphique spécialisé.

Les fichiers SVG peuvent également interagir avec d'autres technologies web, comme JavaScript et CSS, ce qui permet des visuels dynamiques et attrayant avec des animations, des interactions utilisateur et des changements de style en temps réel. Cela rend les fichiers SVG polyvalents pour la conception web réactive et interactive.

Prise en charge par les navigateurs

Le manque de prise en charge par les navigateurs était autrefois le talon d'Achille du format SVG, ce n'est plus le cas. Les navigateurs web modernes (Chrome, Edge, Safari et Firefox) prennent en charge nativement les fichiers SVG. Cependant, les navigateurs plus anciens (comme Internet Explorer) peuvent ne pas prendre en charge les images SVG.

Utilisations courantes des fichiers SVG

Le format SVG est idéal pour toute image bidimensionnelle aux lignes et aux formes lisses. Les utilisations courantes des fichiers SVG dans la conception web incluent :

• Logos. Les logos d'entreprise étant souvent réutilisés sur différentes plateformes et devant rester nets quelle que soit leur taille, les fichiers SVG résolvent les problèmes d'évolutivité courants rencontrés avec les formats matriciels comme JPEG et PNG.
• Icônes. Les icônes, avec leurs contours clairs et leurs designs simples, sont parfaitement adaptées à la conversion en images vectorielles évolutives.
• Illustrations. Les visuels non photographiques comme les dessins au trait s'adaptent bien en tant que fichiers SVG et permettent d'économiser de l'espace de fichier.
• Diagrammes et graphiques. Les fichiers SVG peuvent créer des visualisations de données évolutives, et leur texte est entièrement consultable et indexable.
• Éléments animés. Vous pouvez utiliser CSS et JavaScript pour animer les fichiers SVG, ce qui les rend utiles pour les micro-interactions et les affichages dynamiques.

Comment créer et modifier un fichier SVG

• Créer un fichier SVG à partir de zéro
• Convertir un fichier en SVG
• Modifier un fichier SVG

Bien que vous puissiez théoriquement coder un fichier SVG en XML ou le convertir à partir d'autres types de fichiers, l'utilisation d'un logiciel d'illustration professionnel est l'approche la plus populaire et la moins sujette aux erreurs. Voici comment créer et modifier un fichier SVG :

Créer un fichier SVG à partir de zéro

Pour créer un fichier SVG à partir de zéro, utilisez un logiciel de conception graphique et dessinez votre image dans une application comme Adobe Illustrator (l'éditeur de graphiques vectoriels de référence du secteur), Inkscape (gratuit), Microsoft Visio, Canva SVG Editor, CorelDRAW ou Google Drawings (gratuit). Une fois votre design terminé, accédez au menu Fichier, sélectionnez Exporter ou Enregistrer sous, puis choisissez SVG comme format.

Convertir un fichier en SVG

Si vous préférez ne pas télécharger de logiciel, votre meilleure option pour convertir un autre format au format SVG est d'utiliser des outils en ligne. Certains convertisseurs en ligne incluent un aperçu de votre fichier SVG converti avant le téléchargement et un éditeur intégré pour effectuer des ajustements mineurs.

Avant d'utiliser ces outils, assurez-vous de sélectionner des images aux formes et aux contours simples. Essayer de convertir des images photographiques très détaillées risque de produire des fichiers SVG de qualité médiocre.

Voici quatre options d'outils :

• Adobe Express Free SVG Converter. Pratique si vous connaissez l'écosystème Adobe, reconnu pour son interface soignée, son intégration avec d'autres outils Adobe et la qualité de ses résultats.
• CloudConvert. Un convertisseur polyvalent prenant en charge une vaste gamme de formats de fichiers, y compris divers types d'images vers SVG.
• Convertio. Similaire à CloudConvert, il est convivial et prend en charge de nombreux formats.
• FreeConvert. Un autre convertisseur performant qui utilise le cryptage SSL 256 bits lors du transfert de fichiers et les supprime automatiquement après quelques heures.

Modifier un fichier SVG

Pour modifier un fichier SVG existant, l'approche la plus pratique consiste à utiliser un éditeur de graphiques vectoriels comme Adobe Illustrator. Ces programmes sont conçus pour manipuler une image vectorielle.

Ouvrez les fichiers SVG dans l'application d'édition et utilisez ses outils graphiques pour modifier des éléments individuels comme les tracés, les formes ou les groupes. Vous pouvez redimensionner, remodeler, transformer, ajouter de la couleur ou appliquer des effets à ces éléments.

Techniquement, vous pouvez modifier les fichiers SVG dans un éditeur de texte brut puisqu'ils sont écrits en code XML, mais cette méthode n'est pas recommandée pour des modifications importantes car le risque d'endommager le fichier est élevé. Les modifications XML conviennent principalement aux ajustements mineurs, comme changer un attribut de couleur.