PerfectVector
Por Irene Kim

Potrace de PNG a SVG: conserva alfa y huecos

Convierta un PNG con Potrace después de preparar su canal alfa. Siga un flujo de trabajo PGM probado, compare umbrales y verifique el fondo y los orificios internos del SVG.

9 min de lectura
En esta página

Para convertir un PNG a SVG con Potrace, primero prepare un mapa de bits en escala de grises y luego trácelo con potrace --svg. Para ilustraciones oscuras en píxeles transparentes, componga la imagen en un mate blanco antes de guardar el mapa de bits. Inspeccione las formas con umbral y sus aberturas internas antes de aceptar el SVG.

Standard Potrace 1.16 lee PBM, PGM, PPM y BMP en lugar de PNG directamente. Su manual oficial describe una operación de calco monocromático: los tonos intermedios se vuelven blancos o negros. El flujo de trabajo siguiente crea una geometría sólida con regiones vacías, en lugar de preservar los valores alfa continuos del PNG.

Si prefiere un flujo de trabajo del navegador para una imagen que ya tiene, PerfectVector ofrece conversión de imagen a ruta y una vista previa gratuita. Empieza gratis con tu propia imagen, luego compara su silueta, pequeñas aberturas y colores con la fuente. Desbloquee el resultado antes de editarlo o exportarlo. La receta local de Potrace sigue siendo útil cuando desea un preprocesamiento explícito y configuraciones de comandos repetibles.

Pruébalo con tu propia imagen
Abrir la herramienta completa
Puedes probarlo gratis. Suelta una imagen y mira la vista previa de tu vector, sin registrarte.

Lo que necesitas antes de rastrear

Utilice un ejecutable de Potrace instalado, Python 3 con Pillow y el PNG original. Esta receta se ejercitó con Potrace 1.16 y Pillow 11.3.0. Guarde una copia de la entrada y trabaje en una carpeta separada para que cada variante de umbral tenga un nombre de archivo distinto.

El caso inicial es un logotipo, icono o dibujo oscuro sobre un fondo claro o transparente. Si su sujeto es claro sobre oscuro, decida cómo invertir o preparar la imagen antes de aplicar esta receta. Para ver un flujo de trabajo de editor interactivo, consulte Inkscape Trace Bitmap.

Un mate es el fondo sólido que se utiliza para resolver los píxeles transparentes antes del calco. Un umbral es el límite de brillo que divide la imagen preparada en primer plano y fondo. Esas elecciones ocurren antes de que el contorno se convierta en geometría SVG.

1. Resuelva la transparencia antes de guardar el mapa de bits.

PNG almacena el color y la opacidad por separado. El canal alfa describe la opacidad de cada píxel. La especificación PNG explica esta representación; un píxel completamente transparente aún puede contener valores RGB. Al eliminar el canal alfa, esos píxeles no se componen en el fondo blanco que puede haber visto en un visor de imágenes.

Para obtener una marca oscura, coloque la imagen deliberadamente sobre blanco. Este fragmento de Python abre artwork.png, lo compone en una imagen blanca del mismo tamaño, convierte el resultado a escala de grises y guarda artwork.pgm:

from PIL import Image
 
src = Image.open("artwork.png").convert("RGBA")
matte = Image.new("RGBA", src.size, "white")
gray = Image.alpha_composite(matte, src).convert("L")
gray.save("artwork.pgm")

La alpha_composite documentación de Pillow define la segunda imagen como compuesta sobre la primera. Ambas imágenes aquí tienen dimensiones coincidentes y modo RGBA.

Abra la PGM preparada antes de rastrear. El fondo exterior debe ser blanco, el primer plano previsto oscuro y los espacios importantes visibles. Un rectángulo negro en esta etapa es un problema de preprocesamiento; cambiar las reglas de relleno SVG más adelante no puede recuperar una apertura que nunca llegó al trazador.

Ilustración
Ilustración de un anillo negro en transparencia PNG, compuesto sobre un mate blanco y luego representado como geometría SVG con un centro abierto
Resuelva los píxeles transparentes del ráster contra un mate deliberado antes de elegir la geometría de primer plano. La apertura final deja ver el fondo de la pantalla.

2. Traza el PGM preparado

Ejecute esto en la carpeta que contiene artwork.pgm:

potrace artwork.pgm --svg --blacklevel 0.5 --turdsize 2 --output artwork.svg

--blacklevel 0.5 elige el límite de escala de grises. --turdsize 2 mantiene explícita la supresión de pequeñas manchas predeterminada de Potrace. Utilice un nuevo nombre de salida cuando cambie una configuración y luego compare los archivos en lugar de sobrescribir repetidamente su referencia.

Cambie un control a la vez:

ControlQue revisar
--blacklevelSi las marcas débiles pasan a primer plano y las aberturas estrechas permanecen vacías
--turdsizeSi las pequeñas formas aisladas son ruido o detalles intencionales
--alphamaxTratamiento de esquinas; a pesar de su nombre, este no es un control de opacidad

Un umbral de nivel de negro más alto puede incluir más píxeles de color gris claro en primer plano. Eso puede fortalecer una línea tenue o cerrar una abertura de luz. Juzgue juntos el mapa de bits preparado y el contorno resultante. El suavizado no puede reconstruir un contador después de que el umbral lo haya llenado.

Lo que mostraron las dos imágenes de prueba originales

