Convertir des icônes PNG en SVG pour un kit d’interface cohérent

Ne convertis pas tout le dossier en une seule passe. Commence par un petit groupe comprenant ton icône la plus simple, la plus chargée, une forme courbe et une icône avec une ouverture. Définis les règles SVG avec cet échantillon, puis applique-les au reste. Tu repères ainsi les mauvais choix de vectorisation avant qu’ils se propagent à des dizaines de fichiers.

La conversion est seulement une étape. Un kit d’interface utilisable nécessite aussi un système de coordonnées commun, une taille optique cohérente, des couleurs prévisibles, des tracés modifiables et un test dans le produit cible.

Le parcours rapide

1. Inventorie les PNG et repère doublons et sources manquantes.
2. Choisis des icônes représentatives et définis grille, marges, modèle de remplissage ou de trait et couleurs.
3. Convertis l’échantillon en vrais tracés.
4. Examine silhouette, nœuds, espaces négatifs et régions colorées.
5. Harmonise dans un éditeur, puis convertis et examine les icônes restantes.
6. Teste les SVG dans l’interface et le pipeline de ressources réels.

Choisir les PNG à convertir

Les icônes en aplats aux limites nettes conviennent bien à la vectorisation. D’autres images nécessitent une autre méthode. Trie le dossier avant d’ouvrir un convertisseur.

Si la source restante est un conteneur d’icônes plutôt qu’un PNG, récupère-la d’abord avec le flux ICO vers SVG ou ICNS vers SVG. Harmonise ensuite le dessin selon les mêmes règles ci-dessous.

Un nom SVG ne prouve pas que les pixels sont devenus des tracés. Le format peut intégrer une image via <image>, comme l’explique la spécification SVG du contenu intégré. Si le fichier se sélectionne comme une image rectangulaire ou se pixellise à fort zoom, effectue les contrôles des images intégrées avant de l’ajouter au kit.

Définir les règles avant la vectorisation

Des icônes individuellement propres peuvent rester incohérentes ensemble. Écris les règles, même si les PNG ne les respectent pas encore.

Choisir un espace de coordonnées unique

Utilise le même viewBox pour les icônes partageant une taille de composant. Il ne doit pas forcément faire 24 par 24 ou 16 par 16 : il doit correspondre à ton système. SVG associe le rectangle viewBox à la zone affichée ; des dimensions extérieures identiques aident seulement si le dessin y est placé uniformément. La spécification SVG 2 des coordonnées définit cette correspondance.

Note :

• le viewBox commun ;
• le centre visuel et la ligne de base prévus ;
• la marge intérieure minimale ;
• les parties autorisées à dépasser volontairement les limites optiques habituelles.

Choisir un modèle de remplissage ou de trait

Décide si la famille utilise des silhouettes remplies, des traits éditables ou un mélange documenté. Une famille de contours nécessite des extrémités, jonctions et poids apparent cohérents. Une famille remplie nécessite des espaces négatifs et des bords cohérents. La vectorisation peut convertir un trait fin en contour fermé : examine la géométrie, pas seulement l’aperçu.

Définir le contrôle des couleurs

Pour un système monochrome, utilise une règle répétable que la destination associe à son jeton d’icône. Pour les icônes multicolores, définis la palette et les régions modifiables. Ne garde pas les quasi-doublons issus de l’anticrénelage sans rôle visible.

Convertir d’abord un échantillon représentatif

Choisis quatre à six icônes couvrant les difficultés : cercle ou arc, diagonale, petite contreforme ou trou et icône la plus dense. Ajoute une icône multicolore si le système en utilise.

1. Préparer les PNG

Utilise le meilleur export disponible. Supprime les fonds accidentels, recadre uniformément et évite d’agrandir une petite source floue pour créer plus de pixels. Le guide PNG vers SVG sans perte de qualité détaille la préparation.

Garde une copie intacte de chaque original. Le nettoyage se juge mieux par comparaison qu’avec la mémoire.

2. Vectoriser les icônes d’échantillon

