PNG vs. SVG.
If you’re working with high-quality digital logos and graphics, you might consider saving your files as PNG or SVG. Both are versatile formats with high resolutions, even at a large scale. Learn about the main differences between PNG and SVG, as well as how to use each file type.
What you’ll learn.
- What is a PNG file?
- What is an SVG file?
- What is the difference between PNG and SVG files?
- PNG vs. SVG files: frequently asked questions
What is a PNG file?
PNGs (Portable Network Graphics) are raster-based files. They feature high resolutions, lossless compression, transparency and the ability to handle 16 million colours. This makes them an excellent choice for graphics, logos, charts and illustrations — as well as very detailed photographs. Due to the large file sizes associated with PNG files, they’re not ideal for online photos.
What is an SVG file?
Scalable Vector Graphics (SVGs) work well for logos and graphics because you can scale them up or down for different purposes. They’re also a popular choice in web design because search engines like Google can read their XML programming language. This helps with SEO and website rankings.
Unlike PNGs, SVGs are vector-based. This means that they use mathematical algorithms to display images, which you can then scale to any size without negatively affecting their quality.
What is the difference between PNG and SVG files?
There’s a lot of crossover between PNG and SVG. Find out what sets them apart.
Raster vs. vector.
Perhaps the most fundamental difference between PNG and SVG is that one is a raster file type and the other is vector.
A PNG is a raster — that is, pixel-based — image format. If you scale up a raster image too far, it becomes grainy and pixelated. Similarly, if the image is too small, it can become indistinct. While PNGs are capable of handling very high resolutions, they’re not infinitely expandable.
On the other hand, SVG files are vector-based — built from a complex mathematical network of lines, dots, shapes and algorithms. They can expand to any size without losing their resolution.
Find out more about raster vs. vector
PNG file sizes are often large so that they can handle high resolutions. Their size means they can take longer to process, share, save and open. It can also slow down page loading times — which is why JPEGs are more common for online photography. There is, however, a smaller 8-Bit PNG variant, but it can only support 256 colours.
SVGs are far smaller in size than PNGs and aren’t likely to slow down your computer or website. (However, very detailed designs may slow down an SVG.) Because they’re a vector file format, you can scale SVGs up or down without any loss in quality.
SVGs offer lossless compression — which means they’re compressible to smaller file sizes at no cost to their definition, detail or quality.
PNGs also benefit from lossless compression of 5-20%, which can help to make up for their large file size. However, they’re still likely to be larger than an SVG.
PNG files aren’t a common choice for web photos, as discussed above. However, they can handle very detailed, high-quality digital photos for print, editing and other purposes. They’re a common file format in Adobe Photoshop.
SVGs, on the other hand, don’t use pixels — so they struggle to display photography at a high standard.
Both PNG and SVG files can display intricate levels of detail for web graphics, illustrations, logos, infographics and tables.
However, SVG has a key advantage with its XML programming language. This means that each SVG file on display is written in text, rather than code. As a result, screen readers and search engines can analyse them — so they’re great for accessibility and SEO purposes.
SVG files are also usually smaller, which makes them quicker to load on a page. Page loading times are another critical element of search engine rankings.
PNG also supports some text-based graphics — but not to the same extent.
Compatibility and complexity.
SVGs are considered a more advanced file type than PNGs, but they’re not actually compatible with every browser and operating system. Additionally, their programming language and vector-based composition can be unfamiliar and intimidating to new users.
PNGs, on the other hand, are a standard online format that receives wide support from web browsers and operating systems.
PNG files don’t support animation — unlike a similar raster-based image file, the GIF.
SVG files do support animation, but not as readily as other file types like the AI Adobe Illustrator native format.
PNGs and SVGs support transparency — so they’re both excellent choices for online logos and graphics.
It’s worth noting that PNGs are one of the best choices for a raster-based transparent file. If you’re working with pixels and transparency, PNGs are a better option than SVGs.
PNG vs. SVG files: frequently asked questions.
How do I convert a raster image to SVG?
To convert a standard raster image file like a JPEG or PNG to a vector-based SVG, follow these simple steps:
- Open Adobe Illustrator.
- Click File > Open and select your image from your computer.
- Click Open.
- Click the Trace option from the top menu and select Image Trace.
- Tune the conversion to your specifications — this could include altering the colour.
- After the process is complete, select your trace image and click Ungroup. This will separate your colour shapes.
- Click File > Export.
- Save your file as an SVG.
How do I convert an SVG to PNG?
Follow these simple steps to convert your SVG file to PNG using Adobe Photoshop:
- Open Adobe Photoshop.
- Click File > Open.
- Select your SVG file from your computer.
- Click Export > Export As > PNG.
- Save your file as PNG.
What’s the best vector file for print?
There are several excellent vector files for print use, so your choice depends on the document. PDFs are the most versatile vector format for everyday print use. For large-scale print jobs, you might choose an SVG or AI.
Should I use a PNG or JPEG?
JPEG’s lossy compression and 24-Bit colour set it apart as the go-to image file for web photos. However, JPEGs aren’t as detailed as PNGs when it comes to printing. Also, JPEGs don’t have the same scalability or definition — so they’re not the best choice for logos and graphics.
What’s the difference between a PNG and a GIF?
While they’re both standard raster file formats across the web, a PNG is essentially the next-generation version of a GIF. Yet there are still several differences between them For example, PNGs don’t support animation.
Do size limits apply to PNG and SVG files?
PNG files have a limit of 2,500 megapixels. There are no limits to the size of vector files, including SVGs.
Compare PNGs and SVGs with other file types.
GIF vs. PNG
Learn why PNG is the next-gen GIF — and if it’s right for your next project.
Get Adobe Illustrator
Create beautiful vector art and illustrations.
7 days free, then A$29.99/mo incl. GST.