Add SVG icons to the footer

by on 19 January 2018 in release-notes

I’ve been meaning to switch out the old PNG icons on the site for a while. Inline SVG icons are better because they look crisper, can be controlled using CSS and have some performance gains.

User story

As a user, I need icons to help me recognise social links, so that I can spot links easily and be confident in where they’ll take me.

Acceptance criteria

What’s changed

Old HTML

<i class="icon icon-social icon-instagram">
<span class="visuallyhidden">Instagram</span>
</i>

New HTML

<span class="icon">
<svg width="25" viewBox="0 0 25 25">
<g role="img" aria-labelledby="twitter-icon-title">
<title id="twitter-icon-title">Twitter</title>
<path d="M7.8 22.6c8 .1 14.6-6.3 14.6-14.3v-.9c1-.7 1.8-1.6 2.5-2.7-.9.4-1.9.7-3 .8a4.7 4.7 0 0 0 2.2-2.8c-1 .6-2.1 1.1-3.2 1.3a5.1 5.1 0 0 0-7.3-.2c-1 1-1.6 2.3-1.6 3.7l.1 1.1C8.2 8.4 4.4 6.5 1.7 3.3a5 5 0 0 0 1.5 6.8c-.7 0-1.5-.2-2.2-.6v.1c0 2.4 1.7 4.6 4.1 5.1-.7.2-1.5.2-2.3.1a5 5 0 0 0 4.8 3.5 10.5 10.5 0 0 1-6.4 2.2H0c2.3 1.4 5.1 2.1 7.8 2.1"/>
</g>
</svg>

</span>

Performance

  • File size is reduced from 1.05 KB to 500 bytes
  • There is one less http request because we don’t need to load an external image