Every image you've ever taken is a grid of colored squares. That's a raster image: JPG, PNG, WebP, all of them. Zoom in far enough and you see the squares.

SVG is a different species. It doesn't store squares. It stores instructions: draw a circle here, a line there, fill it red. The browser follows the instructions fresh every time it renders.

This difference decides which format wins, and it's not close for the right jobs.

Where SVG wins by a mile

Logos. Icons. Simple illustrations. Anything made of flat shapes and clean lines.

An SVG logo is sharp at 16 pixels and sharp at 16 feet. Same file. A PNG logo needs a separate export for every size, and each one is a guess about how big it'll be shown.

File size is the other blowout. A simple icon as SVG is often under a kilobyte. The same icon as PNG might be 20 KB. Multiply by the 40 icons on a page and you've saved real weight.

Where raster wins

Photos, obviously. You can't describe a photograph as "draw a circle here." Well, you could, but the file would be enormous and look terrible.

Anything with texture, gradients, or photographic detail stays raster. Screenshots stay raster. Digital paintings stay raster.

The practical split

I use this test: could I redraw it with basic shapes in a few minutes? Logo, icon, simple chart, flat illustration. Yes means SVG.

Could I not? Photo, screenshot, anything with shading and texture. That stays JPG, PNG, or WebP.

One catch with SVG

SVG is code, which means a malicious SVG can carry scripts. If you let users upload SVGs to your site (profile pictures, for example), sanitize them or don't allow them. For your own assets that you made yourself, there's nothing to worry about.

Practical tip: exporting a logo as SVG from design software? Expand text to outlines first. If the viewer's computer doesn't have your font, live text in an SVG falls back to something ugly. Outlined text is just shapes, and shapes always render.

Converting between the worlds

Going from SVG to PNG is easy (pick your size, export). Going from PNG to SVG means tracing, which is a redesign, not a conversion. Jiggle X Wiggle's free converter handles the raster side of the family: PNG, JPG, WebP, and friends, in seconds.

Vectors for shapes. Pixels for photos. Pick by what the image is made of.