Close Form

Have An Upcoming Project? Call 301.656.1144 We would love to discuss how we can help!

Thanks for the business! A representative will contact you within 24 hours.

SVG + Icon Fonts: Retina Ready Goodness

April 18, 2017

Retina displays are here. Or for those who don’t know what that is, high-resolution screens. And what we’ve been typically using as web designers and developers to serve content to normal screens just isn’t cutting it anymore. I won’t get into serving high-res photos today, as that’s been discussed at length by many other smart folk already.

I’m going to focus on the other type of imagery we use in websites day-to-day: logos and icons. The large image above is, as you guessed it, the BrowserMedia logo (where I tinker). But it’s not being served in the traditional manner of a <img> tag, although it will default back to this if the browser a user is using does not support the <svg> tag.

SVG: Eh?

The <svg> format, scalable vector graphic, has been around for many a year, but it’s been relatively ignored for most of its life. IE 5 actually introduced this tag to the world, but for whatever reason, it never really took off in wide usage. Adobe Illustrator has offered this format for a good while as well; although to be honest I just ignored it for most of my life. The long name says it all: vector and scalable. For anyone with a decent amount of print experience or knowledge, vector is a very good thing, and something the web has been lacking. Basically, you can increase or decrease the size of the file as you need, and the image never loses any of its crispness.

So, for those of who’ve used a retina display before, we’ve no doubt seen many blurry logos on many websites. This is because the display is scaling up the image file that’s being served for the logo and it is a bitmap file, which inherently does not scale without getting very pixelated and blurry. For example, here’s the logo currently—regular and zoomed in 3 times:

Now, try zooming in (or out) on the svg logo at the top of the page. Zounds! It scales and still looks sexy. So, next time you start a web project, give ol’ <svg> a chance. Another plus is that if your users are viewing your site(s) in supported browsers & you add a bit of JS trickery (see below), then you’ll be saving them an http request, which is a huge deal for them; so they’ll thank you for this as well 1.

But, how do we make sure that we’re not serving those unsupported browsers a blank screen? Enter a bit of JavaScript, or simpler yet, a library like Modernizr. If you use Modernizr, just call it and specify what elements you’d like to check support for:

if (Modernizr.svg) {
	// good to roll
} else {
	var src = $('#fallback'); // d'oh, show an image
	src.attr('src', src.attr('data-src')); // load the image now

That’s it for the JS. Then just add some CSS declarations—for the svg and for the fallback image.

And What About These Icons?

Icons have been used for as long as man has had the power of the pen, so it only makes sense to focus on these as much as a sites logo. Fortunately, some smart, talented folks have created some icon fonts2 for to be able to use to serve scalable, stylable icons to do with what we wish. Just like <svg>, these icons are in a scalable format, and regardless of pixel density, will always look sharp.

One of the major pluses is we can apply any of the same styles that we’d normally apply to any type; including any CSS3 goodness you might craft. Possibly the best part is that we don’t need to create cumbersome CSS sprite images with multiple instances of the icon and maintain the positioning; which is just poopy. Using these with a few new HTML5 data attributes makes them accessible, unobtrusive, simple to add, and, honestly, fun.

For browsers that don’t understand how we style them (antyhing inside our CSS declarations for [data-icon]:before), they will simply ignore these as if they were not there; which some standardistas might complain about, but overall it’s a really good approach.

Check out some simple examples of how to use these:

  • An Email Icon
  • A Red Icon
  • A Big Icon
  • Where’d I Go?
  • A Linky Poo

How do we add these to a page? Super simple:

The basic HTML:
<span aria-hidden="true" data-icon="A"></span>

And the basic CSS:
[data-icon]:before { font-family:'Pictos'; content:attr(data-icon); }

So, What Are You Waiting For?

Nothing; or at least almost nothing. There are no real downsides to using SVG 3 (provided you use a fallback solution for those unfortunate users) and font icons. And whatever issues there are now, most browser maker realize the power of these technologies, and are working on fixing these in the near future 4.

More and more and more and more, users are first reaching for their mobile device. Some probably don’t even use a desktop anymore, and if they do, it’s not very often. So, why not take a few simple and easy steps to make your site more usable and enjoyable for these users? Get on it.

1 In this instance, I’m serving the SVG as an image, so I’m not saving this request, but by serving the proper mime type, you can inline this and save the request. 2 In this case, I’m referring to Drew Wilsons custom typeface Pictos. There are others for sure, but this is my face of choice. 3 Some great references for which browsers today support SVG natively. 4 I can’t for sure about this, but it certainly seems this way from what I read.

BrowserMedia, LLC

1424 K Street Northwest
3rd Floor
Washington, DC 20005
K StreetK StreetMcPherson SqMetro Station