Community이미지github.com

alvici/png-to-svg

PNG를 SVG로 변환 — 로고, 아이콘, 평면 일러스트, 라인 아트, 그라데이션 형태의 PNG 이미지를 깨끗한 벡터 SVG로 변환합니다. 단일 파일 또는 폴더 단위로 처리 가능하며, 색상 변형(원본/흰색/검은색)과 파비콘 및 앱 아이콘 생성 옵션을 제공합니다. PNG를 SVG로 변환, 트레이스 또는 벡터화 요청 시 사용하세요.

png-to-svg란 무엇인가요?

이 스킬은 PNG 이미지를 실제 벡터 경로(path)를 포함하는 진정한 SVG로 변환합니다 (단순히 PNG를 SVG로 래핑하지 않음). 모든 스크립트는 SKILL.md와 동일한 디렉토리의 `scripts/` 폴더에 있으며, 전체 경로로 실행해야 합니다. Windows에서는 `python` 또는 `py -3` 명령어를 사용하세요 (`python3`는 Microsoft Store를 열 수 있음). 워크플로는 다음과 같습니다: (1) 입력 파일 확인, (2) 변환 전 사용자에게 색상 변형(원본/흰색/검은색)을 질문하고 `--list-options`를 실행하여 유형(color/mono)을 감지, (3) `--variants` 플래그로 선택한 변형을 전달하여 변환 실행 (`--icons` 옵션으로 파비콘/앱 아이콘 생성 가능, 폴더 단위로도 처리 가능), (4) JSON 보고서에서 `similarity_pct`와 `audit.verdict`를 확인하여 품질 평가(97% 이상 및 'ok'면 통과, 그렇지 않으면 `--colors`/`--speckle` 조정으로 최대 3회 재시도), (5) 변환된 SVG 파일과 선택적 아이콘 폴더를 전달하며 요약 정보를 제공합니다. 추가 스크립트로 `svg_audit.py` (모든 SVG 감사), `render.py --which` (사용 가능한 렌더러 확인), `variants.py` (기존 SVG에서 변형 생성)가 있습니다. AION 대시보드 체크박스 통합 방법은 `references/aion-integration.md`에 설명되어 있습니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/alvici/png-to-svg/tree/HEAD

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

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

PNG to SVG

PNG를 실제 벡터 경로(path)가 포함된 SVG로 변환합니다 (PNG를 SVG로 래핑한 형태가 아님). 모든 스크립트는 이 파일과 같은 디렉토리의 scripts/ 폴더에 있습니다. 전체 경로로 실행하세요.

Windows: python 또는 py -3 명령어를 사용하세요 (python3는 자주 Microsoft Store를 열기만 합니다). Windows에서의 준비 사항, 렌더러, 일반적인 문제: references/windows.md를 참조하세요.

작업 단계

  1. 입력 파일 확인. PNG 파일을 열 수 있는지 확인하세요. 타사 로고나 캐릭터는 사용자가 명확히 사용 권한이 있는 경우가 아니라면 변환하지 마세요.

  2. 변환 전에 변형을 질문하세요. 사용자가 변형을 선택할 때까지 SVG 생성 프로세스를 시작하지 마세요. 실행: python scripts/png2svg.py input.png --list-options

    • source_type: color → 사용자에게 원본 색상, 흰색, 검은색 또는 이들의 조합 중 원하는 것을 질문하세요.
    • source_type: mono → 사용자에게 검은색, 흰색 또는 둘 다를 원하는지 질문하세요.

    사용자가 변형을 언급하지 않고 변환을 요청하면, 옵션을 확인한 후 질문을 하고 멈추세요. 선택이 없다고 해서 default를 선택하지 마세요. 사용자가 답변한 후에 계속 진행하세요. 사용자가 명시적으로 질문 없이 바로 진행하도록 요청하면 default를 사용하세요. 각 변형에 대한 자세한 내용: references/variants.md.

  3. 사용자 선택 후 변환 실행. 선택한 변형만 --variants에 사용하세요. 예: python scripts/png2svg.py input.png out_dir --variants original,white --compare 사용자가 파비콘이나 앱 아이콘을 요청하면 --icons를 추가하세요. 폴더 단위로 처리하려면 input.png 대신 폴더 이름을 입력하세요.

  4. JSON 보고서 읽기. 각 변형에 대해 similarity_pct와 audit이 있습니다.

    • similarity_pct ≥ 97이고 audit.verdict = ok → 완료.
    • 그 외의 경우, references/tuning.md에 따라 --colors 또는 --speckle을 조정하고 최대 3회 재시도하세요.
    • similarity_pct: null은 렌더러가 없음을 의미합니다. 결과는 생성되지만 시각적 검사가 생략되었음을 알리세요.
    • 이미지를 볼 수 있다면 *_compare.png (왼쪽 = 대상, 오른쪽 = 결과)를 여세요.
  5. 결과 전달. 각 변형의 SVG 파일 (요청 시 icons/ 폴더 포함)을 간단한 요약과 함께 제공하세요: 방법, 유사도, 크기, notes 또는 audit.issues의 참고 사항.

규칙

  • 원본 파일을 절대 수정하지 마세요. 항상 출력 폴더에 씁니다.
  • 흰색/검은색 변형은 단색 실루엣입니다. 형태 내부의 색상 차이는 병합됩니다. 로고에 그런 세부 사항이 있으면 사용자에게 알리세요.
  • 추가 스크립트: scripts/svg_audit.py (모든 SVG 감사), scripts/render.py --which (사용 가능한 렌더러 확인), scripts/variants.py (기존 SVG에서 변형 생성).
  • AION 대시보드 체크박스 통합: references/aion-integration.md를 참조하세요.

관련 스킬