CommunityImagemgithub.com

alvici/png-to-svg

PNG to SVG — converte imagens PNG (logotipos, ícones, ilustrações planas, line art, formas com gradiente) em SVGs vetoriais limpos, de um arquivo ou de uma pasta, com opções de variantes de cor (original / white / black) além de favicon e ícones de aplicativo. Utilize quando for solicitado converter, traçar ou vetorizar PNG para SVG.

O que é png-to-svg?

Esta skill permite converter imagens PNG (como logotipos, ícones, ilustrações planas e line art) em SVG vetoriais reais, utilizando scripts Python que realizam a vetorização por meio de técnicas de rastreamento de bordas. Ela é útil para desenvolvedores e designers que precisam de SVGs limpos e editáveis a partir de imagens raster, com suporte a múltiplas variantes de cor (Original, White, Black) e geração opcional de favicon e ícones de aplicativo. A skill é executada em ambientes que suportam Python, com scripts localizados na pasta `scripts/`, e está integrada ao dashboard AION para operação com checkbox. O fluxo de trabalho inclui: verificação do material, consulta ao usuário sobre a variante desejada (evitando escolhas automáticas), conversão com o comando apropriado, leitura do relatório JSON para validar similaridade (≥97%) e auditoria visual. Em caso de baixa similaridade, ajustes nos parâmetros `--colors` ou `--speckle` podem ser feitos em até 3 tentativas. A skill também oferece scripts auxiliares para auditoria de SVGs existentes, verificação de renderizadores e geração de variantes a partir de SVGs prontos.

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

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

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

PNG para SVG

Converta PNG em SVG vetorial real (paths), não um PNG encapsulado em SVG. Todos os scripts estão na pasta scripts/ ao lado deste arquivo; execute com o caminho completo.

Windows: use python ou py -3, não python3 (frequentemente abre apenas a Microsoft Store). Preparação, renderizadores e problemas comuns no Windows: references/windows.md.

Etapas de trabalho

  1. Verifique o material. Certifique-se de que o arquivo PNG pode ser aberto. Não converta logotipos ou personagens de terceiros, a menos que o usuário tenha direitos claros sobre eles.

  2. Pergunte pela variante antes da conversão. Não execute o processo de criação do SVG até que o usuário escolha a variante. Execute: python scripts/png2svg.py input.png --list-options

    • source_type: color → pergunte se deseja Original color, White, Black, ou uma combinação dessas opções.
    • source_type: mono → pergunte se deseja Black, White, ou ambas.

    Se o usuário solicitar a conversão sem mencionar a variante, pare após verificar as opções e faça a pergunta; não escolha default apenas porque não há escolha ainda. Continue após o usuário responder. Se o usuário solicitar explicitamente de imediato, use default. Detalhes de cada variante: references/variants.md.

  3. Conversão após a aceitação da escolha do usuário. Use apenas as variantes selecionadas pelo usuário em --variants, por exemplo: python scripts/png2svg.py input.png out_dir --variants original,white --compare Adicione --icons se o usuário solicitar favicon ou ícones de aplicativo. Para uma pasta, substitua input.png pelo nome da pasta.

  4. Leia o relatório JSON. Para cada variante há similarity_pct e audit.

    • similarity_pct ≥ 97 e audit.verdict = ok → concluído.
    • Caso contrário, ajuste --colors ou --speckle conforme references/tuning.md, no máximo 3 tentativas.
    • similarity_pct: null significa que não há renderizador: o resultado ainda é gerado, informe que a verificação visual foi ignorada.
    • Se for possível ver a imagem, abra *_compare.png (esquerda = alvo, direita = resultado).
  5. Entregue. Forneça os arquivos SVG por variante (e a pasta icons/ se solicitada) com um resumo breve: método, similaridade, tamanho e observações de notes ou audit.issues.

Regras

  • Nunca altere o arquivo original; sempre escreva em uma pasta de saída.
  • As variantes white/black são silhuetas de uma cor. Detalhes com cores diferentes dentro das formas se fundem; informe ao usuário se o logotipo possui tais detalhes.
  • Scripts adicionais: scripts/svg_audit.py (audita qualquer SVG), scripts/render.py --which (verifica renderizadores disponíveis), scripts/variants.py (variantes a partir de SVG existente).
  • Integração com checkbox no dashboard AION: references/aion-integration.md.

Habilidades Relacionadas