What Is the Difference Between Vector and Raster Graphics? (Visual Guide)

A raster image is a grid of tiny colored squares called pixels. A vector image is a set of drawing instructions: a curve from this point to that point, filled dark blue. That single difference explains everything else. A raster image holds a fixed amount of detail, so enlarging it makes it blurry or blocky. A vector image is redrawn from its instructions at whatever size you show it, so it stays sharp from a browser tab icon to a billboard.

Photos are raster: JPG, PNG, WebP, GIF, HEIC and TIFF files. Logos, icons, fonts, charts and technical drawings usually work best as vector: SVG, EPS, AI, and the drawn parts of most PDFs.

The difference, described over the phone

Imagine describing a red circle to a friend over the phone so they can draw it. The raster way: you read out the color of every square on a sheet of graph paper, row by row. The vector way: you say "a red circle, five centimeters across, in the middle of the page." The second description is far shorter, and your friend can draw it on a sticky note or a wall. The first is tied to the graph paper you started with.

Now try describing a photo of a forest the same way. Shapes stop working: every leaf, shadow and patch of blur would need its own instruction. Reading out the squares becomes the simpler option. That is why photographs are raster, and why they will stay that way.

Side by side

Resolution and DPI only matter for raster images

A raster image has a pixel size, such as 3000 by 2000. How sharp it looks on paper depends on how many of those pixels land on each inch. Print that photo 10 inches wide and you get 300 pixels per inch, the usual target for photo prints. Stretch it to 30 inches and you are down to 100 per inch, which looks soft up close.

A vector file has no pixel count at all. A DPI setting only comes into play at the moment it is turned into pixels, for example when you export a PNG. When you send a printer a vector logo, it is drawn at the full resolution of their machine.

Converting from one to the other

Vector to raster: easy, but a one-way trip

Screens and printers all end up drawing pixels, so vector artwork is turned into raster constantly. When you export an SVG as a PNG, you choose the pixel size. Export at the largest size you will need, because the PNG cannot be enlarged later without blur, and keep the vector original for next time.

Raster to vector: tracing, not converting

Going the other way means software guesses where the edges are and draws new shapes along them. Inkscape's Path > Trace Bitmap and Illustrator's Image Trace handle simple flat logos with a few solid colors and clean edges well. They handle photos, gradients and small blurry images badly. Either way, the result is a redrawing that you should check and tidy by hand.

Watch out for converters that promise to turn a JPG into an SVG instantly. Some of them simply place the original pixels inside an SVG file. The file name changes, but the image is still raster and still blurs when enlarged.

Most PDFs contain both

A PDF exported from Word, InDesign or a design app keeps its text and drawn shapes as vector, while photos inside it are stored as raster images. Zoom in far enough and you can see the difference: the text stays crisp while the photos soften.

A scanned PDF is the exception: it is entirely raster, one picture of the paper per page, which is why you cannot select its text until OCR has been run. Likewise, turning photos into a PDF with Image to PDF keeps them raster. The same pixels simply sit inside a PDF page.

Which one to use

• ●Logos and icons on a website: SVG. The files are small, sharp on high-density phone and laptop screens, and can be recolored with CSS.
• ●Photos on a website: WebP or JPG, saved at the largest width the page will actually display.
• ●Screenshots and images with text: PNG or lossless WebP. JPG compression smudges the hard edges of letters.
• ●Print: vector for logos and type, and photos at around 300 pixels per inch at their final printed size.
• ●Sending a logo to a printer or sign maker: SVG, EPS, AI or vector PDF. A PNG saved from a website is usually far too small for anything large.

Both kinds of file can be made smaller, just in different ways. Compress Image handles both in your browser: JPG, PNG and WebP files are re-encoded at a quality you choose, while SVG files are cleaned of metadata and comments and have their coordinates rounded, which leaves the drawing itself intact.