Convertisseur de contour SVG en remplissage

Collez n'importe quel SVG contenant des formes avec contour et récupérez un SVG équivalent où chaque contour est remplacé par un chemin rempli de même forme visuelle et de même épaisseur. Utile pour les systèmes d'icônes et les outils de design qui ne rendent fiablement que les remplissages, ou pour réduire un SVG à des chemins uniquement remplis avant une édition vectorielle plus poussée.

En quoi consiste cet outil ?

Certains pipelines de rendu — certains générateurs de polices d'icônes, certains moteurs de jeu, d'anciens exportateurs PDF, et des outils qui ne composent que des remplissages — gèrent mal les contours SVG, voire pas du tout. Convertir un contour en une forme remplie de même épaisseur contourne complètement le problème : le résultat visuel est identique, mais il est exprimé comme un unique chemin rempli plutôt qu'une ligne avec contour.

Cet outil fonctionne en échantillonnant de nombreux points le long du contour de chaque forme (en utilisant l'API de longueur de chemin du navigateur lui-même, le même mécanisme que celui utilisé par l'animation SVG) et en construisant deux lignes de décalage parallèles à la moitié de l'épaisseur du trait de chaque côté, puis en les refermant en un seul polygone rempli.

Pourquoi l'utiliser ?

Fonctionne sur les éléments path, line, polyline, polygon, rect, circle et ellipse — pas seulement <path> — avec une seule méthode d'échantillonnage unifiée.
Conserve le propre remplissage de la forme (s'il y en avait un) comme une couche séparée sous le nouveau remplissage du trait, donc les formes à la fois remplies et avec contour se convertissent correctement.
Aperçu avant/après côte à côte pour confirmer visuellement la conversion avant de copier le résultat.
S'exécute entièrement dans votre navigateur — le SVG que vous collez n'est jamais téléversé où que ce soit.
Gratuit, instantané, sans limite de taille de fichier au-delà de ce que votre navigateur peut afficher.

Mode d'emploi

Collez votre code SVG dans la zone de texte (un exemple fonctionnel est pré-rempli).
Cliquez sur « Convert strokes to fills ».
Comparez l'aperçu avant/après pour confirmer que le résultat est correct.
Cliquez sur « Copy SVG » pour copier le code converti, sans contour.

Exemple

Entrée

<path d="M20 100 Q100 20 180 100" fill="none" stroke="#3B82F6" stroke-width="12"/>

Résultat

Un unique <path fill="#3B82F6"> dont le contour trace les deux côtés de la courbe d'origine, à 12 unités d'écart, sans aucun attribut stroke.

La forme de la courbe est préservée car l'outil échantillonne des points en continu le long du chemin réellement rendu, pas seulement de ses points de contrôle.

Foire aux questions

Pourquoi les angles vifs deviennent-ils arrondis plutôt que pointus (en onglet) ?

C'est une simplification connue et délibérée de la méthode d'échantillonnage : un échantillonnage dense de points le long d'un chemin produit naturellement des jonctions et des extrémités arrondies, quelle que soit la valeur d'origine de stroke-linejoin ou stroke-linecap. Reconstruire des jonctions exactement en onglet ou en biseau nécessite un algorithme différent et plus complexe (intersection de segments de ligne à chaque sommet) que cet outil n'implémente pas. Pour la plupart des icônes et illustrations, la différence visuelle est minime, mais si vous avez besoin de jonctions en onglet exactes, la fonction « contourner le trait » d'un éditeur vectoriel dédié sera plus précise.

Cet outil gère-t-il les traits en pointillés (stroke-dasharray) ?

Non — l'outil traite chaque trait comme plein et ignore stroke-dasharray/stroke-dashoffset. Un trait en pointillés sera converti comme s'il était plein, ce qui change son apparence. Si votre SVG utilise des traits en pointillés, cet outil ne convient pas pour ces formes précises.

Pourquoi rien n'a été converti ?

L'outil ne convertit que les éléments qui ont à la fois une couleur de contour (différente de « none ») et un stroke-width positif, définis soit comme attributs, soit dans le style propre de l'élément. Si votre SVG définit le trait via une classe CSS externe que le navigateur ne peut pas résoudre dans l'aperçu isolé de cet outil, ou via un bloc <style> référençant des classes, le style calculé pourrait ne pas se résoudre correctement — essayez de définir stroke et stroke-width comme attributs directs sur la forme.

Quand dois-je convertir les traits en remplissages, et quand dois-je garder les traits ?

Si vous êtes encore en phase de conception, gardez les traits — stroke-width reste un simple nombre modifiable, ce que vous perdez après conversion. Si vous exportez vers un pipeline qui gère mal les traits (générateurs de polices d'icônes, certains moteurs de jeu ou exportateurs PDF), convertissez en dernière étape d'export et conservez le fichier avec contour d'origine comme source modifiable, car la conversion est à sens unique.

La conversion rend-elle le fichier SVG plus lourd ?

Généralement oui — une courbe avec contour définie par quelques points de contrôle devient un contour rempli composé de centaines de segments de ligne échantillonnés, donc les données de chemin grossissent nettement. Pour les icônes, cela importe rarement en pratique, mais si la taille est un enjeu, passez la sortie convertie dans un optimiseur SVG ensuite pour réduire la précision des coordonnées.

Le stroke-opacity est-il conservé dans le remplissage converti ?

Non — le chemin converti reprend la couleur du trait comme remplissage mais avec une opacité totale ; une valeur de stroke-opacity sur la forme d'origine est perdue. Si vous devez conserver la transparence, ajoutez manuellement fill-opacity avec la même valeur au chemin converti après avoir copié le résultat.