CommunityImagegithub.com

alvici/png-to-svg

PNG to SVG — ubah gambar PNG (logo, ikon, ilustrasi datar, line art, bentuk bergradasi) menjadi SVG vektor bersih, satu file atau satu folder, dengan pilihan varian warna (original / white / black) plus favicon dan ikon aplikasi. Pakai saat diminta convert, trace, atau vektorisasi PNG ke SVG.

What is png-to-svg?

png-to-svg is a Claude Code agent skill that pNG to SVG — ubah gambar PNG (logo, ikon, ilustrasi datar, line art, bentuk bergradasi) menjadi SVG vektor bersih, satu file atau satu folder, dengan pilihan varian warna (original / white / black) plus favicon dan ikon aplikasi. Pakai saat diminta convert, trace, atau vektorisasi PNG ke SVG.

Works with~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 →

Ask in your favorite AI

Open a new chat with this agent skill pre-loaded.

Documentation

PNG to SVG

Ubah PNG menjadi SVG vektor sungguhan (path), bukan PNG yang dibungkus SVG. Semua script ada di folder scripts/ di samping file ini; jalankan dengan path lengkap.

Windows: pakai python atau py -3, bukan python3 (sering hanya membuka Microsoft Store). Persiapan, renderer, dan masalah umum di Windows: references/windows.md.

Langkah kerja

  1. Cek bahan. Pastikan file PNG bisa dibuka. Jangan mengonversi logo atau karakter milik merek lain kecuali pengguna jelas berhak memakainya.

  2. Tanyakan varian sebelum konversi. Jangan jalankan proses pembuatan SVG sampai pengguna memilih varian. Jalankan: python scripts/png2svg.py input.png --list-options

    • source_type: color → tanyakan apakah mereka ingin Original color, White, Black, atau kombinasi pilihan tersebut.
    • source_type: mono → tanyakan apakah mereka ingin Black, White, atau keduanya.

    Jika pengguna meminta konversi tanpa menyebut varian, berhenti setelah memeriksa opsi dan ajukan pertanyaan; jangan memilih default hanya karena belum ada pilihan. Lanjutkan setelah pengguna menjawab. Jika pengguna secara eksplisit meminta langsung tanpa pertanyaan, gunakan default. Detail tiap varian: references/variants.md.

  3. Konversi setelah pilihan pengguna diterima. Gunakan hanya varian yang dipilih pengguna pada --variants, misalnya: python scripts/png2svg.py input.png out_dir --variants original,white --compare Tambahkan --icons kalau pengguna minta favicon atau ikon aplikasi. Untuk satu folder, ganti input.png dengan nama folder.

  4. Baca laporan JSON. Untuk tiap varian ada similarity_pct dan audit.

    • similarity_pct ≥ 97 dan audit.verdict = ok → selesai.
    • Selain itu, atur ulang --colors atau --speckle sesuai references/tuning.md, maksimal 3 kali percobaan.
    • similarity_pct: null berarti tidak ada renderer: hasil tetap dibuat, sebutkan bahwa pengecekan visual dilewati.
    • Kalau bisa melihat gambar, buka *_compare.png (kiri = target, kanan = hasil).
  5. Serahkan. Berikan file SVG per varian (dan folder icons/ bila diminta) dengan ringkasan pendek: metode, kemiripan, ukuran, dan catatan dari notes atau audit.issues.

Aturan

  • Jangan pernah mengubah file asli; selalu tulis ke folder output.
  • Varian white/black adalah siluet satu warna. Detail beda warna di dalam bentuk ikut menyatu; sebutkan ke pengguna kalau logonya punya detail seperti itu.
  • Script tambahan: scripts/svg_audit.py (audit SVG mana pun), scripts/render.py --which (cek renderer yang tersedia), scripts/variants.py (varian dari SVG yang sudah ada).
  • Integrasi checkbox di dashboard AION: references/aion-integration.md.

Related Skills