All over the web, we’re still seeing tons of PNG and JPEG pictures (Raster based graphics).

We see this regularly even on brand new websites built in 2021!

They are being used for so many things – logos and icons seem to be the main offenders.

Why are we even still using them?

Most people are using these old formats for compatibility reasons, but this typically isn’t an issue any longer.

See the chart below for current browser support.

SVG Browser Support
Browser Compatbility Chart Courtesy of caniuse.com

As you can see browser support is surprisingly is extremely good with only the oldest not supporting SVG file formats, there is very little reason to continue using raster-based graphics these days. There is support pretty much across the board except for IE9 and Android V3 – which are extremely old and really – are no longer used by almost anyone.

PNG & JPEG, your time is up!

I’m joking it’s not quite that serious, raster-based images do still have their uses – find out more below.

If you aren’t familiar with the SVG file format they are scalable vector-based graphics, an XML-based image format for two-dimensional graphics.

We’ve put together a list of 5 key reasons why you should be using SVGs over PNG and JPEG below.

So! Now that we know the difference, let’s get through the reasons you should be capitalising on using SVGs and ditching the 1990 era pixels.

1. Resolution

The reader’s screen size, the amount of zoom, the resolution or “retina” displays are irrelevant when it comes to SVG files. Because SVGs are vector-based – containing paths, shapes and fills. This means the images can be scaled infinitely.

This is typically standard practice in industries when producing artwork for print! Company branding material/brochures use these vector-based image formats extensively.

Using PNG or JPEG files means you are restricted to the laws of pixels – disgusting, right? That’s very 1990’s.

When catering to high-resolution devices with these image formats people typically compensate by having two different files for lower and higher resolution – hardly sounds efficient, does it?

Typically the higher resolution file always tends to have a huge file size too.

I’ve put pictures below to demonstrate the resolution issue (you can zoom in with ctrl/cmd + your mouse wheel). Alternatively, you can right-click on the images and open them in a new tab.

Take a look for yourself.

SVG:

svg example 2
SVG Image Example

PNG 8:

PNG Image Example
PNG Image Example

JPG:

JPEG JPG image example
JPG Image Example

2. Efficiency

As we said above, PNGs and JPGs can weigh in with some hefty file sizes. (Although we’ve optimised our examples using kraken.io’s free image optimizer) – especially when catering to high-resolution devices.

As you are probably aware – the larger the file size the slower it is to load & render. PNGs are primarily used when transparency is required on the image which further increases the file size.

These higher file sizes really do hurt website performance metrics like Lightspeed & GTmetrics.

SVGs in comparison, are just code, which generally means very small file sizes.

There are circumstances when SVGs can take a while to load however for example – if you made an extremely detailed image (let’s say tower bridge in London) with millions of paths and files – in this situation it’d be best suited to use JPG or PNG image.

More specifically for websites:

This leads to talk about HTTP requests, using traditional PNGs typically mean the image has to be referenced as an external resource. This increases the amount of “resources” on various online tests like Lighthouse & GTmetrics and generally means a slower site as a result.

Not only are SVGs smaller in size but the XML can be embedded in line with your HTML eliminating the need for additional HTTP resource requests and in turn, speeding up your site.

3. Animation

SVGs can also incorporate animation and be styled with CSS. Animations typically used in HTML can also be used on SVG elements. Some instances also require JavaScript but we won’t go into that in this article.

If you’d like more information on this take a look over at SnapSVG.io.

They provide a great way to create interactive, resolution-independent vector-based graphics.

4. Practicality

SVGs can be used for practicality in many ways on the web, from creating logos to full-scale physics engines right inside a browser (crazy I know). My needs are much more simple however, I’ll be sticking to logos, icons and simple animations I think!

There are many ways SVGs can be used on the web, from displaying logos to a full-on physics engine in browser madness. I’m in the former camp, my needs are generally needing logos, icons, and simple animations in SVG format.

Logos: Logos should usually be vector-based and for good reason. If you were to go to a marketing company with a raster-based (pixel) image you’d soon see their face drop due to the struggle they will have with sizing it correctly while keeping it looking crisp and smooth.

The amazing thing about vector-based SVGs is once it is created you can use it anywhere! Without the worry of sizing or resolution. The same can be said for icons too.

Graphs: Graphics can also be used as a good example when it comes to SVGs – graphs are very simple shapes at their base form and it lends itself perfectly to using vector-based formats.

5. Accessibility and SEO

Google actually indexes SVGs which is great news for us web folk! SVG content when embedded content in HTML or even independent files are both indexed by the mighty SEO god.

There are some (mostly irrelevant) downsides however and in the interest of fairness, I’ll share them with you.

You could potentially face some compatibility issue’s with older browsers though these really should be far and few between these days. Additionally, it is possible to have a fallback method in place with PNG replacements if the browser doesn’t have support.

Google index’s SVGs, which is good news. SVG content whether it is in a standalone file or embedded directly in HTML is indexed.

Additionally, as we touched on earlier some complicated artwork with thousands of paths and fills is probably still going to be best suited to JPG or PNG formats – Browsers trying to render complex SVGs can really struggle.

I guess to sum it up, SVGs are best suited for low intensity uses such as small uncomplicated pictures, logos and icons.

To throw an additional spanner in the works there is also an image format called “WebP” that has been developed by Google. I have excluded it from this article in the interest of keeping things simple but it’s been designed as an alternative to JPG, PNG and GIF file formats as an altogether more efficient and flexible solution.

The future of image file formats and compression is a bright one for sure!

FAQ

What are the disadvantages of SVG images?

They cannot support as much detail as other formats, since SVGs are based on points paths and fills instead of pixels, they can’t display as much detail as the more standard image formats. Sometimes (in rare circumstances) they also don’t work well with older legacy browsers)

What are SVGs typically used for?

Mostly SVGs are used for simple images like logos, charts and more simple images, this is due to the fact that scaling them doesn’t produce any pixelation

How do I use an SVG?

Typically they are created from a program such as Adobe illustrator, SVG-edit, Vector Paint, Vectr and many others.

Which is faster SVG, PNG or JPG

Typically SVG is faster but this typically depends on image complexity