Utilise un vectoriseur automatique ou l’outil de ton logiciel de dessin. Image Trace d’Illustrator propose couleurs, tracés, angles et bruit. Vectorize de Figma propose des modes couleur après vectorisation et précise que les images complexes ou basse résolution peuvent mal se convertir (Adobe Image Trace ; Figma Vectorize).

Dans le navigateur, téléverse l’échantillon dans le convertisseur PNG vers SVG de PerfectVector. Compare l’aperçu à l’original, examine formes et couleurs, puis télécharge le SVG à harmoniser dans l’éditeur. Teste ce groupe avant de traiter tout le dossier.

Si Figma sert d’éditeur principal du kit, le flux Figma Vectorize contre SVG externe permet de comparer les méthodes sur le même échantillon. Juge les formes après importation, notamment trous et régions colorées à modifier.

3. Examiner les tracés

Ouvre chaque résultat dans un éditeur et sélectionne les formes. Les tracés SVG utilisent commandes et coordonnées, notamment lignes et courbes définies dans la spécification SVG 2 des tracés. Cherche assez de nœuds pour préserver la silhouette, sans nombre cible universel.

Repère :

• les chaînes denses sur une courbe simple ;
• les points parasites ou rectangles de fond ;
• les copies superposées d’un même bord ;
• les petits fragments colorés d’anticrénelage ;
• les trous ou contreformes fermés ;
• un rectangle matriciel à la place de tracés sélectionnables.

Si une forme simple croule sous les points, consulte le diagnostic des nœuds excessifs avant de simplifier. Un nettoyage trop fort déplace les angles et ferme de petits espaces : compare au PNG.

Harmoniser les icônes en une famille

Une fois l’échantillon structurellement correct, place-le sur la grille commune et examine l’ensemble. C’est là que l’ensemble devient un système.

Examen de l’ensemble

Vérifie à la taille réelle de l’interface et à un zoom d’édition supérieur :

Les corrections optiques sont permises. Un cercle peut dépasser légèrement la boîte d’un carré pour sembler de même taille. Recherche une perception cohérente appuyée par une grille documentée plutôt que des limites géométriques identiques. Le flux de cartes de planning visuel imprimables applique cette distinction aux images, étiquettes séparées et pages PDF mesurées.

Pour des images de routines nécessitant des modifications avant la mise en page, teste le convertisseur de supports visuels sur un dessin représentatif. Garde les étiquettes séparées et vérifie que l’image convertie transmet le sens voulu.

Le rôle de PerfectVector

PerfectVector intervient entre préparation de la source et harmonisation. Reconstruis un échantillon PNG en formes modifiables, puis juge les critères propres au kit :

1. Chaque icône préserve-t-elle silhouette et espaces négatifs ?
2. Peux-tu sélectionner et recolorer les régions prévues ?
3. Les courbes utilisent-elles un nombre gérable de nœuds ?
4. Le résultat est-il plus facile à harmoniser qu’une vectorisation manuelle ou native ?

Si l’échantillon réussit, convertis les PNG restants adaptés et rassemble-les dans le même fichier principal pour examiner l’ensemble. Sinon, change la source ou la méthode avant de poursuivre. PerfectVector ne remplace pas les décisions d’alignement optique et de nommage du système de design.

Nettoyer en conservant la source

Conserve ces catégories de fichiers :

• Archive source : PNG intacts, fichiers de création et notes de provenance.
• Fichier maître modifiable : icônes vectorielles harmonisées sur la grille.
• Exports de livraison : SVG optimisés utilisés par le produit.

Modifie les formes dans le fichier maître, puis régénère les livraisons. Évite de modifier séparément les exports : les corrections divergeront. Pour recolorer, remodeler ou corriger le canevas, suis le flux d’édition SVG et réintègre la géométrie corrigée à l’ensemble principal.

