Comment un SVG présent sur une page devient un vecteur Figma natif

Un SVG présent sur une page web devient un vecteur Figma natif quand Figma lit ses formes comme de la géométrie et non comme une image. Le centre d'aide de Figma indique qu'un SVG importé "n'est plus traité comme une image" et qu'il est converti en calque vectoriel modifiable. Deux éléments SVG sont documentés comme non repris : les marqueurs et les motifs. La suite explique pourquoi, et comment vérifier le résultat.

Ce que contient un tracé SVG

La plupart des icônes et des logos d'une page sont une poignée d'éléments <path>. Lisez un tracé et vous savez ce que Figma doit reconstruire.

L'attribut d

MDN décrit l'élément <path> comme la plus puissante des formes de base de SVG. Il peut dessiner des lignes, des courbes, des arcs et plus encore. Sa forme est définie par un seul paramètre, d, qui contient une série de commandes et les paramètres qu'elles utilisent. Les coordonnées de d n'ont pas d'unité et vivent dans le système de coordonnées utilisateur, si bien que le même tracé s'adapte à n'importe quelle taille d'affichage.

Les commandes

Chaque commande est une seule lettre. M déplace le curseur, L trace une ligne droite et Z ferme le tracé. Les courbes sont de trois sortes : C est une courbe de Bézier cubique à deux points de contrôle, Q est une courbe de Bézier quadratique à un point de contrôle, et A est un arc défini par les rayons x et y, une rotation, un indicateur de grand arc, un indicateur de balayage et un point final. Une lettre majuscule signifie des coordonnées absolues. Une lettre minuscule signifie des coordonnées relatives au dernier point.

• M / m : déplacement vers, prend un point final.
• L / l : ligne vers, prend un point final.
• C / c : Bézier cubique, prend deux points de contrôle et un point final.
• Q / q : Bézier quadratique, prend un point de contrôle et un point final.
• A / a : arc, prend des rayons, une rotation, deux indicateurs et un point final.
• Z / z : fermer le tracé, ne prend aucun paramètre.

Source de la liste : MDN, tracés SVG.

Formes de base et tracés

<polyline>, <polygon>, <circle> et <ellipse> sont des raccourcis pour les cas courants. MDN précise qu'un tracé peut faire tout ce que font ces formes, et que les arcs peinent à dessiner des cercles et des ellipses complets, ce qui explique qu'un vrai nœud <circle> soit souvent plus simple. Les designers s'en soucient rarement. Un convertisseur, si : un seul tracé peut décrire toute une illustration, donc ce sont les données du tracé qui doivent survivre.

Un exemple détaillé

Voici une petite forme fermée, un onglet arrondi, écrite comme un seul tracé :

<path d="M 10 10 H 90 V 60 C 90 80, 70 90, 50 90 C 30 90, 10 80, 10 60 Z" />

Lisez de gauche à droite. M 10 10 place le curseur. H 90 trace une ligne horizontale jusqu'à x = 90, et V 60 trace une ligne verticale vers le bas jusqu'à y = 60. Les deux commandes C tracent chacune une courbe de Bézier cubique à deux points de contrôle, qui se termine d'abord au centre du bas puis sur le bord gauche. Z referme le tracé jusqu'au départ. Cela fait six commandes et aucune unité, parce que les coordonnées sont dans le système de coordonnées utilisateur. Dans Figma, ces mêmes données sont ce que contient un calque vectoriel : des points d'ancrage reliés par des segments droits et des courbes, ce qui permet ensuite de déplacer un point.

Ce que Figma fait d'un SVG

Figma documente deux voies d'entrée, et elles se comportent de la même façon pour l'essentiel.

1. Importer un fichier. Le centre d'aide de Figma indique que lorsqu'un fichier SVG est importé, il n'est plus traité comme une image. Il est converti en calque vectoriel modifiable.
2. Coller depuis le presse-papiers. Selon le guide de Figma sur la copie d'éléments entre outils de design, vous copiez l'élément en SVG, faites un clic droit sur le canevas du fichier Figma Design et choisissez Paste here. Toute personne disposant d'un accès en modification peut coller.

