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.
Learn more about AI files
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.
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.
PNG vs. SVG files: frequently asked questions.