CommunityImagegithub.com

alvici/png-to-svg

PNG vers SVG — convertit les images PNG (logo, icône, illustration vectorielle, line art, formes dégradées) en SVG vectoriel propre, un fichier ou un dossier, avec choix de variantes de couleur (original / blanc / noir) et génération de favicon et icônes d'application. À utiliser lors d'une demande de conversion, de traçage ou de vectorisation PNG vers SVG.

Qu'est-ce que png-to-svg ?

Ce skill permet de convertir des images PNG (logos, icônes, illustrations vectorielles, line art, formes dégradées) en SVG vectoriel véritable (chemins), et non en PNG encapsulé dans du SVG. Il est utile pour les développeurs et designers qui ont besoin de vectoriser rapidement des images tout en conservant une qualité propre et scalable. Le skill supporte les variantes de couleur (original, blanc, noir) et peut générer des favicons et icônes d'application. Il fonctionne sous Windows et Linux via des scripts Python. Le processus commence par une analyse du fichier source, demande à l'utilisateur de choisir une variante si elle n'est pas précisée, puis exécute la conversion. Après conversion, un rapport JSON est analysé : si la similarité est ≥97% et l'audit est OK, le résultat est validé ; sinon, des paramètres de réglage (couleurs, speckles) peuvent être ajustés jusqu'à trois fois. Des scripts auxiliaires permettent d'auditer les SVG, vérifier les rendus disponibles et générer des variantes à partir de SVG existants.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/alvici/png-to-svg/tree/HEAD

Installed? Explore more Image skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

PNG vers SVG

Convertissez les PNG en véritables SVG vectoriels (chemins), et non en PNG encapsulés dans du SVG. Tous les scripts se trouvent dans le dossier scripts/ à côté de ce fichier ; exécutez-les avec le chemin complet.

Windows : utilisez python ou py -3, pas python3 (qui ouvre souvent le Microsoft Store). Préparation, rendu et problèmes courants sous Windows : references/windows.md.

Étapes de travail

  1. Vérifiez le fichier source. Assurez-vous que le fichier PNG peut être ouvert. Ne convertissez pas les logos ou caractères d'autres marques, sauf si l'utilisateur en a clairement le droit.

  2. Demandez la variante avant conversion. N'exécutez pas le processus de création du SVG tant que l'utilisateur n'a pas choisi la variante. Exécutez : python scripts/png2svg.py input.png --list-options

    • source_type: color → demandez s'ils souhaitent Couleur d'origine, Blanc, Noir, ou une combinaison de ces options.
    • source_type: mono → demandez s'ils souhaitent Noir, Blanc, ou les deux.

    Si l'utilisateur demande une conversion sans préciser la variante, arrêtez-vous après avoir vérifié les options et posez la question ; ne choisissez pas default simplement parce qu'aucune option n'a été donnée. Continuez après la réponse de l'utilisateur. Si l'utilisateur demande explicitement de passer directement sans question, utilisez default. Détails de chaque variante : references/variants.md.

  3. Convertissez après avoir reçu le choix de l'utilisateur. Utilisez uniquement les variantes sélectionnées par l'utilisateur dans --variants, par exemple : python scripts/png2svg.py input.png out_dir --variants original,white --compare Ajoutez --icons si l'utilisateur demande des favicons ou des icônes d'application. Pour un dossier, remplacez input.png par le nom du dossier.

  4. Lisez le rapport JSON. Pour chaque variante, il y a similarity_pct et audit.

    • similarity_pct ≥ 97 et audit.verdict = ok → terminé.
    • Sinon, ajustez --colors ou --speckle selon references/tuning.md, avec un maximum de 3 tentatives.
    • similarity_pct: null signifie qu'aucun rendu n'est disponible : le résultat est quand même produit, mentionnez que la vérification visuelle est ignorée.
    • Si vous pouvez voir l'image, ouvrez *_compare.png (gauche = cible, droite = résultat).
  5. Remettez le résultat. Fournissez les fichiers SVG par variante (et le dossier icons/ si demandé) avec un résumé court : méthode, similarité, taille, et notes issues de notes ou audit.issues.

Règles

  • Ne modifiez jamais le fichier original ; écrivez toujours dans le dossier de sortie.
  • Les variantes blanc/noir sont des silhouettes monochromes. Les détails de couleur à l'intérieur des formes se fondent ; mentionnez-le à l'utilisateur si le logo a de tels détails.
  • Scripts supplémentaires : scripts/svg_audit.py (audit de n'importe quel SVG), scripts/render.py --which (vérifier les rendus disponibles), scripts/variants.py (variantes à partir d'un SVG existant).
  • Intégration des cases à cocher dans le tableau de bord AION : references/aion-integration.md.

Skills associés