Import SVG Penpot : des formes modifiables pour ton design

Pour importer un SVG dans Penpot, ouvre un fichier de design et fais glisser le .svg sur sa zone de dessin, ou choisis l’outil image de la barre d’outils pour sélectionner le fichier. La commande Import files du tableau de bord sert aux fichiers de projet Penpot. Si tu veux placer une icône, commence dans le design. Les conseils d’insertion de calques et la documentation d’importation de projets décrivent ces méthodes distinctes.

Une fois l’illustration visible, vérifie si tu peux changer une région de couleur et modifier un contour. Une icône peut paraître correcte tout en restant difficile à modifier. Si la source est déjà vectorielle, répare-la ou réexporte-la si nécessaire. Vectorise un PNG ou JPG uniquement si tu dois reconstruire des formes à partir de pixels.

Vérifie l’importation avant de la réutiliser

Conserve le SVG original, importe une icône représentative et travaille sur un duplicata. Teste l’apparence, un remplissage, une courbe et tout texte modifiable. Exporte un SVG distinct et compare-le à l’original avant de répéter le processus dans un kit.

Commence dans la zone de dessin, puis examine les calques

Ouvre le fichier Penpot destiné à l’illustration. Insère le SVG enregistré dans une zone vide pour l’examiner à l’écart du reste du design. Si le glisser-déposer échoue, utilise le sélecteur de fichiers de l’outil image pour exclure ce comportement du diagnostic.

Sélectionne l’illustration importée et développe son entrée dans le panneau Layers. Un groupe est une organisation utile, pas une preuve que le SVG est devenu une image matricielle. Tu peux sélectionner un enfant dans le panneau ou double-cliquer dans un groupe ; Penpot permet aussi la sélection profonde avec Ctrl-clic ou Command-clic. Ces contrôles figurent dans le guide de sélection des calques.

Différents contenus SVG peuvent devenir différents objets. Dans l’importateur publié de Penpot, les formes courantes comme tracés, rectangles et ellipses ont des gestionnaires de formes natives ; d’autres éléments peuvent être conservés comme SVG brut. L’importateur traite aussi les éléments image séparément. Le nom du fichier seul ne peut donc pas déterminer comment chaque partie se modifie. Consulte l’importateur de formes SVG.

Évite de tout dégrouper ou aplatir au départ. Identifie d’abord la partie à changer. Préserve le groupe si ses enfants offrent déjà le contrôle nécessaire.

Teste un remplissage et une courbe

Utilise une petite icône aux parties visiblement séparées. Une plante en pot est un exemple utile : le pot doit accepter une couleur différente sans changer les feuilles, et une feuille doit être modifiable sans déformer toute la plante.

Sur un duplicata de l’icône importée :

1. Sélectionne le calque du pot et passe son remplissage à une couleur contrastée. Vérifie que seule la région prévue change.
2. Sélectionne un tracé de feuille. Appuie sur Entrée pour modifier ses nœuds, déplace légèrement un point, puis annule. Penpot décrit cela dans ses instructions de modification des nœuds.
3. Compare le duplicata à l’import intact. Confirme que silhouette, petits espaces et épaisseur de contour d’origine restent intacts après annulation.

Si le pot et les feuilles changent ensemble, examine la sélection et la structure source. Tu peux avoir sélectionné le groupe extérieur, ou la source combine plusieurs régions dans un seul tracé. Un changement de couleur réussi ne prouve pas que chaque contour est un tracé natif séparé.

Le contenu SVG brut est une autre possibilité. Penpot dispose d’un panneau d’options séparé pour ce contenu, avec des contrôles d’apparence pour les éléments pris en charge. La présence de contrôles de remplissage ou contour ne garantit donc pas une modification ordinaire des nœuds. Si la partie ne se modifie pas comme nécessaire, simplifie-la ou redessine-la dans l’éditeur source et importe une nouvelle copie. La distinction apparaît dans l’implémentation des options SVG brut de Penpot.

Diagnostique le symptôme avant de changer le fichier

Utilise le SVG inchangé comme référence. Ouvre-le dans un navigateur et compare ce rendu à l’import Penpot. S’il semble déjà incorrect dans le navigateur, retourne à l’export source avant de tenter de réparer la copie Penpot.

Contours manquants et illustration invisible

Vérifie les réglages de remplissage et de contour du calque sélectionné avant de le supprimer. Penpot expose couleur, opacité, largeur, style et visibilité du contour, ainsi que les extrémités pour les tracés ouverts. Un petit trait peut paraître très différent avec une autre extrémité : compare donc la forme plutôt que de supposer la ligne absente. Les contrôles disponibles sont décrits dans Color and Strokes.

Pour un objet invisible, examine aussi les calques cachés et le découpage. Si le navigateur affiche correctement la source mais pas Penpot, isole l’élément en échec dans une copie source. Réexporte l’échantillon simplifié et compare à nouveau. Tu obtiens un fichier et un symptôme précis à examiner au lieu de changer plusieurs réglages ensemble.

Ne retire pas chaque style, masque ou définition uniquement parce qu’une ancienne solution le suggère. Ces éléments peuvent porter des informations d’apparence. Si la construction du contour source est en cause, suis le diagnostic approfondi des contours SVG manquants et garde un original modifiable avant de convertir les contours en formes.

