The Difference Between PNG and SVG and When to Use Each

As designers, we use many different types of image formats. Each with a different purpose and usability. But in some cases, it can be a little confusing as to which is best for what purpose.

Today we’ll look at the PNG and SVG file formats specifically. Both of these are frequently used image file types in responsive design for websites and apps. But when should you use PNG, and when should you use SVG?

Here at Freepik Company, we offer you both these file types in Flaticon and Storyset. Both our icons and illustrations can be downloaded as either PNG or SVG. If you have often found yourself wondering which one to choose, we’re here to help.

Let’s take a look at both image file types plus the pros and cons of each.

What is PNG?

PNG stands for Portable Network Graphics. It’s a raster image file type. This means that all PNG images and graphics are made up of pixels. Therefore they can’t be scaled to any size as vector graphics can.

PNG is a file format commonly used for images published to the web. It tends to have a better resolution than JPEG and is better for digital design. It’s the file type of choice for logos and illustrations with a transparent background.

Let’s evaluate the pros and cons of using PNG in both digital and print design.

PNG format advantages:

• It supports transparent backgrounds.
• It works for adding cut out logos to any type of design; print, digital, and web.
• Better quality than JPEG for digital.

PNG format disadvantages:

• When you zoom in, it gets pixelated.
• On responsive design, the size stays the same from desktop to mobile.
• No layers.
• Not easily editable.
• Not the right file type for images used in print design.

What is SVG?

SVG stands for Scalable Vector Graphic. It’s a vector image file type. All SVG visuals are scalable to any size without losing resolution.

The main difference between SVG and PNG is that SVG supports animation and scalability. Another is that as a designer, you can change the colors of an SVG image much easier because it has layers.

Here are the pros and cons of using SVG for both digital and print design.

SVG format advantages:

• It can be animated.
• It has editable layers.
• It’s responsive, meaning that the size of the graphic changes depending on screen size.
• It can be customized with CSS.

SVG format advantages disadvantages:

• It’s not the right format for photographs.
• Older browsers and email applications sometimes can’t read SVG.
• Not suitable for print.

When to use PNG or SVG?

Now that we’ve seen each format’s pros and cons, let’s see when you should use each. We’ll use some real-life examples.

Let’s say you are downloading an icon from Flaticon, and you have to choose between downloading a PNG or an SVG.

• Download as PNG if you are designing a non-responsive digital design or print design. Use the largest size possible to keep it crisp.
• Download as SVG if you are using the icon for a UI/UX design for an app or responsive website.

Now let’s say you’re on Storyset and want to download your illustration. You can download the design as a static illustration or as an animation.

• As a static instant download:
  • Download as PNG if you want the illustration to be uneditable in terms of color and layers. For example, for a non-responsive digital design or print.
  • Download as SVG if you want to be able to change the colors later or the layers of the design as a whole.

• As an animation:
  • Once you have animated a Storyset illustration, you no longer have the option to download as PNG.
  • Download as an SVG (in one of the options offered) to use in apps and web designs.

And now, imagine you’re designing a logo for a client. What file type do you send them?

• Your best bet is to send them a PNG. They can use this on their website header, any digital or print design. Send them three versions; low-quality, medium-quality, and high-quality.

What if you are designing custom icons for an app or website?

• Send the client both PNG and SVG files. It’s best to give them all the options for their brand.

Are you a Flaticon contributor?

• Upload all icon designs as SVG.

Are you designing a website and don’t know what items to use as PNG or SVG?

• Photos should be PNG.
• Logos in headers can be PNG or SVG, depending on how the header is set up. Most website themes will have an integrated shrinking motion for headers. If not, use SVG.
• Animated illustrations should be SVG if you need them to be scalable. GIF if you want them to stay the same size.
• Icons should be SVG if you want them to scale with the screen sizes and PNG if they will stay the same size.

Last Thoughts

Knowing when to use what file type is key to growing as a designer in any field. Not just for yourself but also to educate your clients. That’s why at Flaticon and Storyset, we give you all the options. We know that you are working on all sorts of projects, and we want to support you in the best way possible.

Now that you know the difference between PNG and SVG, do you feel more confident in your choices when downloading graphics and adding them to your projects? Leave us a comment below.