Image matricielle vs image vectorielle
Les images se divisent en deux catégories :
- Images matricielles (JPEG/PNG/WebP) : composées de pixels, deviennent floues et pixelisées au-delà d'un certain agrandissement
- Images vectorielles (SVG) : décrites par des chemins mathématiques, nettes à tout agrandissement
Comprendre cette différence essentielle permet de savoir à quoi SVG est adapté.
Avantages principaux du SVG
Mise à l'échelle infinie sans perte
SVG décrit les graphiques par des chemins, courbes et formes, pas par des pixels. Agrandi à n'importe quelle taille, il reste net, sans pixelisation. C'est le plus grand avantage de SVG, particulièrement adapté aux icônes et logos nécessitant plusieurs tailles.
Petite taille (pour les graphiques simples)
Pour les icônes et logos simples, le fichier SVG est bien plus petit que le PNG équivalent. Un logo épuré en PNG peut peser quelques Ko à quelques dizaines de Ko, en SVG 1 à 2 Ko seulement. Mais les images complexes de type photo ne conviennent pas à SVG.
Modifiable par code
SVG est essentiellement du texte XML, modifiable directement avec un éditeur de texte pour la couleur, la forme, le texte. Le front-end peut contrôler la couleur en CSS et la modifier dynamiquement en JS, ce que les images matricielles ne permettent pas.
Prise en charge des animations
SVG prend en charge les animations intégrées et les animations CSS/JS. Les animations de chargement et les effets d'icône en SVG sont légers et fluides.
Consultable et indexable
Le texte dans SVG est du vrai texte, indexable par les moteurs de recherche et lisible par les lecteurs d'accessibilité, plus favorable que le texte dans une image.
À quoi SVG est adapté
- Icônes : icônes de navigation, icônes fonctionnelles, premier choix en design UI
- Logos : les logos de marque nécessitent plusieurs tailles, le vectoriel est le plus adapté
- Illustrations : illustrations en flat design, graphiques décoratifs
- Graphiques : la visualisation de données en vectoriel reste nette à toute échelle
- Icônes de police : les polices d'icônes sont essentiellement du SVG
À quoi SVG n'est pas adapté
- Photos : les photos, riches en couleurs et en détails, décrites en vectoriel gonflent la taille et perdent en fidélité. Utilisez JPEG/WebP pour les photos
- Dégradés et textures complexes : les dégradés et textures excessivement complexes augmentent la taille du SVG, moins efficaces qu'une image matricielle
- Effets de filtre nécessaires : les filtres complexes sont plus efficaces en image matricielle
Limites du SVG
Problèmes de compatibilité marginaux
Les navigateurs modernes prennent pleinement en charge SVG, mais certains environnements anciens et certains clients de messagerie le gèrent mal. Testez dans les cas importants.
Taille des images complexes
Les photos converties en SVG deviennent extrêmement volumineuses et infidèles. SVG n'est pas universel, il ne convient qu'aux graphiques vectoriels.
Courbe d'apprentissage
Concevoir un SVG nécessite des compétences en dessin vectoriel, contrairement aux images matricielles qu'on obtient par photographie. Mais utiliser des ressources SVG existantes ou un outil de conversion matriciel vers vectoriel réduit la barrière.
Conversion d'image matricielle en SVG
La conversion d'une image matricielle (comme PNG) en SVG est un processus de « tracé » — l'outil identifie les contours des formes dans l'image et génère un chemin vectoriel approximatif.
Utilisez l'outil Image vers SVG :
- Télécharger une image matricielle (image épurée et à fort contraste recommandée, comme un logo)
- L'outil trace et génère le SVG
- Télécharger le SVG
Remarques sur la conversion
- Les graphiques simples (logos, icônes) donnent de bons résultats en SVG
- Les photos et images complexes converties en SVG perdent en fidélité et gonflent, déconseillé
- Après conversion, vérifier la douceur des contours et l'exactitude des couleurs
- Le SVG obtenu peut être optimisé avec un éditeur de texte
Conseils d'utilisation de SVG
Intégrer dans le HTML
Les petits SVG directement intégrés au HTML économisent les requêtes HTTP et restent contrôlables en CSS.
Utiliser currentColor pour les icônes
Les icônes SVG remplies avec currentColor changent de couleur via CSS en modifiant color, un jeu d'icônes réutilisable en plusieurs couleurs.
Compresser le SVG
SVG étant du texte, il peut être compressé par des outils (supprimer les commentaires, simplifier les chemins). Compresser avant la mise en production réduit la taille.
Résumé
SVG repose sur « vectoriel, évolutif, modifiable ». Icônes, logos, illustrations et graphiques sont au mieux en SVG, les photos en image matricielle. La conversion matricielle vers SVG convient aux graphiques simples. L'outil de conversion SVG DocsAll traite côté navigateur, convertit un logo matriciel en vectoriel en un clic, pratique pour une utilisation multi-tailles ultérieure.