pixel2svg-html

name

pixel2svg-html

description

Convert raster logos (PNG/JPG/WebP/screenshots) into clean, smooth, minimal-complexity SVG plus standalone JS-rendered HTML, using a lowest-complexity-first fitting workflow with overlay QA, edge smoothness as the primary hard gate, IoU optimized as high as reasonably possible without a fixed global threshold, Bezier audits, and a default 10-iteration budget. Use when asked to vectorize, trace, recreate, fit, or convert a logo image into SVG/HTML and no animation is requested. If the user asks for atomic motions, tuners/controllers, a main animation, or a logo animation showcase HTML, use pixel2motion instead. v2: also covers closed/self-intersecting variable-width ribbon fitting (centerline scaffold + edge snap) and a wordmark font-matching protocol (ink-weight ratio).

Pixel2SVG-HTML (v2)

Turn a raster logo into:

• logo.svg — minimal, smooth, editable vector
• logo.html — standalone HTML that recreates the SVG via JavaScript DOM calls
• final_render.png, html_render.png, overlay iterations + overlay_progress_strip.png
• path-audit artifacts when smoothness was a concern; resumable fit state in outputs/fit_work/

This skill is static/vector-first. If the requested HTML needs atomic motions, playback tuners/controllers, or a main logo animation, switch to pixel2motion; do not force animation delivery through this static skill.

The governing rule is lowest smooth complexity that passes visual QA. Do not maximize pixel-fit by default: start with the simplest editable geometry that can explain the mark, escalate only when an overlay shows a structural mismatch. Edge smoothness is the primary hard gate for ordinary logos. IoU is a required diagnostic and should be pushed as high as practical, but there is no fixed global IoU threshold; a slightly lower IoU can pass when the residuals are visually minor and explained.

Complexity Ladder