Halftone badge: PNG to SVG example

A two-color badge with a halftone dot pattern that grows toward the bottom, traced with screen print mode.

Scales to any size
One file from a favicon to a poster
Editable shapes
74
Colors you can swap
15+ 60 gradients
File size
213 KB SVG

The original PNG is 58 KB. To print it 4000 px wide as a PNG you would need a 1.59 MB file (8x the SVG), and it would still be an enlarged copy of the same pixels. The SVG stays this size at every size.

Zoom
SVG view
Red and cream circular badge reading Sound System with a halftone dot pattern growing larger toward the bottom, original PNG at 4x zoom
Original PNG, 4x
Red and cream circular badge reading Sound System with a halftone dot pattern growing larger toward the bottom, SVG preview
SVG, 4x
Recolor the SVG

Each of the 15 colors in the file is a value you can change, so the whole image recolors instantly. A PNG can only be recolored by repainting it.

Same file, any size

The SVG is drawn fresh at every size. The PNG can only be stretched or squeezed, shown here without smoothing so you see its real pixels.

Favicon, 16 px

halftone badge original at 16 pixels
PNG
halftone badge SVG at 16 pixels
SVG

Card, 200 px

halftone badge original at 200 pixels
PNG
halftone badge SVG at 200 pixels
SVG

Poster, 4000 px wide

A window of the print at full size, around the same detail.

PNG enlarged to 4000 px
SVG at 4000 px

The numbers

InputPNG, 1000 × 1000 px, transparent
Original file58 KB
SVG file213 KB (3.7× the original)
Paths74
Anchor points6,170
Solid colors15
Gradients60
Vectorizer modeScreen print mode
Processing time26.0 s
PNG at 4000 px wide1.59 MB

Processing time is the full request measured from the browser side, upload included. The SVG is published exactly as the vectorizer returned it.

What the vectorizer did

  • Every halftone dot survived as a clean round shape, including the smallest ones at the top.
  • The dots are grouped into a few compound paths (74 in total), so the file stays workable.
  • Some regions came back with near-flat gradients. For a two-screen job, run Reduce colors to 2 before separating.

Working on something similar? Read more on the Vector files for screen printing page.

Vectorize your own PNG

Upload a PNG, JPG or WebP and get an SVG like this one in seconds. Your first conversion is free, no sign-up needed.