> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# SVGcode : vérifier les formes exportées

> Tracez une image en couleur plate dans SVGcode, copiez le SVG réel et vérifiez sa palette, ses ouvertures intérieures, son arrière-plan et son canevas avant d'utiliser le fichier dans votre conception.

Source: https://perfectvector.com/fr/blog/svgcode-image-tracing

Language: fr
Author: Irene Kim
Published: 2026-11-02T08:00:00+09:00

Pour le traçage d'images SVGcode, chargez votre illustration raster, choisissez Color SVG ou Monochrome SVG, ajustez la trace, puis inspectez le SVG exporté lui-même. Vérifiez ses couleurs, ses trous intérieurs et sa toile avant de l'accepter. Dans notre test de couleurs plates, le SVGcode a produit des chemins réels et a conservé l'ouverture du cadre, mais les deux variantes exportées ont modifié la palette d'origine et utilisé un canevas différent.

Si vous souhaitez un autre flux de travail de navigateur pour une image que vous possédez déjà, [prévisualisez-la gratuitement dans PerfectVector](https://perfectvector.com/fr/image-to-vector). Vous devez déverrouiller le résultat avant de pouvoir le modifier ou l'exporter. Utilisez les mêmes contrôles de forme et de couleur ci-dessous ; cette procédure pas à pas ne compare pas la qualité de sortie des deux outils.

## Quelles traces SVGcode et quoi préparer

Le [SVGcode](https://svgco.de/) convertit les images raster en graphiques vectoriels SVG. Son auteur décrit une implémentation WebAssembly basée sur Potrace qui trace couleur par couleur ; le [dépôt source officiel](https://github.com/tomayac/SVGcode) documente cette implémentation. Cela explique l'approche, mais le fichier exporté est la preuve de votre propre œuvre.

Commencez avec une copie d'une image PNG ou autre image raster prise en charge, un navigateur pouvant accéder au SVGcode et l'autorisation de traiter l'illustration. Pour l'itinéraire du presse-papiers ci-dessous, votre navigateur doit autoriser l'accès au presse-papiers des images. Gardez un éditeur de texte brut disponible pour enregistrer le balisage SVG copié, ainsi qu'un visualiseur ou un éditeur SVG pour la vérification d'achèvement.

Une marque plate avec des régions colorées distinctes constitue une première entrée utile. Enregistrez les couleurs et les ouvertures que vous devez conserver avant de modifier les paramètres. Pour une photo ou un dégradé doux, décidez quels détails vous pouvez simplifier ; le traçage ne peut pas déduire toutes les limites prévues à partir des pixels. Le [guide de vectorisation d'image](https://perfectvector.com/fr/blog/what-is-image-vectorization) explique plus en détail cette décision raster-tracé.

## 1. Chargez l'image et choisissez un mode de trace

Ouvrez le SVGcode et chargez votre image. Pour l'itinéraire que nous avons testé, placez l'image réelle dans le presse-papiers et choisissez **Coller l'image**. Confirmez que l'aperçu affiche l'image souhaitée, y compris les zones transparentes et les petits détails intérieurs, avant d'ajuster quoi que ce soit.

Choisissez **Color SVG** lorsque des régions colorées distinctes sont importantes. Utilisez **Monochrome SVG** lorsqu'une silhouette monochrome est le résultat souhaité. Cette procédure pas à pas a utilisé Color SVG partout ; il ne rapporte pas de test monochrome distinct.

Gardez le raster d'origine ouvert à côté de l'aperçu. Ne jugez pas la trace uniquement selon si ses bords semblent lisses une fois agrandis. Un centre vide, un petit espace ou une couleur délibérément séparée peuvent avoir plus d’importance qu’un bord extérieur lisse.

## 2. Modifiez les paramètres en gardant à l'esprit un détail visible

Commencez par un défaut que vous pouvez signaler, comme des points indésirables à l'extérieur de l'illustration ou une petite ouverture qui disparaît. Modifiez un contrôle, attendez que l'aperçu soit mis à jour, puis comparez à nouveau ce détail.

**Supprimer les taches** supprime les petites régions. L'élever peut aider avec les points parasites, mais vérifiez les petits détails que vous vouliez conserver. **Postériser l'image d'entrée** réduit la variation de couleur avant le traçage ; la postérisation regroupe les couleurs en moins de niveaux. La procédure pas à pas du [SVGcode](https://web.dev/case-studies/svgcode?hl=en) de l'auteur explique à la fois les contrôles et la postérisation par canal.

L'application actuelle expose également la largeur de trait et les paramètres experts. Laissez les contrôles dont vous n’avez pas besoin seuls jusqu’à ce que vous ayez une exportation de base. Un grand nombre de changements simultanés rendent difficile de déterminer lequel a modifié le résultat.

**Illustration**

![Palette conceptuelle, cadre ouvert et plan de travail illustrant trois contrôles d'inspection SVG distincts](https://perfectvector.com/blog/svgcode-image-tracing/inspection-checklist.webp)

*La palette, les trous et la toile sont des contrôles distincts.*

### Ce que notre test initial de couleur plate a montré

Nous avons créé un PNG 512 × 512 avec un fond transparent, un cadre rectangulaire bleu marine avec une ouverture, un rectangle doré et un rectangle sarcelle superposé. Nous avons collé cette image originale dans l'application SVGcode publique, utilisé Color SVG, Suppress Speckles 2 et Stroke width 0, puis copié deux sorties SVG réelles.

Le premier utilisait Postériser l'image d'entrée avec du rouge, du vert et du bleu à 7 étapes chacun et de l'alpha à 1 étape. La seconde utilisait la même image avec Postériser l'image d'entrée décochée. Les commandes RVB et alpha ont été désactivées dans ce deuxième état.

| Vérifier                   | PNG original                    | Postérisation sur                   | Postérisation désactivée            |
| -------------------------- | ------------------------------- | ----------------------------------- | ----------------------------------- |
| Couleurs des régions unies | `#152b46`, `#e6aa3c`, `#3e948d` | Noir, `#d4aa00`, bleu sarcelle      | `#002a2a`, `#d4aa2a`, `#2a8080`     |
| Ouverture du cadre         | Transparent                     | Ouvrir dans le SVG rendu            | Ouvrir dans le SVG rendu            |
| Toile                      | 512 × 512 pixels                | `viewBox="0 0 1024 1024"`           | `viewBox="0 0 1024 1024"`           |
| Structure SVG              | Entrée raster                   | Trois chemins, pas d'image intégrée | Trois chemins, pas d'image intégrée |

La désactivation de la postérisation n'a **pas** restauré les couleurs originales exactes de cette image. Les deux SVG ont également placé l’œuvre d’art dans une toile différente. Il s’agit d’observations à partir d’une image contrôlée, et non d’une référence ou d’une prédiction pour chaque fichier. Ce sont de bonnes raisons de vérifier l’exportation réelle avant de l’utiliser comme modèle de couleur ou de mise en page.

## 3. Copiez le SVG et conservez le balisage réel

Lorsque l'aperçu est prêt, choisissez **Copier SVG**. Attendez la fin de l'**Optimisation de SVG** avant de lire ou de coller le presse-papiers. Lors de notre exécution, une lecture immédiate du presse-papiers était vide ; sa lecture après optimisation a renvoyé le balisage SVG.

Collez le balisage dans un éditeur de texte brut et enregistrez-le avec une extension `.svg`, telle que `artwork-trace.svg`. Confirmez qu'il contient un élément `<svg>` et un `</svg>` de fermeture plutôt qu'une capture d'écran ou un document en texte enrichi. Conservez un nom de fichier distinct pour chaque variante de paramètres afin que l'exportation ultérieure ne remplace pas votre référence.

Il s'agit de l'itinéraire de balisage copié que nous avons réalisé. SVGcode affiche également Enregistrer SVG, mais cette procédure pas à pas ne prouve pas le comportement de la boîte de dialogue d'enregistrement de fichier natif ni l'importation réussie dans une autre application.

## 4. Inspectez les couleurs, les ouvertures et la toile dans le fichier enregistré

Ouvrez le SVG enregistré dans une visionneuse ou un éditeur, à côté de la source intacte. Vérifiez-les séparément :

1. **Palette :** compare les remplissages importants avec les valeurs de couleur prévues. Une trace peut conserver trois régions tout en changeant les trois couleurs. Si des couleurs exactes sont requises, restaurez et vérifiez les remplissages prévus dans votre éditeur.
2. **Ouvertures :** placez un arrière-plan contrasté derrière l'œuvre d'art. Le nouvel arrière-plan doit apparaître à travers les trous prévus et dans l'espace extérieur. Une forme peinte en blanc peut ressembler à une ouverture sur du blanc. Le [guide d'arrière-plan SVG transparent](https://perfectvector.com/fr/blog/transparent-background-svg) montre comment distinguer les deux.
3. **Canvas :** inspecte les limites du document ainsi que les limites de l'illustration. Le **viewBox** définit le rectangle de coordonnées interne du SVG ; ce n'est pas une promesse de dimensions physiques. Vérifiez les marges et la taille dans l'application où vous utiliserez le fichier.
4. **Géométrie :** sélectionnez les régions importantes individuellement et essayez une petite recoloration ou un léger déplacement, puis annulez. Un fichier contenant des chemins nécessite toujours une vérification de la possibilité de modification pour le travail prévu.

SVG peut représenter une ouverture avec plusieurs contours à l'intérieur d'un chemin composé ; le [standard de chemin SVG](https://www.w3.org/TR/SVG2/paths.html) décrit les sous-chemins et les trous. Vous n'avez pas besoin d'un élément de chemin distinct pour chaque limite visible. À l’inverse, un faible nombre de chemins ne prouve pas à lui seul que tous les détails prévus ont survécu.

Notre contrôle d'achèvement était numérique : inspectez le balisage copié et restituez les SVG réels. L'ouverture et l'espace extérieur étaient transparents dans les deux variantes. Aucun résultat d’importation, d’impression ou de découpe de l’éditeur de destination n’a été testé. Pour un examen plus large du transfert, utilisez la [carte d'évaluation de la qualité des traces vectorielles](https://perfectvector.com/fr/blog/evaluate-vector-trace-quality).

## Récupérer après la première vérification échouée

| Ce que tu vois                        | Que vérifier ensuite                                                                                                                           |
| ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| Il reste des points parasites         | Augmentez la suppression des taches avec précaution, puis revérifiez les petites pièces intentionnelles.                                       |
| Une petite fonctionnalité disparaît   | Comparez la source et un paramètre de speckle inférieur avant d'essayer des contrôles sans rapport.                                            |
| Les couleurs diffèrent                | Comparez les remplissages exportés avec votre palette ; ne supposez pas que la désactivation de la postérisation restaure les valeurs exactes. |
| Un trou semble comblé                 | Testez sur un fond contrasté, puis vérifiez si le contour intérieur existe.                                                                    |
| L'œuvre a des marges inattendues      | Comparez les limites de la toile et de l'œuvre d'art ; définissez la taille du document requise dans votre application de destination.         |
| Copier SVG ne donne rien d'utilisable | Attendez l'optimisation, copiez à nouveau et inspectez le texte collé avant de l'enregistrer.                                                  |
| Coller l'image n'est pas disponible   | Vérifiez l'autorisation du presse-papiers et les autres options de chargement d'images visibles de l'application dans votre navigateur.        |

Si un trou reste incorrect, le [guide de dépannage des trous SVG](https://perfectvector.com/fr/blog/svg-holes-fill-in) sépare la géométrie de trace manquante de l'interprétation des règles de remplissage. Pour un flux de travail de traçage de bureau avec des outils de nettoyage direct, consultez [Inkscape Trace Bitmap](https://perfectvector.com/fr/blog/inkscape-trace-bitmap).

Conservez ensemble l'image originale et le SVG accepté. Notez toute correction de palette ou ajustement de toile dont la prochaine personne aura besoin. Si vous souhaitez essayer votre illustration existante dans un autre outil de navigation, [démarrez gratuitement avec PerfectVector](https://perfectvector.com/fr/image-to-vector) et vérifiez la silhouette et les ouvertures de l'aperçu.

## FAQ

**Le SVGcode peut-il tracer un fichier PNG dans de vrais chemins SVG ?**

Oui. Notre PNG original en couleur plate a produit un balisage SVG copié contenant trois chemins et aucune image intégrée. Inspectez votre propre fichier exporté ; ce résultat ne garantit pas la même structure ou la même fidélité pour chaque image.

**La désactivation de la postérisation préserve-t-elle les couleurs d'origine ?**

Ce n’est pas le cas lors de notre test contrôlé. Les deux paramètres ont modifié les valeurs de couleur unie d'origine. Comparez les remplissages exportés avec la palette prévue et corrigez-les lorsque la couleur exacte compte.

**Pourquoi le canevas SVG est-il différent de la taille de mon PNG ?**

Le SVG copié dans notre test utilisait une viewBox 1024 × 1024 à partir d'une entrée 512 × 512. Inspectez séparément le canevas exporté, les limites de l’illustration et la taille d’affichage prévue plutôt que de supposer que les dimensions des pixels source seront conservées.

**Comment savoir si une ouverture est transparente ?**

Placez un arrière-plan contrasté derrière le SVG enregistré. Cela devrait apparaître à travers l’ouverture. Si ce n'est pas le cas, vérifiez si la trace a perdu le contour intérieur ou si elle y a créé une forme peinte.

## Sources

1. [Application SVGcode](https://svgco.de/) : interface de traçage d'images et commandes actuelles.
2. Procédure pas à pas de l'auteur du [SVGcode sur web.dev](https://web.dev/case-studies/svgcode?hl=en) : traçage couleur par couleur, suppression des taches et postérisation.
3. [Dépôt officiel de SVGcode](https://github.com/tomayac/SVGcode) — implémentation du projet et documentation source.
4. [Chemins SVG W3C](https://www.w3.org/TR/SVG2/paths.html) — chemins composés, sous-chemins et ouvertures.

## Explore

- [Read the HTML article](https://perfectvector.com/fr/blog/svgcode-image-tracing)
- [Potrace de PNG en SVG : gérer l’alpha et garder les trous](https://perfectvector.com/fr/blog/potrace-png-to-svg.md)
- [Meilleurs vectoriseurs d’images IA 2026 : nos choix par usage](https://perfectvector.com/fr/blog/best-ai-vectorizers-2026.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)