CommunityBildgithub.com

alvici/png-to-svg

PNG zu SVG – wandle PNG-Bilder (Logos, Icons, flache Illustrationen, Line Art, Farbverlaufsformen) in saubere Vektor-SVGs um, einzelne Datei oder ganzer Ordner, mit Farbvarianten (Original / Weiß / Schwarz) sowie Favicon- und App-Icons. Nutze es bei Anfragen zum Konvertieren, Nachzeichnen oder Vektorisieren von PNG zu SVG.

Was ist png-to-svg?

Diese Fähigkeit wandelt PNG-Bilder in echte Vektor-SVGs (mit Pfaden) um, nicht in eingebettete PNGs in SVG-Hüllen. Sie unterstützt die Verarbeitung einzelner Dateien oder ganzer Ordner und bietet Varianten in Originalfarbe, Weiß oder Schwarz sowie die Erzeugung von Favicons und App-Icons. Nach der Konvertierung wird ein JSON-Bericht mit Ähnlichkeitswerten und einer Prüfung ausgegeben; bei zu geringer Ähnlichkeit können Parameter wie `--colors` oder `--speckle` bis zu dreimal angepasst werden. Die Fähigkeit läuft plattformübergreifend (Windows, macOS, Linux) und enthält Hilfsreferenzen für Windows-spezifische Probleme, Variantendetails und Tuning-Optionen. Sie eignet sich besonders für Entwickler und Designer, die Logos, Icons oder Illustrationen als skalierbare SVGs benötigen, und integriert sich über eine JSON-Datei ins AION-Dashboard.

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

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

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

PNG to SVG

Wandle PNG in echte Vektor-SVGs (mit Pfaden) um – kein eingebettetes PNG in einer SVG-Hülle. Alle Skripte befinden sich im Ordner scripts/ neben dieser Datei; führe sie mit vollständigem Pfad aus.

Windows: Verwende python oder py -3, nicht python3 (dieses öffnet oft nur den Microsoft Store). Vorbereitung, Renderer und bekannte Probleme unter Windows: references/windows.md.

Arbeitsschritte

  1. Prüfe das Ausgangsmaterial. Stelle sicher, dass die PNG-Datei geöffnet werden kann. Konvertiere keine Logos oder Zeichen fremder Marken, es sei denn, der Benutzer ist eindeutig berechtigt, sie zu verwenden.

  2. Frage vor der Konvertierung nach der Variante. Starte den SVG-Erstellungsprozess erst, nachdem der Benutzer eine Variante gewählt hat. Führe aus: python scripts/png2svg.py input.png --list-options

    • source_type: color → Frage, ob sie Originalfarbe, Weiß, Schwarz oder eine Kombination dieser Optionen möchten.
    • source_type: mono → Frage, ob sie Schwarz, Weiß oder beides möchten.

    Wenn der Benutzer eine Konvertierung ohne Angabe einer Variante anfordert, halte nach dem Prüfen der Optionen an und stelle die Frage; wähle nicht default nur weil noch keine Wahl getroffen wurde. Fahre fort, nachdem der Benutzer geantwortet hat. Wenn der Benutzer explizit eine direkte Konvertierung ohne Nachfrage wünscht, verwende default. Details zu jeder Variante: references/variants.md.

  3. Konvertiere nach bestätigter Benutzerauswahl. Verwende nur die vom Benutzer gewählten Varianten mit --variants, z.B.: python scripts/png2svg.py input.png out_dir --variants original,white --compare Füge --icons hinzu, wenn der Benutzer Favicons oder App-Icons wünscht. Für einen ganzen Ordner ersetze input.png durch den Ordnernamen.

  4. Lies den JSON-Bericht. Für jede Variante gibt es similarity_pct und audit.

    • similarity_pct ≥ 97 und audit.verdict = ok → Fertig.
    • Andernfalls passe --colors oder --speckle gemäß references/tuning.md an, maximal 3 Versuche.
    • similarity_pct: null bedeutet, dass kein Renderer verfügbar ist: Das Ergebnis wird trotzdem erstellt, weise darauf hin, dass die visuelle Prüfung übersprungen wird.
    • Wenn das Bild sichtbar ist, öffne *_compare.png (links = Ziel, rechts = Ergebnis).
  5. Übergib das Ergebnis. Gib die SVG-Dateien pro Variante (und den Ordner icons/ falls angefordert) mit einer kurzen Zusammenfassung aus: Methode, Ähnlichkeit, Größe und Hinweise aus notes oder audit.issues.

Regeln

  • Verändere niemals die Originaldatei; schreibe immer in einen Ausgabeordner.
  • Die Varianten Weiß/Schwarz sind einfarbige Silhouetten. Detailunterschiede in den Formen verschmelzen dabei; weise den Benutzer darauf hin, falls das Logo solche Details enthält.
  • Zusätzliche Skripte: scripts/svg_audit.py (prüft jedes SVG), scripts/render.py --which (zeigt verfügbare Renderer), scripts/variants.py (erzeugt Varianten aus bereits vorhandenen SVGs).
  • Integration der Checkboxen im AION-Dashboard: references/aion-integration.md.

Verwandte Skills