Guide · 3 min read

What a vector file is, and when you need one.

What a vector file is, the formats it comes in, why a printer or a sign maker asks for one, and how to tell a real one from pixels in disguise.

A navy bird mark built from four triangles beside the word KESTREL in navy capitals, on pale blue
The PNG as uploaded667 KBVecSnap's SVG2.7 KB124 anchor points

A vector file stores a picture as shapes, lines and curves with their colors. It is drawn again, sharp, at any size, and each part stays editable; a pixel file is a fixed grid that blurs when enlarged. Logos live as vector files because a website, a business card and a sign each need a different size. The usual vector formats are SVG, PDF, EPS and AI; a JPG or a PNG saved under one of those names still holds pixels.

Updated 2 sources ↓

The definition

What is a vector file?

A file that describes a picture as shapes: a curve by its anchor points, a circle by its center and radius, each with its color. The software draws it again at whatever size you ask, so it is never blurry.

Up close, a logo's vector file keeps every edge clean, where the picture it came from shows its pixels.

Original
1,200 pxthe PNG as uploaded, its own pixels
VecSnap
124anchor points in the whole file

Vector vs raster

What is the difference between vector and raster?

A raster image, such as a PNG or a JPG, is a grid of pixels; a vector image is a list of shapes. Enlarge a raster and its pixels grow; enlarge a vector and it is drawn again.

  • Made of

    A raster image
    A grid of colored pixels
    A vector image
    Shapes: curves, circles and lines, each with its color

  • Enlarged

    A raster image
    Its pixels grow into squares
    A vector image
    Drawn again, sharp at any size

  • Edited

    A raster image
    Pixel by pixel
    A vector image
    Shape by shape: one color changes everywhere at once

  • Its weight

    A raster image
    Grows with its width and height
    A vector image
    Grows with the number of shapes

  • Best for

    A raster image
    Photos and screenshots
    A vector image
    Logos, icons, illustrations and cut files

The formats

What are the vector file formats?

Four you will meet: SVG, the web's own; PDF and EPS, which travel to print shops; and AI, Adobe Illustrator's working file.

  • SVG

    What it is
    The web's open standard for vector graphics
    What it is for
    Websites, apps, Figma, cutting machines

  • PDF

    What it is
    A document that can hold shapes, text and pixels
    What it is for
    Print shops, sending a file to anyone

  • EPS

    What it is
    An older print format
    What it is for
    Printers and sign makers who still ask for it

  • AI

    What it is
    Adobe Illustrator's own working file
    What it is for
    Editing in Illustrator

Real or not

How do I know if my file is a real vector?

Zoom in far. A vector stays sharp; pixels turn into squares. An SVG can also be opened in a text editor: paths and circles are shapes, an image element is pixels wrapped in an SVG.
A picture wrapped in an SVG file
<svg viewBox="0 0 1200 1200">
  <image width="1200" height="1200"
    href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…"/>
</svg>
  • One image element: the pixels inside
  • Squares when you zoom in
