PNG vs. SVG.

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

File sizes.

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.

Compression.

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.

Photography.

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.

Web use.

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.

Animation.

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

Transparency.

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.

1. Open Adobe Illustrator.
2. Click File > Open and select your image from your computer.
3. Click Open.
4. Click the Trace option from the top menu and select Image Trace.
5. Tune the conversion to your specifications — this could include altering the colour.
6. After the process is complete, select your trace image and click Ungroup. This will separate your colour shapes.
7. Click File > Export.
8. Save your file as an SVG.

1. Open Adobe Photoshop.
2. Click File > Open.
3. Select your SVG file from your computer.
4. Click Export > Export As > PNG.
5. Save your file as PNG.