Vectoriser un logo de PNG vers SVG — sans perdre le détail fin

Tu as un logo en PNG. Tu en as besoin en SVG — pour le site, pour la signature e-mail qui doit s'afficher net sur les écrans Retina, pour l'imprimeur qui veut du vectoriel pour les cartes de visite. Embaucher un designer pour le recréer prend des jours. Les outils d'auto-vectorisation prennent quelques secondes. Ce guide explique comment vectoriser proprement, où ces outils échouent, et comment récupérer quand ça arrive.

Outil utilisé : paste-to-download.com/vectorize — convertisseur PNG/JPG vers SVG dans le navigateur, sans upload, sans filigrane.

Pourquoi le SVG compte pour les logos

Les logos doivent avoir bonne mine à chaque taille. Un favicon 32 × 32 et une bannière de salon professionnel 4000 × 4000 sont le même logo, mais un fichier bitmap (PNG, JPG) ne peut être que d'une taille — le reste est soit pixelisé (étiré plus grand), soit du gaspillage d'octets (surdimensionné pour l'emplacement).

Le SVG (Scalable Vector Graphics) décrit le logo en maths — courbes, remplissages, traits. Les maths se rendent parfaitement à n'importe quelle taille. Standard partout où un navigateur moderne existe, plus la plupart des logiciels de design.

L'idéal : stocker le logo maître en SVG, exporter des versions bitmap à la demande.

Ce que fait réellement l'auto-vectorisation

Un vectoriseur (aussi appelé « trace » ou « rasterize ») regarde une image bitmap et identifie des régions de couleur similaire. Pour chaque région, il calcule un chemin fermé qui suit le contour de la région. La sortie est un chemin par région — c'est ton SVG.

La qualité de la sortie dépend de :

Résolution de la source — plus grande entrée = plus de détail à tracer
Netteté des bords — les bords propres se tracent proprement ; les bords flous produisent des chemins ondulés
Nombre de couleurs — moins de couleurs = sortie plus simple ; plus de couleurs = plus de chemins
Artefacts d'anti-aliasing — les bords doux de la rastérisation créent de fausses micro-régions de couleur

En comprenant ça, tu peux prétraiter la source pour obtenir une sortie vectorielle propre.

Étape 1 : Partir de la source la plus haute résolution disponible

La règle d'or : si le fichier vectoriel original existe (AI, EPS, PDF, SVG), utilise-le. Ne vectorise pas quand tu as l'original.

Si tu n'as que des bitmaps, choisis le plus grand, le plus propre :

Un PNG 2000 × 2000 se vectorise toujours mieux qu'une miniature 200 × 200
Une capture d'écran du logo depuis un site web est pire que le fichier source utilisé par le site
Une photo d'un logo imprimé (appareil en main, capture d'une carte de visite) est bien pire qu'un fichier numérique — le ré-encodage à travers JPEG plus le bruit photographique crée de nombreuses fausses régions de couleur

Si la source est petite ou bruitée, essaie d'abord /upscale en mode Lanczos pour nettoyer et agrandir avant de vectoriser.

Étape 2 : Nettoyer la source si nécessaire

Les vectoriseurs aiment :

Les fonds blancs propres ou transparents
Les couleurs en aplats (pas de dégradés ni de textures photographiques)
Les bords nets (l'anti-aliasing est OK ; le flou ne l'est pas)

Les vectoriseurs galèrent avec :

