Raster vs vector: what is the difference?

The short answer

Raster is a grid of colored pixels. JPG, PNG, GIF, WebP, TIFF, HEIC. Every photograph and every screenshot is raster. It has a fixed size built in, and enlarging past that size blurs it.

Vector is a set of drawing instructions. SVG, AI, EPS, and most PDFs. It has no native size at all, so it is equally sharp on a business card and on the side of a building.

Use raster for photographs, because a photograph is not made of shapes. Use vector for logos, icons, type and diagrams, because those are.

What a vector image actually is

Open a PNG in a text editor and you get noise, because it is a compressed record of what color every pixel is. Open an SVG in a text editor and you can read it. Inside is something along the lines of a circle centered here with this radius, filled this color, and a line from this point to that one, this thick.

That is the whole idea. The file is not a picture, it is a recipe for one. Nothing exists until software follows the instructions, and it follows them again from scratch every time the image is shown at a new size. Ask for it four times bigger and the circle is simply drawn with four times the radius. There is nothing to stretch and nothing to guess.

A raster works the opposite way. A 500 pixel wide PNG contains 500 columns of color information and not one more. Display it at 2000 wide and the software has to produce three pixels it was never given for every one it was, which it does by blending neighbors. That blending is what you see as softness, and on hard edges as a stair-step.

How to tell which one you have

The extension answers it, and there is no ambiguity:

• Raster: .jpg, .jpeg, .png, .gif, .webp, .avif, .heic, .bmp, .tif, .tiff
• Vector: .svg, .ai, .eps, and .pdf when it was made from vector artwork

PDF is the one that catches people out. A PDF is a container, and it holds whatever was put in it. A PDF exported from Illustrator is vector. A PDF made by photographing a document is a raster image in a PDF wrapper, and enlarging it blurs exactly like the JPG it really is.

The practical test, if you are unsure: open it and zoom a long way in on a curved edge. Vector stays crisp at any magnification. Raster eventually shows you squares.

When to use each

Vector

Logos, icons, wordmarks, diagrams, charts, maps, illustrations built from flat shapes, and anything that will be printed at more than one size. Also anything going to a sign maker, an embroiderer, a vinyl cutter or a screen printer, because those machines follow paths rather than reading pixels.

Raster

Photographs, obviously, and anything derived from one. Screenshots. Anything with a soft gradient, a texture or real-world detail. Vector can technically represent a photograph and the file would be larger than the photograph and look worse.

Also raster whenever the destination demands it. Social platforms, most email clients and plenty of upload forms take JPG and PNG only, which is why exporting your vector logo to PNG at the size you need is a normal part of the job rather than a compromise.

If you want the format-level version of this argument, the SVG versus PNG guide covers the two specific formats, and logo file types covers what to keep and what to hand over.

Why the conversion only works one way

Vector to raster is easy. You are just asking the software to follow the instructions at a chosen size and record the result as pixels. Our SVG to PNG converter does it in your browser, at whatever size you specify, and the favicon generator does the same thing at the several sizes a site icon needs. Nothing is lost that was not always going to be lost by choosing a size.

Raster to vector is a different kind of problem. You are asking software to look at a grid of pixels and work out which shapes would have produced them. There is no single right answer. A slightly soft edge might be a curve, or a straight line that was antialiased, or a shadow. The program has to decide, and deciding is not converting.

It works acceptably on exactly the artwork that was probably vector to begin with: a solid black logo, high contrast, no gradients, no texture. Point the same process at a photograph and you get thousands of meaningless little shapes that look like a bad watercolor and produce a file bigger than the original.

If somebody asked for vector and you do not have it

This is the situation most people are actually in when they end up reading about this, so it is worth answering directly. In order of how well it works:

1. Find the original. Whoever designed the logo made it in something, and that something almost certainly produced an AI, EPS or SVG. Ask them. Designers keep source files, and this request is routine.
2. Check what you were sent. Brand packages often include vector versions that never got used because nobody could open them. Look for .ai, .eps or .svg in the folder, and look inside any PDF.
3. Have it redrawn. For a logo this is an hour of somebody's time and produces a file you own forever. It is the right answer far more often than people expect.
4. Send the largest raster you have, and say so. If the job allows it, a big PNG sometimes suffices. Tell the printer what it is rather than hoping, because they would rather know now than after the plates are made.

What does not work is enlarging the PNG you have and sending that. The detail is not there to enlarge, and resizing upward only spreads the same information over more pixels. It is worth understanding why rather than discovering it on a proof.

Frequently asked questions

What is the difference between raster and vector?

A raster image is a grid of colored pixels, so it has a fixed size baked in and blurs when enlarged beyond it. A vector image is a list of instructions for drawing shapes, which the computer follows fresh at whatever size it is displayed, so it stays perfectly sharp at any scale. Photographs are always raster. Logos and icons should be vector.

What is a vector image?

A file that describes artwork as shapes rather than pixels: a circle of this radius at this position, filled this color, with a line of this thickness around it. Nothing is a picture until something draws it, and it is drawn again at full quality every time it appears at a new size. SVG, AI, EPS and PDF are the common vector formats.

Is a JPG or PNG a vector file?

No. JPG, PNG, GIF, WebP, BMP, TIFF and HEIC are all raster formats, and so is every photograph and every screenshot. Renaming one to .svg does not convert it. If a printer has asked for vector artwork and all you have is a PNG, you do not have what they asked for, however large the PNG is.

Can I convert a JPG or PNG to vector?

Not reliably, and not in a browser. Going from vector to raster is simply drawing the instructions at a chosen size. Going the other way means guessing which shapes would have produced those pixels, which is a judgment problem rather than a calculation. Automatic tracing works acceptably for flat, high-contrast artwork like a solid black logo and produces a mess from a photograph.

Why does my logo look blurry when I make it bigger?

Because it is a raster file and you have gone past the pixels it actually contains. A 500 pixel wide PNG has 500 columns of information and no more, so displaying it at 2000 wide means the software inventing three pixels out of every four. A vector version has no native size to exceed and would stay sharp on a billboard.

Is SVG a vector format?

Yes, and it is the one that works directly in a browser. An SVG is text describing shapes, which is why it stays sharp at any size and why the file is usually tiny for flat artwork. It is the right format for a logo on a website.