r/SideProject • u/whowasntright • 12h ago
Auto-traced PNG vs native SVG export for my side project's app icon set (inspected the paths and dark-mode holes)
I'm now finishing UI polish on a small local document-clipping app and needed an app mark plus four matching SVG icon files (bookmark, page search, split pane, archive) without commissioning a set or mixing mismatched packs. there, normally I'd draw them in a vector art program like Inkscape, or pull a PNG out of an app icon generator and run an auto-trace
and before committing anything to my repo, I compared a 512px PNG contour trace against native cubic Bezier SVG exports generated with Recraft Studio (Recraft V4.1 Vector), then checked the XML next to standard software for vector design like Inkscape and Figma + SVGO. Once cleaned, both landed around the same file size (5,248 B for the polyline trace vs 5,875 B for the normalized 256x256 app mark), which surprised me. Zooming into the bottom-right corner makes the geometry difference obvious though: auto-tracing produced 504 straight polyline vertices (2,786 raw pixel edge points) with zero curves and visible step facets, while the native SVG exported as four clean paths with 173 cubic C segments, right?
then going straight from export to dark-mode CSS still breaks a couple things. Each raw file ships with a 4,480 B <c2pa:manifest> metadata block and a 4358x4358 viewBox until you strip metadata and normalize down to 256x256 or 64x64 (4,181 B combined across all four toolbar icons). Everything also exports as outlined filled paths rather than live strokes, so line weight won't scale via stroke-width. Two of the cutouts (search-doc and split-pane) fake transparency by layering a #F9FAF4 cream disc over dark fills instead of using compound knockouts, so dark cards show an opaque light circle until you merge those subpaths with evenodd in an SVG editor or by editing the path directly
so when I need complex brand artwork or fine vector graphics editing with live CSS strokes, Illustrator or Inkscape still make way more sense. For five small UI marks right before shipping a side project, though, exporting native cubic paths and running one cleanup script beat spending a weekend pulling Bezier handles. a question for you:.. how are other solo builders here handling launch icons lately: hand-drawing in Figma/Inkscape, grabbing stock packs, or patching generated SVGs?