Guides
Write-ups about working with SVG in production — why a fill refuses to change, where 40 KB of an icon actually goes, which favicon files a browser still asks for, what tracing can and cannot recover from a PNG.
Each one comes out of a problem hit while building the tools on this site, so they are specific and they name the cases where the advice stops applying. They are dated, revised when browser behaviour moves, and none of them are sponsored. No newsletter.
PNG to SVG in Adobe Express: what it converts, and what it cannot
Adobe Express will trace a PNG for free — behind a sign-in, at settings it chooses for you. Knowing what it decides is the difference between a quick win and a redo.
Read the guide →How to convert SVG to PNG: browser, Mac, Windows, command line
Rasterising an SVG is easy once you pick the right renderer — and confusing before that, because the tools built into the OS mostly refuse the job.
Read the guide →PNG to SVG in Inkscape: Trace Bitmap, step by step
Inkscape ships the most capable free tracer with a user interface — excellent at line art, workable at colour. The dialog just assumes you already know it.
Read the guide →PNG to SVG in Photoshop or Illustrator: what actually works
Half the tutorials for this workflow describe tools that cannot do it. Illustrator traces; Photoshop, GIMP and Figma need outside help.
Read the guide →PNG vs SVG: which format to use, and when to switch
One format stores what the image looks like, the other stores how to draw it. Most format mistakes come from ignoring that one sentence.
Read the guide →SVG to Vue: fallthrough, props and the single-root rule
Vue passes parent attributes straight onto a single-root component. The conversion is small; knowing the edges of fallthrough is the actual work.
Read the guide →SVG to Svelte: $$restProps, runes and dynamic fills
Svelte forwards nothing on its own. One rest spread on the root svg restores everything — written differently in Svelte 4 and in runes mode.
Read the guide →PNG to SVG: what tracing can and cannot recover
Tracing infers shapes from pixels. Knowing what survives the trip decides whether the result is usable.
Read the guide →Favicons: the five files you actually need
The thirty-file favicon folder is a fossil. Modern browsers need five files and four lines of head markup.
Read the guide →How to change SVG colors with CSS
An SVG's color lives in three places, and knowing which one you are fighting is most of the work.
Read the guide →Why your SVG is 40 KB and how to get it to 4 KB
Almost all of the weight in an exported SVG is editor metadata and coordinate precision nobody can see.
Read the guide →SVG to React: the gotchas nobody documents
Pasting SVG into JSX mostly works, until it does not. The failures are predictable.
Read the guide →viewBox, width, height: which one actually wins
viewBox defines the coordinate system. width and height define the box. They answer different questions.
Read the guide →Making icons accessible without a title on every path
Most icons should be hidden from screen readers. The interesting question is which ones should not.
Read the guide →