5 reasons you should be using SVGs over PNGs

5 min read
Jonny Pathan
An SVG Icon

For some reason, we’re still seeing plenty of PNGs (raster graphics file format) on the web, even on spanking new websites built in 2016! Things like logos and icons seem to be the main culprits. I suppose the question is why? Why do we still use them? Unless you’re using them as a fallback on ancient browsers, your time is up.

We’ve put together 5 key reasons to use SVGs over PNGs. SVGs if you don’t know are Scalable Vector Graphics, an XML-based image format for two-dimensional graphics. SVG is supported in all browsers, except IE 9 and lower and old Android (V3).

Right, now that we know the difference, let’s get through the reasons you should be using SVGs.

In a nutshell:

  1. Resolution
  2. Speed
  3. Animation
  4. Practicality
  5. Accessibility and SEO

Carry on reading for an in-depth look at each point.

1. Resolution

It doesn’t matter about your screen size, zoom level, resolution or whether or not you have a ‘retina’ display. SVG is vector based, paths, shapes and fills. This allows for infinite resolution, much like when creating artwork for print and using shapes, the same principles apply!

Using PNGs means you are restricted to pixels, urghh, that’s so 2001. Also, a lot of the time you need to cater for ‘retina’ devices, meaning you have two PNGs, one with almost always an absurd file size too.

These two icons below can demonstrate resolution problems, zoom in (cntrl/cmd + ‘+’) and take a look yourself, or just right click and open each item in a new tab. If you can’t do either of those, have a little play of the video below where I zoom in…

SVG Icon
PNG Icon
SVG vs PNG Gif

2. Speed

Touched on above, PNGs can weigh in at large file sizes, usually when catering for HDPI displays. As you know, the larger the file size, the slower it is to render/load. People tend to use PNGs when they require transparency in their images, transparency in an image = stupid file size. Stupid file size = Longer loading times. SVGs are just code, which means very small file sizes. There are instances when SVGs can take a life time to load, for example, if you’ve made the Eiffel Tower as a vector graphic with a million paths and fills, best to use a JPEG… or PNG.

Image option icon

HTTP requests: Using traditional PNGs means that, unless you base64 encode, the images have to be referenced as external resources. All those PNGs means an increase in http requests and thus a slower site. SVGs are not only smaller in filesize, but the XML can be embedded inline to your HTML, eliminating http requests and speeding up your site.

3. Animation

SVGs can be animated and styled with CSS. Animations (transformation/transition) that you use on HTML elements can also be used on an SVG element. There are instances where you can’t use CSS to animate SVGs but these instances can usually be covered with JavaScript, have a look at snap.svg (The JavaScript SVG library for the modern web.)

This opens up a whole world of creativity when it comes to the web, I’ve popped in an example of a SVG animation to give you an idea of what’s possible:

4. Practicality

There are many ways SVGs can be used on the web, from displaying logos to 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.

One of the former watb Logo's

Logos: Logos are usually vector based, and rightly so. Give someone from a print background a raster based logo and just watch their face melt. The beauty here is, you could define an SVG document as your logo and then use it wherever you like without worrying about size, resolution or load times. The same factors apply for icons too. Also, creating responsive logos: See our article on modern logo requirements here to find out more about responsive logos: Modern Logo Requirements

Graphs: Yes, graphs… SVGs are great at vector shapes, lending itself to things like infographics and graphs very well indeed.

Animations: See point 3

Cool stuff: Ok, not so practical, but there are some cool things you can do with SVG, check out this video below with a masking effect using an SVG:

5. Accessibility and SEO

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

Downsides:

In the interest of fairness, here are a couple of points to consider when using SVGs.

You’ll have problems with trying to use SVGs with old browsers, having said that, you can have a fallback in place such as PNG replacements.

Complicated artwork with thousands of nodes is probably best suited to JPEGs, browsers trying to render complicated SVGs can have a meltdown.