Texte correct à l’écran mais non modifiable

Pour un libellé de bouton, essaie de changer un mot. Pour un logo, décide si conserver les formes des lettres suffit. Ce sont des besoins différents.

Le lettrage importé peut déjà être converti en tracés, ou rester du contenu SVG au lieu d’un calque texte natif. Ne suppose pas que chaque élément texte SVG devient du texte Penpot modifiable. Si les mots changent régulièrement, recrée-les avec l’outil texte de Penpot, choisis la police prévue et compare espacement et retours à la ligne. Le guide du texte Penpot explique la création de calques texte et la modification de leur contenu.

Si les lettres changent de forme ou de disposition, utilise le guide de dépannage des polices SVG. Conserve une copie au texte modifiable même si une version de livraison nécessite du lettrage en tracés.

Quand PerfectVector intervient

PerfectVector est utile si tu possèdes une icône ou illustration matricielle et as besoin de contours modifiables dans Penpot. Convertis le PNG ou JPG en tracés SVG, examine la silhouette et les régions colorées, puis importe le résultat et teste un remplissage et une courbe. Le résultat de la vectorisation doit encore être comparé à l’illustration souhaitée.

Une image matricielle placée dans un SVG n’acquiert pas des contours de feuille ou de pot modifiables uniquement parce que son conteneur change. L’importateur Penpot a un gestionnaire d’image distinct ; il ne transforme pas cette image en objets de tracés natifs traités ailleurs dans le code d’importation.

Utilise l’export vectoriel original si tu le possèdes. Pour un symbole d’interface simple, le dessiner avec les formes natives Penpot peut donner une géométrie plus délibérée que la vectorisation. Garde photos et illustrations riches en textures comme images si leurs pixels font partie du design. L’explication de la vectorisation d’images traite de ce qu’elle reconstruit et change.

Exporte un échantillon avant de construire le kit

Conserve le design de travail dans Penpot et exporte un SVG de livraison séparé. Sélectionne l’icône ou son board, ajoute un préréglage d’export avec le bouton plus dans la section Export du panneau Design et choisis SVG. Penpot décrit cela dans Exporting layers.

Ouvre le fichier exporté dans un navigateur. Compare couleurs, contours, apparence du texte, cadrage et espaces vides à la référence. Si le fichier doit revenir dans un éditeur de design, importe cet export dans une zone séparée et répète le test d’édition. Apparence correcte et structure utile à l’édition nécessitent chacune une vérification.

Avant d’ajouter l’échantillon à un kit plus grand, confirme :

• Les régions nécessitant des couleurs séparées peuvent être sélectionnées indépendamment.
• Les contours à remodeler exposent des contrôles d’édition utilisables.
• Les libellés modifiables restent du texte dans le design de travail.
• L’icône exportée possède les limites et marges prévues.
• L’icône reste lisible à sa taille réelle dans l’interface.

Applique ensuite les mêmes vérifications à l’ensemble. Le processus d’icônes PNG en SVG pour un kit d’interface ajoute grilles communes, tailles optiques et règles de nommage une fois les imports individuels corrects.

FAQ

Pourquoi la boîte Import files de Penpot refuse-t-elle mon SVG ? Cette boîte importe des fichiers de projet Penpot. Pour placer une illustration SVG, ouvre un fichier de design et utilise l’outil image ou glisse le SVG sur la zone de dessin.

Importer un SVG rend-il chaque partie modifiable ? Les formes vectorielles courantes peuvent devenir des objets Penpot natifs, mais d’autres contenus peuvent rester du SVG brut ou des images. Teste la modification précise de remplissage, courbe ou texte nécessaire avant de réutiliser l’illustration.

Dois-je dégrouper un SVG importé ? Uniquement si changer la structure du groupe aide ta tâche. Essaie d’abord de sélectionner un enfant dans Layers. Conserver un groupe utile n’empêche pas la modification de ses enfants sélectionnables.

Dois-je vectoriser un SVG mal importé ? Commence par réparer ou réexporter l’illustration vectorielle existante. La vectorisation est utile si l’illustration disponible est matricielle et nécessite des tracés ; ce n’est pas une réparation générale d’un SVG existant.

Sources

1. Penpot : Layers — Insertion d’illustrations, sélection des enfants et modification des nœuds de tracés.
2. Penpot : export et import de fichiers Penpot — Importation native de projet, distincte de l’insertion d’illustrations dans la zone de dessin.
3. Penpot : importateur de formes SVG — Traitement séparé des formes natives, images et SVG brut dans une version publiée.
4. Penpot : options SVG brut — Les contrôles d’apparence ne prouvent pas à eux seuls la modification de tracés natifs.
5. Penpot : Color and Strokes — Contrôles de remplissage, contour et extrémités utilisés dans le diagnostic.
6. Penpot : texte et typographie — Création de calques texte natifs et modification de leur contenu.
7. Penpot : exportation des calques — Ajout d’un préréglage d’export SVG pour un calque ou board.

---

Si ta source est un PNG ou JPG et que tu as besoin de formes modifiables, prépare un SVG avec PerfectVector. Importe-le dans Penpot, change un remplissage et teste une courbe avant d’intégrer l’illustration à ton kit de design.