CommunityImagengithub.com

alvici/png-to-svg

PNG a SVG: convierte imágenes PNG (logos, iconos, ilustraciones planas, line art, formas degradadas) en SVG vectoriales limpios, de un archivo o una carpeta, con opciones de variante de color (original / blanco / negro) más favicon e iconos de aplicación. Úsalo cuando te pidan convertir, trazar o vectorizar PNG a SVG.

¿Qué es png-to-svg?

Esta habilidad permite convertir imágenes PNG (como logos, iconos, ilustraciones planas, line art o formas con degradados) en archivos SVG vectoriales reales, donde el SVG contiene trazados (path) en lugar de simplemente envolver el PNG. Es ideal para desarrolladores, diseñadores y agentes de IA que necesitan limpiar y escalar gráficos rasterizados a formato vectorial sin pérdida de calidad. Soporta tres variantes de color: color original, blanco (silueta) y negro (silueta); también puede generar favicons e iconos de aplicación. Funciona tanto con un solo archivo como con una carpeta completa. Se ejecuta mediante scripts Python (`scripts/png2svg.py`, `scripts/svg_audit.py`, etc.) y requiere que el agente primero consulte al usuario la variante deseada, luego ejecute la conversión y finalmente revise un informe JSON que indica la similitud (≥97% es aceptable) y los resultados de auditoría. Si la similitud es baja, el agente puede reajustar parámetros (`--colors`, `--speckle`) hasta un máximo de tres intentos. La habilidad también incluye referencias detalladas para Windows y opciones avanzadas de tuning.

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

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

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

PNG a SVG

Convierte PNG en SVG vectorial real (path), no PNG envuelto en SVG. Todos los scripts están en la carpeta scripts/ junto a este archivo; ejecútalos con la ruta completa.

Windows: usa python o py -3, no python3 (a menudo solo abre Microsoft Store). Preparación, renderizadores y problemas comunes en Windows: references/windows.md.

Pasos de trabajo

  1. Revisa el material. Asegúrate de que el archivo PNG se pueda abrir. No conviertas logos o personajes de otras marcas a menos que el usuario tenga permiso claro para usarlos.

  2. Pregunta por la variante antes de la conversión. No ejecutes el proceso de creación de SVG hasta que el usuario elija la variante. Ejecuta: python scripts/png2svg.py input.png --list-options

    • source_type: color → pregunta si desean Color original, Blanco, Negro o una combinación de esas opciones.
    • source_type: mono → pregunta si desean Negro, Blanco o ambos.

    Si el usuario pide conversión sin mencionar variante, detente después de revisar las opciones y haz la pregunta; no elijas default solo porque aún no hay respuesta. Continúa después de que el usuario responda. Si el usuario pide explícitamente ir directo sin preguntar, usa default. Detalle de cada variante: references/variants.md.

  3. Convierte después de recibir la elección del usuario. Usa solo las variantes elegidas en --variants, por ejemplo: python scripts/png2svg.py input.png out_dir --variants original,white --compare Agrega --icons si el usuario pide favicon o iconos de aplicación. Para una carpeta, reemplaza input.png con el nombre de la carpeta.

  4. Lee el informe JSON. Para cada variante están similarity_pct y audit.

    • similarity_pct ≥ 97 y audit.verdict = ok → terminado.
    • En caso contrario, ajusta --colors o --speckle según references/tuning.md, máximo 3 intentos.
    • similarity_pct: null significa que no hay renderizador: el resultado se genera igual, indica que se omite la comprobación visual.
    • Si se pueden ver las imágenes, abre *_compare.png (izquierda = destino, derecha = resultado).
  5. Entrega. Proporciona los archivos SVG por variante (y la carpeta icons/ si se solicitó) con un resumen breve: método, similitud, tamaño y notas de notes o audit.issues.

Reglas

  • Nunca modifiques el archivo original; escribe siempre en la carpeta de salida.
  • Las variantes blanco/negro son siluetas de un solo color. Los detalles de color dentro de las formas se fusionan; indícaselo al usuario si el logo tiene ese tipo de detalles.
  • Scripts adicionales: scripts/svg_audit.py (audita cualquier SVG), scripts/render.py --which (comprueba renderizadores disponibles), scripts/variants.py (variantes a partir de un SVG existente).
  • Integración con casillas de verificación en el panel AION: references/aion-integration.md.

Skills relacionados