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

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.

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é.

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 !

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.

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 ?