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 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 each type of file.
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 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 our post about how to open an SVG file, 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 the 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…head on over to our Peace, Love, and Soap post and download this exact file for free.
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 its 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. What is a Mock-Up? This post will give you a great introduction to what they are and how to use them to show off your files.
Another great way to use PNG files is for sublimation.These 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 it.
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!
Club Chaos
Inside Club Chaos, we release brand new SVG files and project tutorials every single month. If you love the designs here on our blog, I am confident you will adore the ones inside the Club! In addition to monthly designs and tutorials, you also gain access to fonts, community, and a sisterhood of crafters. Learn more about Club Chaos.
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 the project is you are working on.
- Adhesive or heat transfer vinyl – SVG
- Working with stencil vinyl – SVG
- 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 the difference between SVG and PNG file types is.
I can’t wait to see what you create next! ‘Til next time, happy crafting, cutting, and chaos!
-Michelle
