Découvrez la démarche d'éco-conception et de réalisation de notre site internet

Développement

Format SVG : c’est quoi et quels sont ses avantages ?

Publié le 4 avr. 2024 - 6 minutes de lecture

Le format SVG est un format de fichier vectoriel léger et redimensionnable, optimisé pour le web, permettant de faire des illustrations 2D, logos, et graphiques de haute qualité sans perte de qualité lors du redimensionnement. Bénéfique pour le SEO, il est recommandé pour ses performances.

Dans le web, il existe une multitude de formats de fichier, que ce soit pour du texte, des images, ou encore de la vidéo. Tout le monde connaît, ou a déjà entendu parler des formats JPEG, HTML, PHP... Mais connaissez-vous le format SVG ? Ce format, utilisé pour l'affichage d'images, d'illustrations 2D et de graphiques sur site web, fait partie des incontournables chez Lemon Interactive, et devrait l'être, selon nous, pour tous les éditeurs de sites. On vous explique pourquoi.

Illustration d'une personne qui utilise le format SVG sur son ordinateur.
Illustration d'une personne qui utilise le format SVG sur son ordinateur.

Qu'est-ce que le SVG ?

Le SVG, ou Scalable Vector Graphics (Graphique Vectoriel Adaptable en français), est un format de données basé sur du XML. C'est alors un format de fichier vectoriel parfaitement optimisé pour le web, et particulièrement recommandé par les professionnels.


À l'opposé des formats type PNG, JPEG ou même le format WebP, dits "matriciels", et qui fonctionnent avec des pixels, les formats SVG sont dits "vectoriels" et fonctionnent avec un système de code avec des points. On retrouve ce schéma vectoriel avec le format AI d'Illustrator, par exemple.


Ainsi, ce format de fichier parfaitement optimisé pour le web permet de redimensionner les logos et images sans perte de qualité, contrairement aux autres formats. C'est là sa principale force, mais ce n'est pas la seule.


Chez Lemon Interactive, la team UI-UX récupère souvent des projets de site web qui ont une belle charte graphique, avec un logo en différents formats, comme Photoshop, PDF, Illustrator, ou PNG. Mais, bien souvent, le format SVG manque à l'appel, ce qui limite grandement les possibilités de personnalisation du site.

Les origines des fichiers SVG

Le format SVG a vu le jour en 1999, suite à la demande du World Wide Web Consortium (W3C) de proposer un nouveau format d'image vectorielle. Les développeurs ont donc travaillé sur ce projet, et le format SVG est né. 


Il n'a pas vraiment connu de succès et est resté peu utilisé pendant une longue période. Mais dès 2017, les professionnels du design web ont commencé à voir les avantages d'un tel format, et aujourd'hui, on l'utilise couramment pour les images 2D des sites Internet.

Dans quels cas utilise-t-on les fichiers SVG ?

S'il a longtemps été mis de côté par les designers web, le format SVG a beaucoup évolué, et sert aujourd'hui dans de nombreux cas.


Afficher un logo ou une icône sur un site web


Le principal cas d'usage du format vectoriel SVG est l'affichage des logos et des icônes sur les sites Internet. Et s'il est surtout utilisé dans ce cas précis, c'est parce qu'il permet d'obtenir une image que l'on peut redimensionner à volonté, sans jamais altérer sa qualité.


On peut alors facilement réduire ou augmenter la taille d'une image afin qu'elle s'adapte à l'emplacement dédié.

Illustration d'une femme modifiant l'affichage d'un logo au format SVG.
Illustration d'une femme modifiant l'affichage d'un logo au format SVG.

Améliorer le référencement du site web


Le SEO peut sembler totalement hors sujet dans le cas du format SVG. Pourtant, grâce au code XML, les graphiques et les illustrations comportant du texte peuvent être lus par Google. Si le contenu comporte des mots-clés ciblés, Google les interprète et permet potentiellement d'améliorer le positionnement du site dans la page des résultats de recherche (SERP).


Animer un logo ou une image


En SVG, il est tout à fait possible de modifier une partie d'un logo, pour l'agrandir, changer la couleur, changer la forme... On peut cibler les éléments à l'intérieur du logo SVG, et les modifier un par un, chose qu'on ne peut pas faire en PNG.


Cela représente donc une option intéressante pour intégrer des animations sur un visuel, grâce au CSS.

Quelles sont les grandes forces du format SVG pour le web ?

Si les experts UI-UX recommandent fortement l'utilisation du format SVG pour les logos d'entreprise ou les autres visuels importants, c'est qu'il présente de nombreux avantages.


Le SVG est très léger


Le format Scalable Vector Graphics a l'avantage indéniable d'être très léger. C'est une de ces grandes forces, notamment sur un site web lourd, aux nombreux fichiers images. 


Prenons pour exemple le logo Lemon Interactive : si vous l'enregistrez en PNG, il aura un poids de 50 Ko. Ce poids est énorme et peut ralentir les performances dès qu'on le charge sur le site web de Lemon. En revanche, si vous l'enregistrez au format SVG, il ne fera plus que 12 Ko, sans aucune différence à l'œil nu. Si cela allège grandement votre site, cela joue aussi en faveur du référencement du site, qui gagne en vitesse de chargement, l'un des critères majeurs des Core Web Vitals de Google.


Un fichier SVG est redimensionnable