Les artefacts JPEG (chaque bloc 8×8 devient une fausse région)
Les dégradés (interprétés comme de nombreuses étapes discrètes de couleur)
Les ombres portées (vectorisées comme une séquence d'anneaux à faible alpha)
Les fonds photographiques (chaque feuille, chaque nuage devient un chemin)

Prétraitement :

Retirer le fond avec /remove-background si le logo est sur un fond complexe
Appliquer un léger flou si la source a des artefacts JPG (contre-intuitif — adoucit les faux bords avant le traçage)
Augmenter le contraste si la source est délavée
Booster la saturation si tu veux que le vectoriseur distingue clairement les régions de couleur

Étape 3 : Ouvrir l'outil de vectorisation et choisir le bon mode

Ouvre /vectorize. Dépose ton logo. Choisis le mode :

High Contrast : idéal pour les logos 1-2 couleurs (noir sur blanc, noir sur couleur). Produit 1-2 chemins.
Color : idéal pour les logos multicolores en aplats (3-8 couleurs distinctes). Produit un chemin par région de couleur.
Detailed : pour les logos avec de nombreux petits éléments ou des traits fins. Produit plus de chemins, sortie plus grande.

Pour la plupart des logos de marque modernes (propres, en aplats, 2-4 couleurs), le mode Color est le défaut. Pour les monogrammes à l'ancienne ou les logos monochromes, High Contrast.

Étape 4 : Ajuster le seuil et le nombre de couleurs

Deux curseurs critiques :

Seuil (0-255) : la coupure de luminosité pour distinguer le sombre du clair. Seuil plus haut = plus de pixels vont dans la région « sombre ». Défaut 128 (gris moyen). Ajuste jusqu'à ce que les bords du logo correspondent à l'original.
Nombre de couleurs : le nombre maximum de couleurs de remplissage distinctes dans le SVG. Un logo 2 couleurs doit être réglé à 2. Un logo 5 couleurs à 5. Trop haut produit du bruit ; trop bas fusionne des couleurs distinctes.

Dans le vectoriseur paste-to-download, les deux curseurs montrent un aperçu en direct. Ajuste jusqu'à ce que l'aperçu corresponde à l'original, puis exporte.

Étape 5 : Exporter le SVG et vérifier dans un navigateur

Clique sur Vectoriser & Télécharger. Ouvre le fichier .svg résultant directement dans un navigateur (glisse le fichier sur la barre d'adresse) :

Il doit s'afficher identique au PNG
Zoome avec Ctrl+= (ou ⌘+= sur Mac) — à 1000 % de zoom, les bords doivent rester nets
Redimensionne la fenêtre du navigateur — le SVG se re-rend net à n'importe quelle taille

S'il a l'air cassé (chemins en dents de scie, couleurs manquantes, formes bizarres), retourne à l'étape 4 et essaie d'autres réglages.

Échecs fréquents et corrections

« Les bords du logo ont l'air ondulés »

La source était soit en trop basse résolution, soit avait des artefacts de compression JPG. Essaie une source plus haute résolution, ou passe la source par /compress d'abord en PNG (dé-bruite les artefacts JPG), puis vectorise.

« Certaines couleurs se sont fusionnées en une seule »

Le nombre de couleurs est trop bas. Augmente-le jusqu'à ce que chaque couleur de remplissage distincte de l'original ait son propre chemin.

« Il y a un halo de couleurs intermédiaires autour du logo »

Artefacts d'anti-aliasing. Baisse le nombre de couleurs (effondre le halo dans le remplissage principal) ou utilise un seuil plus élevé (élimine les pixels de bord clairs).

« Le texte fin du logo est illisible »

Le texte est la chose la plus difficile à vectoriser depuis un bitmap. Deux options : (a) utiliser la police originale et re-composer le texte manuellement dans le SVG (cherche le nom de la police ; les entreprises utilisent souvent des polices commercialement disponibles), ou (b) accepter l'approximation vectorielle et corriger plus tard.

« Le dégradé de l'original est devenu des paliers à bandes »

Les vectoriseurs ne peuvent pas facilement représenter des dégradés continus. Tu devrais remplacer manuellement les paliers à bandes par un élément <linearGradient> ou <radialGradient>. Pour la plupart des logos ça ne vaut pas la peine ; si le dégradé est essentiel, recrée le logo dans Illustrator/Figma en utilisant la spécification de couleurs de la marque.

Quand tu devrais plutôt embaucher un designer

L'auto-vectorisation est excellente pour :

Usage interne (slides, sites internes, prototypes)
Conversions initiales depuis des supports imprimés
Logos plus petits avec des formes simples

Elle n'est pas excellente pour :

Assets de marque finaux qui seront utilisés pendant des années
Logos avec des éléments dessinés à la main complexes
Impression à très grande taille (bannières, covering véhicule)

Pour les assets de marque finaux, le workflow est : auto-vectoriser → utiliser la sortie comme point de départ → nettoyer manuellement dans Inkscape ou Illustrator. Un designer travaillant depuis un départ auto-vectorisé passe 30 minutes au lieu de 3 heures.

Local au navigateur : pourquoi ça compte pour les logos

Les logos sont souvent confidentiels avant lancement. Les uploader vers un service inconnu pour vectorisation est un risque de fuite.

/vectorize tourne entièrement dans ton onglet de navigateur. Le vectoriseur basé sur Potrace est compilé en WebAssembly, tourne localement, ton logo ne quitte jamais ton appareil. Ouvre le panneau Network : zéro trafic sortant transportant des données de logo.

Le TL;DR

Pars de la source propre la plus haute résolution disponible
Retire le fond ou dé-bruite la source si nécessaire
Ouvre /vectorize, choisis le bon mode
Ajuste seuil et nombre de couleurs jusqu'à ce que l'aperçu corresponde à l'original
Exporte, vérifie dans le navigateur à plusieurs niveaux de zoom

Le résultat : un logo qui passe parfaitement à l'échelle d'un favicon 16 px à une bannière de salon de 5 mètres.