Traceur d’image en SVG

Le Traceur d'Image en SVG transforme un PNG, un JPG ou tout autre bitmap matriciel en un vecteur SVG propre et infiniment redimensionnable. Contrairement aux outils côté serveur qui téléchargent votre fichier ou aux "faux" fichiers SVG qui ne font qu'intégrer un bitmap au format base64, cet outil s'exécute entièrement dans votre navigateur. Il quantifie l'image en couches de couleurs et vectorise à nouveau les contours de chaque couche en de véritables tracés vectoriels à l'aide d'une combinaison de suivi des contours, de la simplification Ramer-Douglas-Peucker et du lissage des coins de Chaikin. Glissez un logo, une icône, un croquis ou une photo, observez la reconstruction de l'aperçu côte à côte en temps réel, puis copiez le balisage SVG ou téléchargez un fichier .svg que vous pouvez modifier dans Figma, Illustrator ou Inkscape.

Ce qui rend ce traceur différent

Comment ça fonctionne (Pipeline en 5 étapes)

Mode d'emploi

1. Importez un bitmap. Glissez-déposez un fichier PNG/JPG sur la zone de dépôt, cliquez pour parcourir, collez depuis le presse-papiers (Ctrl+V) ou cliquez sur l'un des exemples intégrés pour voir le traceur en action.
2. Choisissez un préréglage. Logo pour les symboles de 2 à 4 couleurs, Silhouette pour les formes découpées, Croquis au trait pour les dessins faits à la main, Affiche photo pour les images postérisées, Art détaillé pour un rendu nuancé en 10 couleurs.
3. Ajustez les curseurs. Couches de couleurs contrôle le nombre de couleurs distinctes conservées. Lissage arrondit l'effet d'escalier des pixels. Simplification fusionne les longues lignes droites (plus bas = plus de détails, plus haut = fichier plus léger). La résolution de vectorisation définit la largeur de travail interne.
4. Copiez ou téléchargez. Utilisez Copier le SVG pour obtenir le balisage brut, Télécharger le .svg pour un fichier vectoriel modifiable, ou Télécharger le .png pour convertir le SVG nettoyé en une image matricielle haute résolution.

Conseils pour une vectorisation optimale

• Commencez par des images à fort contraste. Les arrière-plans unis et les bords nets se vectorisent beaucoup mieux que les photos chargées de dégradés.
• Utilisez le bon préréglage pour chaque tâche. Le préréglage par défaut Logo suppose 3 couleurs unies — le rendu sera étrange sur une photo. Passez à Affiche photo ou Art détaillé pour les images naturelles.
• Augmentez d'abord la simplification, puis le lissage. La simplification supprime des points ; le lissage adoucit ce qui reste. Procéder dans cet ordre permet d'obtenir un résultat à la fois léger ET fluide.
• Réduisez la résolution de vectorisation pour les logos. Une largeur de 240 px est amplement suffisante pour une icône — aller au-delà ne génère que des tracés plus bruités.
• Activez le Fond transparent si vous souhaitez intégrer le SVG dans une mise en page colorée. Sinon, le traceur remplit l'arrière-plan de blanc.
• Pour les croquis, utilisez le mode Contours. Il applique d'abord un filtre de Sobel et vectorise la carte des contours obtenue — idéal pour le dessin au trait et les croquis au crayon.

Où utiliser les fichiers SVG vectorisés

Les logos et icônes vectoriels restent parfaitement nets sur toutes les tailles d'écran et toutes les densités de pixels (DPI) — de la favicône 16×16 à la bannière principale 4K. Les fichiers SVG obtenus constituent également le point de départ idéal pour des modifications ultérieures : ouvrez le fichier dans Figma, Adobe Illustrator ou Inkscape pour recolorer, remodeler ou animer chaque tracé individuel. Le format SVG est aussi idéal pour le web : collez le balisage directement dans votre code HTML pour éviter une requête réseau supplémentaire, intégrez-le dans votre CSS comme background-image via une URI data:, ou animez les contours des tracés avec stroke-dasharray pour obtenir un effet d'écriture manuscrite.

Détails sur l'algorithme