Pour les icônes web réutilisables, suis le flux sprite de symboles SVG après approbation du dessin. Il vérifie identifiants, références imbriquées, limites, peinture et noms d’instances avant intégration. Si l’interface dessine sur canvas, utilise Path2D pour les tracés SVG et vérifie transformation, couleurs, ouvertures et résolution interne face au fichier maître SVG.

Pour une bibliothèque Penpot, insère un SVG d’échantillon sur le canevas et teste une région colorée et un contour avant d’ajouter tout le kit. Le guide d’importation SVG Penpot distingue importation de projet et insertion de dessin et explique formes natives, SVG brut et étiquettes modifiables. Il détecte les icônes correctes visuellement mais inadaptées aux modifications prévues.

Avant livraison, teste quelques icônes dans chaque environnement utile : bibliothèque de design, composant de l’application et compilation ou optimisation. Vérifie les états désactivés et les couleurs inversées si utilisés. Un fichier propre peut échouer si ses couleurs ou dimensions ne correspondent pas au composant. Pour Android, la liste d’importation PNG vers VectorDrawable vérifie dimensions de la zone d’affichage, remplissages, complexité et prise en charge. Pour Godot, la liste d’importation SVG aide à choisir le type de texture et à contrôler taille matricielle, suréchantillonnage et dessin compatible. Pour Unity, la liste d’importation SVG aide à choisir l’importateur compatible et à vérifier UI Toolkit ou la destination sprite.

Pour SwiftUI, vérifie le flux catalogue de ressources et rendu SVG : ressource image nommée, couleurs originales ou template et taille finale.

Liste de livraison du kit

• Chaque icône provient de la meilleure source disponible.
• Toutes suivent les règles documentées de viewBox, marges et alignement.
• Taille optique et poids apparent sont cohérents à taille réelle.
• Icônes remplies et à traits suivent le modèle du système.
• Les régions colorées correspondent à la palette ou aux jetons.
• Les courbes ont assez de nœuds sans encombrement évident.
• Aucun SVG ne contient d’image intégrée, de fond ou de bord doublonné accidentel.
• Noms de fichiers et composants sont uniques et stables.
• L’ensemble exporté a été testé après l’optimisation normale du produit.
• Archive, fichier maître modifiable et livraisons restent séparés.

FAQ

Peut-on convertir tous les PNG en lot avant nettoyage ? Oui, mais un échantillon représentatif est plus prudent. Convertis quelques formes difficiles, définis grille et tracés, puis traite le reste. Un mauvais choix peut sinon multiplier le nettoyage dans tout le dossier.

Chaque icône doit-elle avoir le même viewBox ? Les icônes d’un même composant en bénéficient généralement, mais le dessin peut nécessiter des ajustements optiques. Garde les coordonnées cohérentes et documente dépassements ou marges pour cercles, formes pointues et icônes denses.

Combien de nœuds doit avoir une icône ? Il n’existe pas de nombre universel. Utilise le minimum préservant silhouette, angles et espaces négatifs. Compare des complexités similaires et examine les courbes simples aux chaînes denses.

Faut-il garder les PNG après la création du kit SVG ? Oui. Archive les PNG et les sources antérieures pour leur provenance et comme référence si tu recommences. Modifie le fichier maître vectoriel harmonisé et génère les SVG de livraison depuis celui-ci.

Sources

1. W3C — SVG Coordinate Systems, Transformations and Units — Définit zones d’affichage, coordonnées, viewBox et correspondance du dessin à la région affichée.
2. W3C — SVG Paths — Définit les commandes de lignes et courbes des tracés modifiables.
3. W3C — SVG Embedded Content — Confirme la présence possible d’images matricielles dans SVG.
4. Adobe Illustrator — Vectorize images using Image Trace — Documente le flux actuel de vectorisation et les tracés modifiables.
5. Figma Learn — Convert static images to vector layers — Documente Vectorize, modes couleur et limites des sources.

---

Commence par les quelques icônes les plus difficiles. Convertis les PNG d’échantillon en SVG, examine tracés et couleurs, puis harmonise le meilleur résultat avec les règles du kit avant de généraliser le parcours.