png-to-svg

PNG to SVG

Reconstruct the visible foreground as deliberate vector geometry. Treat the raster as evidence, not as content to wrap inside an SVG.

Resolve <skill-dir> to the directory containing this file. Resolve all bundled paths from it.

Hard requirements

• Produce real SVG primitives and paths. Never use <image>, raster data URLs, foreignObject, CSS background images, or external asset references.
• Leave the SVG canvas transparent and exclude every source-background pixel.
• Preserve the requested lockup, spacing, alignment, palette, negative space, and optical weight.
• Prefer the fewest clean primitives and Bézier points that explain the raster. Do not ship a noisy automatic trace.
• Do not search for an original SVG or substitute an icon-library asset. Reconstruct only from the supplied raster and user facts.
• State genuine ambiguity instead of inventing hidden geometry.

Workflow

1. Inspect the source

View the original at native size and zoomed in. Record:

• canvas dimensions, alpha channel, and likely background;
• foreground bounds and intended whitespace;
• dominant colors and antialiasing fringe;
• symmetry axes, repeated widths, radii, angles, and negative spaces;
• whether the form is best explained by strokes, fills, or both;
• whether several visible parts form one lockup or separate assets.

For an opaque source, explicitly identify and remove the background. For a textured or ambiguous background, separate the intended foreground semantically and inspect every edge.

2. Form a geometry model

Read references/geometry-and-qa.md. Start with the lowest adequate complexity:

1. circles, ellipses, lines, polylines, rectangles, rounded rectangles, and arcs;
2. small primitive composites and negative-space cutouts;
3. a few deliberate cubic curves with tangent continuity;
4. a simplified custom outline only for a genuinely irregular silhouette.

For line icons, test a centerline-stroke model before drawing both edges as an outline. Infer a shared stroke width, caps, joins, and corner language. For filled icons, reconstruct the silhouette and open interior holes rather than painting them with the source background color.