The logo's real SVG
2.7 KB, the whole file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 1374">
<rect width="2048" height="1374" fill="#d1eaf2"/>
<path fill="#1b2b45" d="M320.43 489.48q1.88-1.29 6.24-1.2l145.39-.19c15.79.17 25.47 11.38 26.45 26.6q-.1.37-.05 5l-.05 138.91c-.06 8.43-10.24 12.18-16.02 6.72L321.99 506.24c-4.71-4.65-9.04-11.77-1.56-16.76z"/>
<path fill="#1b2b45" d="M513.79 525.26c4.14-2.37 8.59-.88 11.73 2.3l134.7 135.45c2.4 2.41 6.22 5.71 7.84 8.73 3.41 6.39-.27 12.25-7.41 12.25l-140.41-.05c-6.38 0-10.63-5.16-10.62-11.31l.08-128.4c0-5.72-1.63-15.7 4.09-18.97z"/>
<path fill="#1b2b45" d="M347.51 884.18c-6.39-4.6-3.67-12.48 1.04-17.14L477.3 738.39c11.39-11.48 21.15-9.89 21.13 7.77l-.23 116.93c-.09 14.14-14.3 22.72-27.09 22.71l-119.92-.25q-1.78-.01-3.68-1.37z"/>
<path fill="#1b2b45" d="M1346.49 617.78l62.71-.02c33.48 0 60.76 16.78 59.64 53.12q-.91 26.16-27.54 40.73l30.09 44.31-35.92.28-26.6-39.17h-29.11l-.13 39.2-33.26-.11.12-138.34z"/>
<path fill="#1b2b45" d="M674.72 700.05c3.08 7.21-4.18 9.82-8.57 12.95L531.19 802.3c-24.72 16.52-21.38-5.77-21.47-22.54l-.12-72.4c.18-10.83 6.81-12.01 15.54-12.17l135.94.08c4.98.02 11.2-.94 13.64 4.78z"/>
<path fill="#1b2b45" d="M807.34 617.9l32.86-.18-.07 63.63 60.61-63.64 37.56.15-57.15 61.02 60.64 77.07-39.37.13-43.44-54.24c-2.23 2.57-18.8 18.18-18.91 20.72l.06 33.71-32.75-.06-.04-138.31z"/>
<path fill="#1b2b45" d="M1063.97 617.82l.04 26.34-74.71.03.28 28.87h65.87l.21 25.88-66.35.01.33 30.96 77.56.04.1 26.24-110.87.09.01-138.5 107.53.04z"/>
<path fill="#1b2b45" d="M1493.72 617.8l107.98.02.06 26.36-74.82.03L1527 673h65.99v25.99L1527 699v30.97l78.02.03-.11 26.23-111.12-.1-.07-138.33z"/>
<path fill="#1b2b45" d="M1192.94 629.65l-9.93 23.79q-13.26-7.16-21.16-9.04c-11.86-2.98-40.22-6.03-44 10.81-5.4 28 88.57 7.04 81.16 65.72-5.82 46.08-75.14 42.52-106.1 27.23l-11.09-6.18c2.48-6.26 6.49-12.69 9.06-19.07.71-2.57 2.13-4.77 2.8-6.15 14.08 9.21 31.74 16.17 50.57 15.24 28.13-1.39 30.65-22.54 2.14-29.28l-30.76-7.68c-40.97-10.27-39.74-59.77-2.92-74.35 22.06-8.74 62.81-7.19 80.23 8.96z"/>
<path fill="#1b2b45" d="M1205.95 617.82l122.71-.04-.02 26.65-44.59-.08-.01 111.81-33.28.02.04-111.8-44.86.01.01-26.57z"/>
<path fill="#1b2b45" d="M1629 617.96a409.75 409.75 0 0 1 33.06.02l-.17 111.54 70.9.12-.03 26.69-103.78-.13.02-138.24z"/>
<path fill="#1b2b45" d="M607.01 584.98l55.06-38.39c9.47-6.7 25.92-22.17 25.92 1.68l-.19 76.39c.06 12.36 1.87 28.6-2.13 39.68-6.65 2.41-9.86-1.83-14.08-6.03l-54.82-55.14c-5.66-5.66-11.53-9.37-9.76-18.19z"/>
<path fill="#1b2b45" d="M755.51 592.11l-48.6-.2c-4.93 0-7.9-3.45-7.9-8.26L699 543.21c0-4.85 4.16-8.44 7.71-9.92l39.54 39.4c5.5 5.5 13.75 10.29 9.26 19.42z"/>
<path fill="#d1eaf2" d="M1379.75 644.33l29.19.1c35.75.03 34.38 46 1.68 46.05l-30.89.09.02-46.24z"/>
</svg>
  • Every part a path: shapes
  • Sharp at any zoom

Try it