Figma recommande SVG pour déplacer des éléments entre outils parce que c'est un format sans perte. La même page signale la seule lacune documentée : les éléments SVG marker et pattern ne seront pas inclus dans l'import.

C'est la liste complète dans les pages de Figma en 2026. Elles ne répertorient pas d'autres éléments non pris en charge, donc traitez tout ce qui sort de l'ordinaire, comme les filtres ou les masques, comme quelque chose à inspecter plutôt qu'à supposer. La question voisine des remplissages est traitée dans les dégradés CSS dans Figma.

Les voies d'import et de collage diffèrent aussi par l'origine du SVG. Un import de fichier part d'un .svg enregistré. Un collage part de ce que l'outil source place dans le presse-papiers, donc le résultat dépend de la capacité de cet outil à écrire du code SVG et non une image bitmap. La page d'aide de Figma sur la copie de vecteurs depuis Adobe Illustrator décrit cet échec pour une application de design : quand le code SVG est absent du presse-papiers, les vecteurs sont collés comme des images statiques. Si une forme collée arrive comme une image plate, le premier suspect est le contenu du presse-papiers, pas le SVG lui-même.

Sur une page entière, le SVG n'est qu'une partie de la conversion. La page produit d'UnHTML indique que le SVG devient des vecteurs Figma natifs, et que les images WebP et AVIF sont transcodées en PNG. Elle ne précise pas quelles fonctions SVG sont prises en charge ni ce qui arrive aux autres, donc la documentation de Figma citée plus haut est le meilleur guide pour les limites.

Pourquoi les vecteurs valent mieux qu'un repli matriciel

Un calque vectoriel conserve ses points d'ancrage. Vous pouvez sélectionner un nœud, modifier une courbe, recolorer un remplissage ou redimensionner l'icône sans adoucir les bords. Un repli matriciel vous donne une image bitmap que vous ne pouvez agrandir que dans les limites de ses pixels.

La différence se voit quand vous réutilisez une icône. Avec une géométrie vectorielle, vous la modifiez une fois. Avec une image bitmap, vous la redessinez. Le même écart sépare un import natif d'une capture d'écran suivie d'une vectorisation, où l'outil de vectorisation devine la géométrie que le SVG énonce déjà exactement.

Le sens inverse : ce que Figma réécrit en SVG

Les allers-retours révèlent comment Figma stocke les formes. Selon la documentation d'export de Figma, l'export SVG se comporte ainsi :

• Les contours sont convertis en remplissages.
• SVG ne prend en charge que les contours centrés, donc Simplify stroke est activé par défaut pour les réseaux vectoriels avec contours intérieurs ou extérieurs. Si vous le désactivez, Figma augmente l'épaisseur du contour et applique un masque, ce qui ajoute des lignes supplémentaires au code SVG.
• Le texte est exporté en glyphes par défaut. Désactivez Outline text pour le garder modifiable.
• SVG ne s'exporte qu'en 1x.

Un SVG que vous exportez puis réimportez peut donc avoir une structure différente de l'original, même s'il paraît identique. Une ligne avec contour dans la source peut revenir comme une forme remplie.

Vérifier le résultat après l'import

Faites ces vérifications chaque fois qu'un SVG arrive dans Figma :

1. Sélectionnez le calque et confirmez que c'est un vecteur, pas un remplissage d'image.
2. Cherchez les extrémités de ligne manquantes (marqueurs) et les remplissages répétés (motifs), les deux omissions documentées.
3. Comparez l'épaisseur des contours avec la page, car les contours peuvent arriver comme des formes remplies.
4. Vérifiez le nombre de calques, car un tracé complexe peut devenir un seul calque alors qu'une illustration groupée en devient beaucoup.

Les bordures et contours des éléments voisins suivent d'autres règles, traitées dans ce qui survit à un import. Si vous importez une page entière avec UnHTML, le rapport d'import indique quelles images ont été ignorées, ce qui permet de séparer plus facilement les problèmes de SVG de ceux des images matricielles.

À retenir

Un SVG est de la géométrie écrite sous forme de texte, et Figma lit cette géométrie pour en faire des calques vectoriels modifiables. Les lacunes documentées sont les marqueurs et les motifs. Tout le reste mérite un rapide contrôle visuel, car la documentation ne promet pas un clone de la source.