La référence classique absolue en matière de vectorisation est Potrace (Peter Selinger, 2003), qui utilise des étapes d'ajustement de polygones et d'optimisation de courbes pour produire des tracés de Bézier remarquablement fluides. Un portage complet de Potrace représente plusieurs milliers de lignes de code. Cet outil utilise donc un pipeline plus léger mais tout aussi éprouvé : le suivi des contours par voisinage de Moore pour l'extraction des contours, Ramer-Douglas-Peucker (également appelé algorithme de Douglas-Peucker) pour la simplification des tracés, et l'algorithme de découpe des coins de Chaikin pour le lissage. Chaque étape s'exécute en temps linéaire O(n) par rapport à la longueur du tracé, permettant au traceur de traiter une image classique de 240 px en une fraction de seconde.

Confidentialité et sécurité

Tout s'exécute localement. L'élément <input type="file"> lit votre fichier directement dans le navigateur, l'API Canvas extrait les données de pixels sur votre machine et le traceur JavaScript ne transmet jamais votre image sur internet. Vous pouvez le vérifier en ouvrant l'onglet Réseau des DevTools pendant le processus : aucun trafic de transfert n'apparaît. L'outil est donc totalement sûr pour les logos propriétaires, les éléments graphiques de marques non encore publiés et les photos personnelles.

FAQ

Mon image est-elle téléchargée sur votre serveur ?

Non. Le Traceur d'Image en SVG est 100% côté client. Votre bitmap est lu dans le navigateur, traité avec l'API Canvas, vectorisé avec du JavaScript pur, et n'est jamais envoyé sur le réseau. Déconnectez votre Wi-Fi et le traceur continuera de fonctionner.

Quels formats d'image puis-je vectoriser ?

Tout format matriciel que votre navigateur peut afficher : PNG, JPG, GIF (première image), WebP et BMP. Vous pouvez également vectoriser un SVG existant (il sera d'abord pixellisé), ce qui est utile pour simplifier des vecteurs complexes ou re-quantifier leurs couleurs.

Par quel préréglage dois-je commencer ?

Pour les logos et icônes en couleurs unies, utilisez le préréglage Logo. Pour les découpes purement en noir et blanc, utilisez Silhouette. Pour les dessins et croquis au trait, utilisez Croquis au trait. Pour les photos, utilisez Affiche photo ou Art détaillé. Ajustez ensuite légèrement les curseurs — l'aperçu en direct permet de comprendre instantanément l'action de chaque réglage.

Pourquoi mon SVG vectorisé semble-t-il pixellisé ou anguleux ?

Augmentez le curseur de Lissage pour arrondir les coins nets des pixels, et augmentez le curseur de Simplification pour réduire les longues lignes droites. Une Résolution de vectorisation plus élevée permet également de capturer plus de détails avant le processus, offrant ainsi des contours plus fins.

Puis-je modifier le SVG vectorisé par la suite ?

Oui. La sortie est un balisage SVG simple contenant une balise <path> par couche de couleur (ou une par silhouette en mode mono/contours). Ouvrez-le dans Inkscape, Illustrator, Affinity Designer, Figma ou n'importe quel éditeur de texte pour recolorer, remodeler ou animer les différents tracés. Les tracés sont ordonnés selon l'ordre de rendu (du plus clair au plus sombre), l'organisation des calques dans votre éditeur vectoriel sera donc parfaitement correspondante.

Quelle peut être la taille de mon image d'entrée ?

Toute taille — mais le traceur rééchantillonne en interne votre bitmap selon la Résolution de vectorisation choisie (64–512 px). Choisir une valeur plus élevée capture des détails plus fins au détriment d'une taille de fichier SVG finale plus lourde. Pour la plupart des logos, une taille de 200–300 px est idéale ; pour les photos détaillées, essayez 400–512 px.

Le SVG vectorisé sera-t-il identique au bitmap d'origine ?

Proche, mais jamais identique au pixel près — c'est le principe même de la vectorisation. Réduire l'image à N couleurs élimine forcément les dégradés subtils, et la simplification des tracés supprime les micro-détails. Pour des éléments de marque hautement critiques, vous devez toujours privilégier le fichier vectoriel original s'il existe ; cet outil est conçu pour les situations où vous ne disposez que d'un bitmap et avez besoin d'une version vectorielle exploitable.

Puis-je utiliser le SVG vectorisé à des fins commerciales ?

Le traceur n'ajoute aucun filigrane, aucune attribution ni aucun script de suivi au fichier généré. Votre droit à utiliser le résultat commercialement dépend exclusivement des droits dont vous disposez sur le bitmap d'origine — vectoriser le logo de quelqu'un d'autre ne vous en transfère pas la propriété. Utilisez-le sur des ressources que vous avez créées ou que vous êtes autorisé à vectoriser.