How do I turn my logo into a vector file?

Have it drawn again as shapes, never wrapped. Drop your logo here: VecSnap draws it as a real vector, and you zoom in on every edge before you keep it.
OriginalVecSnap
Anchor points
VecSnap 124, potrace 1,76592% fewer
File size
VecSnap 2.7 KB, potrace 62 KB95% lighter

No image at hand? Try one of ours

Now yours: drop your logo

VecSnap draws it again as shapes that stay sharp at any size. Converting and previewing are free.

Why printers ask

Why does a printer ask for a vector file?

Because a print is made at the size the printer chooses: a business card, a shirt, a sign. A vector file is drawn sharp at each of them; a pixel file is only as sharp as its pixels allow.
  • A business card3.5 in · 1,050 pxthe PNG is enough
  • A flyer8.5 in · 2,550 pxthe PNG covers 47%
  • A T-shirt print12 in · 3,600 pxthe PNG covers 33%
  • A shop sign48 in · 14,400 pxthe PNG covers 8%
The PNG: 1,200 px wide, 4 in at 300 dpiThe SVG: every size

Questions

Vector files, answered.

Sources

Your logo stored as shapes, usually an SVG or a PDF: one file that prints, cuts and displays sharp at any size.

More guides

Keep reading

Favicon size and format

Sizes, formats and the HTML, shown on one icon in a tab, a search result and a home screen.

Guide · 5 min read

What is an SVG file?

What the format is, and how to open, make and edit one, on a real file read line by line.

Guide · 4 min read

Image Trace in Illustrator, step by step

The steps, the settings and Expand, and what to do when Image Trace is grayed out.

Guide · 3 min read

How to change a logo's color

Change a logo's colors, make a white or a black version, and why a recolored PNG grows a halo.

Guide · 4 min read

How to fix a pixelated logo

Why a logo pixelates, the pixels each place asks for, and the fixes, shown on one small JPEG.

Guide · 5 min read

SVG viewBox, width and height

The viewBox, width and height, a responsive SVG, and why yours will not scale, shown on one file.

Guide · 4 min read

SVG vs PNG

Which format each job needs, shown on one drawing saved both ways.

Guide · 3 min read

How to change an SVG's color

Recolor an SVG in its text, with CSS or currentColor, and why one in an img tag will not change.

Guide · 4 min read

How to add a sticker border

A white edge and a smooth cut line, in Cricut, Illustrator, Inkscape or one step.

Guide · 5 min read

Inkscape Trace Bitmap, step by step

The steps, the modes and the settings, and what Trace Bitmap leaves on a real PNG.

Guide · 4 min read

How to vectorize an image in Photoshop

Make Work Path, color by color, and where it stops: what Photoshop can vectorize.

Guide · 4 min read

SVG vs EPS

What differs, which to send a printer, and one logo opened both ways.

Guide · 3 min read

How to vectorize an image in Canva

Canva's own apps, why a PNG saved as an SVG stays pixels, and an SVG you can recolor in Canva.

Guide · 4 min read

How to turn a Procreate drawing into a vector

Procreate shares no vector file: export the PNG that converts best, and draw for it.

Guide · 2 min read

How to make an SVG for Cricut

Why Design Space wants an SVG, and how to make one with a layer for each color.

Guide · 4 min read

Image Trace in Affinity, step by step

The steps, the two settings, where it is, and why traced corners come out round.

Guide · 4 min read

How to make an SVG for laser cutting

Why a traced SVG engraves some areas twice, and the file each laser app wants.

Guide · 5 min read

How to vectorize an image in Figma

Figma's own Vectorize, how to import or paste an SVG, and what makes a file easy to edit there.

Guide · 3 min read

How to reduce anchor points

Why a traced SVG has thousands, what they cost, and how to keep only the few a shape needs.

Guide · 2 min read

Drop an image. Check the file.

Converting is free. You see the whole result before you spend anything.