PNG to SVG Tracer

Guides Guides

What Is Vectorization? Raster vs Vector, Explained Plainly

Vectorizing an image means converting it from pixels into shapes. If you have ever enlarged a small logo and watched it turn blurry and blocky, you have seen the problem vectorizing solves.

Pixels versus shapes

A PNG or JPG is a grid of colored squares. Zoom in far enough and you can see them. Make the image bigger and the software has to invent new pixels, so edges go soft.

A vector file stores instructions instead: draw a curve from here to there, fill the inside with this color. Those instructions work at any size. A vector logo looks the same on a business card and a truck.

SVG is the vector format you will meet most often, because browsers, Canva, Figma, Illustrator, Inkscape and cutting machines all read it.

How vectorizing actually works

Software cannot see a letter A. It sees pixels, so it has to guess where the edges are. The usual steps are:

  1. Reduce the image to a limited set of colors.
  2. Find the boundary around each color area.
  3. Fit curves and straight lines along those boundaries.
  4. Write the result out as filled paths.

This is called tracing, and every vectorizer, from Illustrator's Image Trace to a browser tool, does some version of it. You can try it with our image to SVG converter.

What vectorizes well

What does not

Photos. A photo is millions of subtle tones, and tracing flattens them into patches. You can get a poster-style effect from it, and some people like that, but you do not get a sharp photograph at any size. We cover that in photo to SVG.

Blurry or tiny source images also trace badly. The tracer cannot recover detail that was never there, so start from the biggest, cleanest copy you have.

When it is worth doing

Vectorize when you need to scale artwork up, cut it with a machine, print it on merchandise, or edit its shapes and colors. If you only need the image to look fine on a web page at its current size, a good PNG is enough.

Next: how to vectorize an image step by step.

TagsVectorizingRaster vs vectorSVG

Related tools

Keep reading