Creamos dos 256 × 256 PNG controlados y ejecutamos los comandos de preprocesamiento y Potrace anteriores. Uno era un anillo negro con píxeles transparentes por fuera y por dentro. La otra era una marca oscura y opaca con una estrecha superficie gris, la abertura encerrada dentro de la marca. Inspeccionamos los SVG generados con un renderizador y verificamos su transparencia central y exterior.

Entrada y preparaciónResultado SVG observado
Anillo transparente, alfa descartado antes de la conversión en escala de grisesUn lienzo negro lleno; el exterior y la apertura prevista pasaron a primer plano
Mismo anillo, compuesto sobre blanco antes de la conversión a escala de grisesEl exterior y el centro estaban vacíos; el anillo permaneció lleno
Mostrador gris estrecho, compuesto blanco, nivel de negro 0,5El mostrador permaneció abierto.
Misma imagen de contador preparada, nivel de negro 0,8El contador se llenó

Los píxeles invisibles del control de anillo tenían valores RGB negros. Ignorar alfa expuso esos valores al umbral. La versión compuesta en blanco los resolvió en blanco primero. Esto explica la caja negra de esa muestra; no es una afirmación de que todos los PNG fracasarán de la misma manera.

La prueba del contador mantuvo constantes la entrada y otras configuraciones. Sólo el umbral cambió. Su resultado muestra por qué un trazo de aspecto más oscuro no es automáticamente un trazo mejor. Inspeccione la característica que necesita en lugar de elegir la configuración con la silueta más pesada.

Se trataba de comprobaciones digitales de dos archivos de prueba originales, sin ninguna imagen rasterizada incrustada en sus salidas SVG. No comparamos la calidad de Potrace's con PerfectVector, ni importamos los archivos a una cortadora ni probamos un resultado físico.

3. Verifique los agujeros y el fondo en el SVG guardado

Coloque el SVG sobre un fondo contrastante. Ese fondo debe verse tanto en el área exterior como en cada abertura prevista. La pintura blanca puede parecerse a un agujero en una página blanca, por lo que una miniatura por sí sola no es suficiente.

Un trazado compuesto SVG puede describir un contorno exterior y una abertura interior dentro de un objeto. Si la abertura ya está ausente en la geometría trazada, regrese al PGM y al umbral. Si existe en un renderizador pero se completa después de la importación, investigue la interpretación de la ruta de la aplicación receptora. La guía de solución de problemas de agujeros SVG separa esos casos.

Verifique el archivo guardado para:

  • la silueta prevista y pequeños huecos;
  • espacio vacío real fuera de la marca y dentro de sus contadores;
  • motas perdidas que no deberían convertirse en objetos;
  • un tamaño de documento apropiado en el flujo de trabajo de destino;
  • rutas en lugar de una copia incrustada del PNG.

Si solo el fondo se ve mal, utilice el diagnóstico de fondo SVG transparente antes de eliminar todos los objetos blancos. Si una característica pequeña está realmente ausente en la fuente, use un original más grande o vuelva a dibujar ese detalle. La guía de calidad de fuentes explica ese límite.

Cuando este flujo de trabajo monocromático encaja

Potrace encaja en una marca que puede expresarse como una silueta llena y aberturas intencionadas. Mantenga la trama cuando el sombreado suave o la opacidad parcial sean parte de la obra de arte que necesita preservar. Para varios colores significativos, utilice un flujo de trabajo de vectorización con capacidad de color o prepare pasadas separadas deliberadas; Este único comando monocromático no crea una paleta de colores.

También puedes utilizar un editor de vectores para volver a dibujar un contorno crítico. El rastreo automático proporciona una forma candidata y su uso previsto determina si conservarla o editarla.

Preguntas frecuentes

¿Puede Potrace abrir un PNG directamente? El estándar Potrace 1.16 acepta entradas PBM, PGM, PPM y BMP. Primero decodifique el PNG con otra herramienta de imagen, haga explícito su tratamiento de transparencia y guarde un mapa de bits compatible antes de realizar el calco.

¿Potrace conserva la transparencia PNG? El flujo de trabajo monocromático crea geometría rellena y regiones vacías. No conserva los valores alfa continuos del PNG. Componga píxeles transparentes en un mate deliberado antes de establecer el umbral y luego verifique las regiones vacías del SVG sobre un fondo contrastante.

¿Alphamax es la configuración alfa de PNG? No. El alfamax de Potrace controla el tratamiento de las esquinas en las curvas trazadas. No determina cómo se compone el canal de opacidad de un PNG antes del rastreo.

¿Por qué desapareció un agujero? Compruebe si la apertura todavía es visible en el mapa de bits preparado y el umbral seleccionado. Si el umbral lo llenó, cambie la preparación o el corte y vuelva a trazar. Si el SVG contiene la apertura pero solo una aplicación receptora la llena, verifique el manejo de la ruta compuesta y de las reglas de llenado allí.

Fuentes

  1. Potrace — Manual: formatos de entrada admitidos, umbrales monocromáticos, salida SVG y opciones de comando con nombre.
  2. Pillow — Módulo de imagen — Composición de imágenes RGBA y orden utilizado en el fragmento de preparación.
  3. W3C — Especificación PNG: muestras de color y representación alfa en imágenes PNG.
  4. W3C — Trazados SVG: trazados compuestos y contornos internos que pueden describir aberturas.

Comienza gratis con tu propia imagen en PerfectVector, luego compara su silueta y aberturas internas con la fuente antes de elegir el siguiente paso de edición.

Más del blog

PerfectVector

Convierte tu imagen en
trazados vectoriales limpios y editables

Vectoriza y revisa la vista previa gratis, sin límite diario.