Vous allez probablement penser qu'un fichier PNG est lui aussi redimensionnable. Sauf que si vous essayez d'agrandir une image PNG, vous allez très vite vous rendre compte que le rendu ne sera pas net.


En effet, plus on étire les pixels de ce type de fichier, et plus ils se voient et se dégradent. Il est alors impossible de passer d'un logo PNG de 100 X 100 pixels à un logo de 500 X 500 pixels sans perdre en qualité d'image, jusqu'à rendre le logo inutilisable et illisible.


Avec le SVG, ce ne sont pas des pixels, mais du code avec des points. Ainsi, si on étire l'image, la qualité ne va pas bouger. Et cela est valable à l'infini !

Illustration de deux personnes devant un fichier SVG en train de le redimensionner.
Illustration de deux personnes devant un fichier SVG en train de le redimensionner.

Le texte n'est plus traité comme un design


Il n'est pas rare de voir des logos avec du texte, comme un slogan ou tout simplement le nom de l'entreprise. Avec un format d'image pixellisé, le texte est alors indissociable de l'image, et considéré comme un design ininterprétable. 


En revanche, avec un format SVG, le texte est géré comme du texte. Ainsi, un lecteur d'écran est tout à fait capable d'analyser les mots présents sur l'image SVG. Cette fonctionnalité est très intéressante pour améliorer le référencement d'un site, car les moteurs de recherche vont indexer le texte du fichier SVG, mais elle permet aussi aux personnes utilisant l'aide audio pour lire un contenu web d'entendre le nom du logo.

Les petits points faibles des fichiers SVG

Bien sûr, aucun format d'images n'est jamais vraiment parfait, et il faut reconnaître que le SVG peut présenter quelques inconvénients.


L'affichage n'est pas adapté aux photos numériques de très grande qualité : si le fichier SVG est parfait pour un graphique, un logo ou une illustration, il montre quelques faiblesses quand il s'agit d'afficher une photo numérique de grande qualité. En effet, l'absence de pixel complique l'affichage des photographies aux nombreux détails. Mieux vaut, dans ce cas, se tourner vers un format JPEG, plus approprié ;


Les vieux navigateurs ne le prennent pas en charge : si tous les navigateurs récents prennent en charge le format SVG sans difficulté, ce n'est pas toujours le cas des plus anciens. C'est d'ailleurs une des raisons pour lesquelles le SVG a mis du temps à se déployer ;


Le code des images SVG n'est pas simple : les non-initiés peuvent vite se sentir dépassés par le code contenu dans les fichiers SVG. Il faut une certaine pratique pour commencer à se familiariser avec ce format particulier.

Illustration d'un homme avec une loupe montrant un fichier SVG et ses défauts éventuels.
Illustration d'un homme avec une loupe montrant un fichier SVG et ses défauts éventuels.

Comment créer un logo SVG ?

Pour pouvoir créer votre logo en format SVG, il va vous falloir utiliser un logiciel de vectorisation, comme Illustrator, par exemple. Mais cela n'est pas si simple, et il est parfois préférable de confier la tâche à un graphiste. 


Pour l'intégrer à votre site web, là encore, mieux vaut faire appel à un développeur qui maîtrise le code à la perfection.

Vous avez un logo, mais il vous manque sa version SVG ? Lemon Interactive vous encourage vivement à créer votre logo en format SVG, afin de profiter des nombreux avantages de ce format devenu incontournable.

Qu'est-ce que le format SVG et pourquoi l'utiliser ?

CONTACTEZ-NOUS

Pour travailler avec des fichiers SVG, les logiciels les plus populaires incluent Adobe Illustrator, pour une approche professionnelle, et Inkscape, qui est gratuit et open-source. CorelDRAW offre également de puissants outils de vectorisation, tandis que Sketch ou Figma sont des options privilégiées par les designers UX/UI.

Pour convertir un fichier en format SVG, utilisez un convertisseur en ligne gratuit ou un logiciel de graphisme qui supporte l'importation et l'exportation de fichiers SVG. Chargez votre fichier, sélectionnez 'SVG' comme format de sortie et cliquez sur 'Convertir'. Téléchargez ensuite votre nouveau fichier SVG. Cela optimisera la compatibilité pour le web et les éditeurs graphiques.

Pour créer un fichier SVG, vous pouvez utiliser un éditeur graphique vectoriel comme Adobe Illustrator ou Inkscape. Commencez par ouvrir le programme, créez votre design, et choisissez 'Enregistrer sous' pour sauvegarder votre œuvre au format SVG. Assurez-vous que votre titre et vos balises sont pertinents pour améliorer le référencement SEO.

Aucun format n'a officiellement remplacé le SVG puisqu'il reste largement utilisé pour ses avantages en termes de mise à l'échelle et de résolution. Cependant, de nouvelles technologies comme HTML5 Canvas ou des formats comme WebP gagnent en popularité pour certaines utilisations graphiques sur le web.

Je développe des sites et des business !

Photo de Maxime Lacheré

Sorti de la tête de

Maxime Lacheré

Dans la même thématique...

Animation web : introduction au développement avec CSS, JavaScript et SVG

22 mai 2024

Coder en dur ou « hardcode » : pourquoi est-ce déconseillé ?

22 mai 2024

Les 5 avantages de TypeScript face à JavaScript

16 mai 2024