Skip to main content

Design Talk: A Guide to File Types

Tyler Zenk Sr Designer Heashot

By Tyler Zenk | July 2019

“Can you send me a vector file of your logo?”

Have you ever had a designer ask you that question and you don’t really know what they mean? Well, the short answer is that the designer is simply asking for an editable file of your logo. The slightly longer answer is that the designer doesn’t want a rasterized version of your logo because of certain limitations with raster graphics.

The Difference Between Vector and Raster Graphics

Vector Graphics

Vector graphics are not made up of a grid of pixels. Instead, they consist of lines and curves with start and end points on the x- and y-axis of the work plane. What did I just read… Basically what that means is that vector graphics are pixel-free and can scale and shrink to whatever size you want without a loss in quality. This is the perfect file type for logos, icons, typefaces and illustrations that will need to have a wide range of sizes like if you wanted to print your logo on a billboard or have it be crisp and readable on your website’s footer.

Vector File Types

  • .AI – Adobe Illustrator
    Vector based file that is perfect for logos and illustrations.
  • .EPS – Encapsulated Postscript
    Supports vector graphics and it great for placing in documents that need will be printed.
  • .SVG – Scalable Vector Graphics
    A vector-based file format that is used for logos and icons for digital use, like websites and apps.
  • .PDF – Portable Document Format
    Supports vector graphics and is great for printing. These file types can also contain raster graphics.

Raster Graphics

Raster graphics are pretty much the opposite of vector graphics. Basically, raster graphics are a defined grid of pixels, tiny little color squares, that when put together create an image. Everything you see on a digital screen is made up of pixels, like photographs or websites. Raster graphics are great but they have their limitations. Because raster images have a defined size when you try to scale them larger than their original size you lose quality in the image.

I have a .png and .jpg file. Which one should I use?

Both of these file types are raster graphics but there are differences which could get overly technical but we’ll just stick with the main differences you should be aware of. JPEG files are perfect for realistic photographs and images with smooth transitions of colors. PNG files are perfect for graphics with sudden changes in color and contrast like cartoons, illustrations, images with a lot of text and even logos. Another great advantage of PNG files is that they support transparency.

Have you tried placing a JPG file of your logo on something and you get that white box all around it? That’s because JPEG doesn’t support transparent backgrounds but PNG files do. This is great because you can save out version of your logo and place it on different backgrounds and there won’t be a box around it.

Raster File Types

  • .JPEG or .JPG – Joint Photographic Experts Group
    Pronounced as jay-peg. Perfect for Photographs and real-life imagery.
  • .PNG – Portable Network Graphics
    Pronounced as ping. Good for logos and illustrations but not scalable.
  • .GIF – Graphics Interchange Format
    Pronounced as giff* or jiff*. Supports a limited number of colors, lower quality images but supports transparency and animation.

*It depends on who you ask, but either one works

So what did you learn?

Hopefully, you have a better idea of what the main differences are between vector and raster graphics and why they are important. In cases you like to skim read here are the main takeaways:

  • Vector graphics are best for logos, icons, and illustrations so designers can scale and edit them without a loss in quality.
  • Vector file types include: .ai, .eps, .svg, .pdf*
  • Raster graphics are best for photographs and super detailed images and for printing.
  • Raster file types include: .jpg, .jpeg, .png, .gif

So now when a designer asks: “Can you send me a vector file of your logo?” You can be confident because you know what they are asking for.

When we create and develop a brand identity for our clients at Element5 we always include a packaged up folder with multiple filetypes and variations of their logo to use. Do you need a brand refresh or have a new brand that needs to be developed? Contact Us.

Tyler Zenk Sr Designer Heashot

Written by

Tyler Zenk

Runner, coffee addict, homebrewer and designer. Acting at the sweet spot between modernism and function to craft delightful brand experiences.

More from Me

Design Tool Icons

27 Design Tools I Can’t Live Without

By Element5 Digital

Decorative Background

Design and Accessibility: Why It Matters

By Paul Chambers

5 Big Reasons Why Mood Boards are Important

Design Talk: 5 Big Reasons Why Mood Boards Are Important

By Tyler Zenk

Need our help on a new project?

Shoot us a message. We'd love to hear from you.

get a quote