Référence · 7 min de lecture
Bitmap ou vectoriel : ce que la vectorisation d’image peut et ne peut pas faire
Un bitmap est une grille de points colorés. Un vecteur est une liste de formes. Vectoriser, c’est deviner les formes à partir des points, ce qui fonctionne à merveille pour certaines images et seulement approximativement pour d’autres. Voici pourquoi.
01 · Deux types d’images
Des points ou des formes
La même image, deux descriptions radicalement différentes.
Une image matricielle (ou bitmap) : PNG, JPG, GIF, WebP, BMP, une photo, une capture d’écran, est un rectangle de pixels, chacun ayant une couleur. Un logo de 1 000 × 1 000 pixels, ce sont un million de valeurs. Le fichier ne contient ni cercles ni lettres, seulement des points qui ressemblent à des cercles et à des lettres à cette taille. Agrandissez l’image et les points grossissent ; le logiciel d’affichage peut flouter entre eux, mais il ne peut pas savoir où se trouvait le contour.
Une image vectorielle : SVG, EPS, PDF, AI, enregistre les formes elles-mêmes : « un cercle de rayon 40 en (100, 100), rempli de bleu » ou, plus généralement, un tracé composé de segments droits et de courbes de Bézier. Il n’y a pas de résolution. Un logo vectoriel s’affiche de façon identique en favicon de 16 pixels et sur une bâche de 10 mètres, et un logo de 200 Ko en PNG pèse souvent 5 Ko en SVG.
| Matriciel (PNG, JPG…) | Vectoriel (SVG…) | |
|---|---|---|
| Composé de | Une grille de pixels | Des lignes, des courbes et des remplissages |
| Agrandissement | Flou ou pixellisé | Reste net à toute taille |
| Idéal pour | Photos, textures, captures d’écran | Logos, icônes, texte, schémas, fichiers de découpe |
| Modification | Pixel par pixel | Déplacer un point, changer un remplissage |
| Poids du fichier | Augmente avec la résolution | Augmente avec la complexité |
Vous comparez deux formats précis ? Le guide PNG ou SVG traite du poids des fichiers, de la compatibilité et du choix de l’un ou de l’autre.
02 · Comment fonctionne la vectorisation
Des pixels aux formes
Vectoriser, c’est inverser le processus. AnyToSVG le fait en cinq passes, toutes sur votre machine :
- Repérer les zones aux ombrages progressifs. Les pixels qui ne diffèrent que légèrement de tous leurs voisins sont regroupés en zones ; chaque grande zone reçoit un modèle de couleur linéaire ou radial, et si le modèle l’explique bien, la zone devient une seule forme avec un remplissage en dégradé SVG.
- Regrouper les pixels restants par couleur. Les couleurs dominantes forment une palette de 2 à 32 entrées, et chaque pixel est affecté à la plus proche. Les pixels de bord anticrénelés, qui sont des mélanges, sont nettoyés pour ne pas devenir une fine couleur à part.
- Créer un masque par remplissage : une image en noir et blanc de « l’endroit où se trouve cette couleur (ou ce dégradé) ».
- Vectoriser chaque masque avec Potrace, qui parcourt le contour de chaque tache, décide quels angles sont de vrais angles, et ajuste des courbes de Bézier lisses sur le reste.
- Empiler les tracés de la plus grande surface à la plus petite dans un SVG, avec un
<path>par remplissage.
Remarquez ce que l’algorithme ne fait jamais : il ne reconnaît ni la lettre « A » ni un visage. Il voit des taches, des contours et des rampes de couleur continues. C’est pourquoi il est excellent pour une catégorie d’images et simplement acceptable pour une autre.
03 · Couleurs de transition
Où passent les ombrages : des dégradés, pas des bandes
L’étape que la plupart des vectoriseurs sautent, et la raison pour laquelle leurs ciels sont rayés.
Un vectoriseur qui commence par ramener l’image à des aplats a déjà perdu toutes les transitions douces. Un ciel, un reflet sur une sphère, l’ombrage d’une bande de ballon : chacun devient un escalier de deux, quatre ou huit bandes unies aux bords durs, et plus vous autorisez de couleurs, plus il y a de bandes et plus le fichier est lourd.
AnyToSVG ajoute une passe avant la réduction des couleurs. Les pixels qui ne diffèrent que légèrement de leurs quatre voisins sont regroupés en zones lisses (les bords anticrénelés font office de murs, si bien qu’une zone ne déborde jamais sur la forme voisine). Chaque grande zone reçoit ensuite un modèle de couleur : linéaire (une direction de variation et des repères de couleur le long de celle-ci) ou radial (un centre et des repères selon la distance). Si le modèle explique fidèlement les pixels, toute la zone est vectorisée en une seule forme remplie par un vrai <linearGradient> ou <radialGradient>. Un ombrage qui épouse une courbe, qu’aucun dégradé à une dimension ne peut suivre, est découpé en quelques morceaux, chacun avec son propre dégradé, le long de jointures où les modèles voisins concordent.
Ce qui reste en bandes : un ombrage qui suit une forme compliquée, plusieurs ombres douces qui se chevauchent, ou une texture photographique. Ces zones échouent au test du modèle et retombent sur des aplats, où le curseur du nombre de couleurs prend le relais.
04 · Se vectorise à merveille
Les images faites de formes unies
- Logos et logotypes : le cas classique. Quelques couleurs, des contours nets : le SVG est pratiquement le dessin d’origine.
- Icônes et clipart aux remplissages pleins.
- Dessins au trait, croquis, signatures, tampons en mode noir et blanc : un seul tracé, quelques kilo-octets.
- Lettrage et calligraphie : les courbes sont lisses ; seuls les très petits caractères risquent de se fondre.
- Silhouettes, pochoirs et fichiers de découpe pour plotters de découpe vinyle et découpeuses laser.
- Cartes, schémas, organigrammes en aplats (le texte sera des formes, pas du texte modifiable).
05 · Se vectorise approximativement
Les images faites de tons
- Les photographies deviennent des affiches : de 8 à 32 aplats aux bords durs. Saisissant comme illustration ou séparation de sérigraphie ; inutile comme « agrandissement ».
- Les ombrages complexes (plusieurs ombres douces qui se chevauchent, ou un dégradé qui contourne une forme complexe) ne sont que partiellement saisis : ce qui correspond à un dégradé linéaire ou radial (ou à quelques morceaux de ceux-ci) devient un dégradé, le reste se transforme en bandes unies. Les ciels, les reflets, les bandes ombrées et les sphères passent intacts, comme on l’a vu plus haut.
- Les JPG très compressés portent un bruit en blocs que le vectoriseur détoure fidèlement. Lisser le bruit d’abord et une taille de taches plus élevée aident ; une meilleure source aide davantage.
- Les toutes petites images (moins de 200 px) ont trop peu de pixels pour définir une courbe : les angles sortent arrondis et les détails fusionnent.
- Le texte à modifier : les lettres seront des formes parfaites, mais pas une police. Retapez-le dans votre éditeur en vous servant du résultat comme modèle.
06 · Vectoriser ou redessiner ?
Une règle de décision rapide
Vectoriser copie ce qui existe. Redessiner crée ce qui devrait exister.
Vectorisez quand le bitmap est un rendu fidèle d’un dessin qui était déjà en aplats : vous retrouvez un vecteur qui a existé. Dix secondes, et c’est fait.
Vectorisez, puis peaufinez quand la source est un peu brute : un logo pris sur un site web à 300 px, une signature scannée, un croquis photographié. La vectorisation fait 90 % du travail et un logiciel de vectoriel fait le reste : supprimer une forme parasite, redresser une ligne, aligner un angle.
Redessinez quand le bitmap est une photo de l’objet plutôt que l’objet lui-même : un logo sur une enseigne de magasin, une carte de visite sous une lampe, un écusson brodé. Les pixels contiennent alors de la perspective, de la lumière et de la texture qu’aucun vectoriseur ne devrait reproduire, et le résultat sert au mieux de calque sous votre propre dessin.
Dans les trois cas, l’aperçu vous dit dans quelle situation vous êtes avant même de télécharger quoi que ce soit, ce qui est précisément son intérêt.
À lire aussi
Tout savoir sur le vectoriel
Essayez en lisant
Le convertisseur est gratuit, sans compte à créer, et affiche le SVG à côté de votre original en une seconde environ.