The Difference between SVG and PNG File Types

The Difference between SVG and PNG File Types Explained and Why It Matters Which One You Use

If you are like me, when someone starts mentioning file formats, acronyms, phrases like the difference between SVG and PNG, and other computer-ish jargon you get a little glazed over in the eyes.  You might even begin daydreaming about your next creative project that you want to begin crafting.  Trust me, I totally get it!

I’m here to tell ya though, (in a tough love kind of way)… SNAP OUT OF IT friend… at least for the next few minutes.  I’m going to share a few helpful tips about the difference between SVG and PNG file formats in relation to your cutting machine.  I promise it will make your crafting life so much easier!   While yes, both file types can be used with Silhouette and Cricut machines, the files are by no means created equal.  

In order to create that awesome project you are dreaming about in your head, you need to first know the difference between these two file types.  So perk up, and let’s dive in!

 

Before we can get to the difference between the two file formats, we must first understand what each of the files are to begin with.    

What is an SVG File

The first file type that you have probably heard most commonly talked about in cutting machine crafting groups and online, is SVG files.  The acronym SVG stands for Scalable Vector Graphic.  In the most basic terms that means you can size up the file as big as you want and it will never get pixelated or blurry on your screen.  You might also hear this type of file just called a vector graphic for short.

SVG files are perfect to use with cutting machines because they can have layers.  Depending on how the design is created will determine how many layers are in the file.  You can ungroup, divide, and cut different colors and layers without having to trace a single thing.  Your machine will automatically read the lines of the file when you send it to cut.   An SVG is basically a 3-D image that you can easily bring to life with a cutter.  You will never have to trace an SVG file. 

Already feeling a little over your head?  Take one step back and head over here where I share exactly step by step, how to open an SVG file in your cutting software.  It’s not as scary as it sounds.  Promise!

What is a PNG File

Next up let’s talk about PNG file types.  The acronym stands for Portable Network Graphic.  Let me translate, that means this image and file type can eventually get pixelated (or blurry).  If the PNG is not saved at a high resolution or if you stretch the image out too large it will turn fuzzy.  PNG files are also referred to as raster graphics or images. 

Just like an SVG file, that we talked about above, our cutting machine programs will open this PNG format.  Most designers, including myself, also always include this format inside their file downloads.  So this is where it gets a little confusing.  Unlike an SVG file, a PNG file DOES NOT have cut lines inside the file.  When you send it to cut you will only see an outline of the entire image, not the individual layers.  The file itself is flat.  You can not ungroup or move layers around (remember it doesn’t have any) to cut in different colors. 

How to Tell the Difference

If you have a file open and go to select cut lines, and it is only highlighting a box around the image instead of the lines of the image themselves you probably have a PNG file open instead of the SVG.  Let me show you what I mean.

Here is what it will look like inside of Silhouette Studio when you send the two different file types to cut.  Notice the outline on the PNG vs the cut lines on the SVG:

 

In Cricut Design Space the prompts when you first upload the file even look a little different.  When selecting the PNG file format you will be asked these questions (that don’t pop up when you upload the SVG version). 

 

If you continue to upload the PNG (or print and cut image) you can see on your layers panel on the right side on the bottom, that the SVG has individual elements you can manipulate.  The PNG print file is all one flat image and only one element in your layers panel.

 

On a side note… if you like the design used in this example above (peace, love, and soap) it is a freebie on our blog that you can download here.

Another way to spot the difference is in the original file folder.  Let’s take a closer look.

This is a screenshot of that same file from up above inside it’s folder, unzipped and ready to use.  This is viewing the contents of the folder in details mode.  From this view it is really easy to see which file format is which.  Be cautioned though… sometimes the SVG document may say HTML document.  The HTML document is the SVG file and the one you will probably want to use with your project.

When To Use What?

Now that we know the difference between an SVG and PNG image you might be wondering to yourself…, why would I ever use a PNG file with my cutting machine if it doesn’t actually have cut lines?  So glad you asked!  Let me give you a few ideas!

As I eluded to above, PNG files are great for print and cut.  Projects like making stickers or printable vinyl are the perfect way to use PNG files.  Not having to deal with all the layers and elements in an SVG file format are one of the main reasons you would want to use the PNG instead.

Next are mock up images.  PNG files typically have a transparent background which makes them perfect for mock ups.  You don’t have to mess with the elements of the design moving, shifting, or getting out of place while arranging the image digitally on the shirt.  Below is a mock up of that same file from above in the post.  Learn more about what exactly a mock up is here.

 

Another great way to use PNG files are for sublimation.  Learn all about sublimation here.  Theses file types are also so fun to design.  They can have tons of layers as you design since you will flatten the image before saving.  You don’t have to worry about any elements being too small for your machine to cut and you can get tons of shading and patterns on the file!  Here is an example of a PNG file for sublimation from inside our club.

 

Check out this quick guide of all the things we have talked about that explains the difference between SVG and PNG.

 

Quick Guide

At the end of the day both files have a spot when crafting with your cutting machine.  The file type you use really depends on what the project is you are working on.

• Working with adhesive or heat transfer vinyl – SVG
• Working with stencil vinyl – SVG
• Working with printable vinyl – PNG
• Working and printing for sublimation – PNG
• Making paper cards or flowers – SVG
• Making stickers for your planner – PNG

Hopefully this has helped clear the fog for you of exactly what is the difference between SVG and PNG files.  Also know you know when to use what on your cutting machines.

I can’t wait to see what you create next!  ‘Til next time, happy crafting, cutting, and chaos!

-Michelle