Overall, as it stands, SVGs are best used for low intensity artwork; logos, icons and simple graphics.

Helpful resources:


SVG on the web: A practical guide

How to make sure your SVG’s have height and width attributes using Illustrator CC

Social Media Management Software

In order to promote your business and reach consumers that spend an entire 24 hours a week online, you need to make sure that you have a viable social media strategy in place.

By posting unique and interesting content on your social media platforms, and by actively engaging with followers, you can start to turn this into a funnel for generating leads.

In order to stay on top of your social media strategy, it’s important to have some form of social media management software to do some of the heavy lifting. Software such as this is imperative for scheduling, tracking and monitoring social media content.

At its best, social media management software can help you not only plan your content months in advance, but also remain reactive by letting you tune into ongoing news stories or trending topics.

Screenshot of Hootsuite's homepage

We recommend: Hootsuite

There are a whole bunch of social media management companies out there and all of them offer roughly the same sort of package but Hootsuite is the only one that offers an actually free service (as opposed to just a free trial period).

They do try to hide it on their website though so make sure you follow this link in order to get to the right page.

The free version of this software lets you:

  • Manage up to three social media profiles from a choice of channels including Facebook, Twitter, Instagram, Pinterest and LinkedIn
  • Schedule up to 30 posts in advance at any point in time
  • Track follower growth, likes and comments
  • Integrate two RSS feeds in order to find and share compelling content
  • Access Hootsuite’s online help center and community forum

Of course, there’s also a number of paid-for packages that you can buy from Hootsuite that give you access to a great number of services including higher ad spend budgets, automated post scheduling and custom analytics.

But if you’re a small business looking to get started, the free version of the software should be comprehensive enough to allow you to get your social media strategy in motion.

Website Tracking Software

We’ve said before that the secret to a successful lead generation strategy is to keep analysing and refining your methods. Well, website tracking software is the best way to conduct this analysis.

By digging into the analytics of your visitors’ actions, you can start to gain a better picture of why people come to your site, what they want from it, what they dislike about it and how you can improve upon their experience next time.

There are a wide variety of services that can fall into the category of website tracking software, including heatmaps, funnels, user polls, surveys, visitor recordings and more.

Basically, any kind of software that collects data about the ways in which your visitors interact with your site can be considered website tracking software.

Screenshot of Hotjar's homepage

We recommend: Hotjar

Whereas there are a multitude of smaller software companies that focus in on just one website tracking service, Hotjar offers an array of useful tools.

Hotjar tools include:

  • Click, move, scroll, download and share heatmaps that can also be split by device type
  • Visitor recordings that allow you to replay sessions of real site visitors
  • Conversion funnels that identify on which page and at which step the most visitors are leaving your site
  • Form analysis that can help you to discover which fields take too long to fill, which are left blank and why your visitors abandon your form and page
  • A customizable widget that allows you to create pop-up feedback polls
  • Responsive surveys that can be distributed through web links and emails, or featured your site just before your visitors abandon the page in order to discover what their concerns are
  • The ability to recruit test users in order to get instant feedback on your site

Hotjar’s free service is able to collect data from 2000 page views a day and will give you access to up to 300 visitor recordings and 3 heatmaps, forms, funnels, polls and surveys. Unlimited users can be added to your account and Hotjar will also store your data for a full year.

While we’d normally recommend free services when possible, it’s probably worth paying for Hotjar’s Plus plan to begin with.

For just under £25 a month you can collect data from 10,000 page views a day and have unlimited services and reports. Plus there’s even a 15-day free trial for you to test out whether you like their software or not.

Remember

Lead generation doesn’t have to be an expensive endeavour.

What’s important is that you put real effort into all of your interactions with potential leads - whether that’s through educational and informative blog posts, social media interactions or even just a chat on the phone.

If you believe in your business’ ability to help its customers then all you have to do is let that shine through.

Ultimately, these tools are just there to help you meet potential leads on their level. The rest is up to you.

Related Posts

Posts you may also like