The Future of Icons is SVG

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.

At this point I’m sure you have heard about font icons. You know, these icons everybody uses nowadays for social networks or just about anything a designer can think of.

font-icons-set

On our website we use them too, they’re great. Lightweight, easily customizable with CSS and specially retina ready. They will look good on any device.

tbscg-font-icons

They have some issues

Font Icons are not all that great. The styling can be tricky in some situations, they depend on styles such as:

font-size, line-height, vertical-align, letter-spacing, word-spacing

Also, in some cases they might look different depending on the client browser. As the font icons are treated as text.

Let’s kick it up a notch

On the scale of cool-web-tricks regarding graphics we have the following:

  1. Images: stay away from me.
  2. Font Icons: we’ve had a good time.
  3. SVG Icons: hello, gorgeous!

Some font icon packs already include an SVG version of the font that will be served to compatible browsers. That’s not what I want to introduce today though, I’d like to show you a more manual control over those SVG’s. Simply throwing a bunch of fonts into the project is not how the cool kids do it.

Take a look at what’s possible:

svg-vs-font

More love from SVG’s

Regarding accessibility SVG support you can use title and desc tags:

<svg xmlns=http://www.w3.org/2000/svg>
 <title>Circle</title>
 <desc>Large red circle with a black border</desc>
 <circle cy="60" r="55" stroke="black" stroke-width="2" fill="red" />
</svg>

Also, the compression by gzipping SVG’s is better than compressing fonts. However, SVG’s tend to be bigger. You’ll have to take decisions when using large set of icons, it will depend on the project and requirements.

Hang on to something, here comes your first SVG

Because I don’t want to go easy on you we’ll start with a big fat SVG:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve" 
 width="200px" height="200px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;">
 <g>
 <g>

 <path class="first" d="M50.077,98.919l-2.78-1.024c0.219-2.027,0.147-4.093-0.234-6.146l2.684-1.237c1.677-0.771,2.412-2.765,1.639-4.441
 l-1.567-3.4c-0.772-1.676-2.763-2.413-4.437-1.641l-2.688,1.239c-1.313-1.627-2.837-3.023-4.519-4.176l1.026-2.775
 c0.638-1.731-0.25-3.661-1.98-4.301l-3.515-1.298c-1.677-0.617-3.68,0.305-4.298,1.979l-1.025,2.778
 c-2.025-0.216-4.091-0.146-6.146,0.233L21,72.024c-0.772-1.676-2.765-2.412-4.439-1.641l-3.403,1.565
 c-1.676,0.773-2.41,2.768-1.64,4.441l1.237,2.684c-1.624,1.315-3.023,2.839-4.174,4.523l-2.774-1.026
 c-1.675-0.624-3.681,0.3-4.302,1.979l-1.297,3.515c-0.309,0.84-0.273,1.749,0.1,2.561c0.376,0.812,1.044,1.43,1.88,1.735
 l2.78,1.028c-0.22,2.024-0.148,4.094,0.234,6.146l-2.687,1.237c-1.676,0.771-2.41,2.763-1.639,4.438l1.568,3.404
 c0.772,1.675,2.763,2.411,4.438,1.638l2.687-1.235c1.313,1.626,2.836,3.021,4.52,4.174l-1.026,2.777
 c-0.312,0.838-0.276,1.745,0.1,2.559c0.371,0.812,1.041,1.432,1.879,1.743l3.515,1.296c0.836,0.31,1.747,0.273,2.559-0.099
 c0.813-0.375,1.43-1.043,1.738-1.882l1.027-2.779c2.025,0.22,4.093,0.147,6.147-0.231l1.235,2.685
 c0.772,1.674,2.766,2.41,4.44,1.638l3.402-1.566c1.678-0.771,2.413-2.763,1.639-4.439l-1.237-2.685
 c1.626-1.314,3.024-2.838,4.173-4.52l2.778,1.027c0.841,0.311,1.75,0.272,2.563-0.103c0.81-0.374,1.426-1.042,1.736-1.879
 l1.297-3.515C52.695,101.488,51.807,99.56,50.077,98.919z M31.669,107.662c-1.754,0.809-3.615,1.216-5.533,1.216
 c-5.152,0-9.872-3.022-12.025-7.697c-3.052-6.631-0.144-14.507,6.483-17.559c1.753-0.809,3.614-1.217,5.529-1.217
 c5.151,0,9.875,3.021,12.029,7.697C41.204,96.733,38.295,104.609,31.669,107.662z"/>

 <path class="second" d="M83.179,108.5l-1.547-0.569c0.123-1.129,0.082-2.28-0.131-3.423l1.494-0.689c0.935-0.428,1.344-1.538,0.913-2.473
 l-0.872-1.894c-0.432-0.935-1.539-1.346-2.471-0.914l-1.497,0.689c-0.73-0.905-1.58-1.685-2.515-2.325l0.57-1.546
 c0.355-0.964-0.14-2.037-1.103-2.396l-1.958-0.722c-0.934-0.346-2.048,0.168-2.394,1.102l-0.571,1.548
 c-1.126-0.121-2.278-0.081-3.421,0.13l-0.688-1.493c-0.432-0.934-1.541-1.345-2.474-0.914l-1.895,0.873
 c-0.934,0.432-1.342,1.54-0.913,2.473l0.689,1.495c-0.905,0.732-1.684,1.581-2.326,2.519l-1.544-0.57
 c-0.931-0.347-2.049,0.165-2.394,1.101l-0.724,1.958c-0.171,0.468-0.15,0.975,0.055,1.427c0.21,0.45,0.583,0.795,1.049,0.966
 l1.547,0.572c-0.123,1.129-0.083,2.278,0.13,3.423l-1.495,0.688c-0.934,0.431-1.343,1.538-0.913,2.472l0.874,1.896
 c0.429,0.932,1.538,1.343,2.471,0.913l1.495-0.688c0.731,0.905,1.581,1.683,2.519,2.323l-0.571,1.545
 c-0.174,0.468-0.154,0.975,0.055,1.427c0.208,0.451,0.579,0.797,1.048,0.971l1.956,0.722c0.467,0.172,0.972,0.152,1.425-0.056
 s0.797-0.58,0.968-1.046l0.571-1.55c1.129,0.123,2.278,0.084,3.423-0.129l0.688,1.495c0.43,0.932,1.539,1.343,2.471,0.911
 l1.896-0.872c0.934-0.432,1.342-1.538,0.912-2.472l-0.688-1.496c0.904-0.731,1.684-1.578,2.323-2.516l1.547,0.57
 c0.468,0.175,0.975,0.152,1.428-0.056c0.449-0.207,0.795-0.581,0.967-1.047l0.722-1.957
 C84.636,109.932,84.141,108.856,83.179,108.5z M72.929,113.37c-0.977,0.448-2.012,0.677-3.08,0.677
 c-2.868,0-5.497-1.684-6.696-4.287c-1.7-3.69-0.082-8.077,3.61-9.775c0.976-0.45,2.012-0.677,3.079-0.677
 c2.867,0,5.496,1.682,6.696,4.285C78.236,107.284,76.618,111.668,72.929,113.37z"/>

 <path class="third" d="M118.269,49.597l-4.673-1.725c0.369-3.407,0.248-6.882-0.393-10.337l4.514-2.077c2.816-1.294,4.052-4.647,2.754-7.468
 l-2.634-5.718c-1.298-2.819-4.646-4.059-7.461-2.759l-4.519,2.084c-2.208-2.735-4.771-5.082-7.596-7.02l1.723-4.668
 c1.072-2.911-0.418-6.155-3.328-7.229l-5.909-2.186c-2.818-1.036-6.186,0.515-7.228,3.33l-1.724,4.673
 c-3.405-0.366-6.881-0.245-10.333,0.391l-2.08-4.51c-1.298-2.819-4.646-4.056-7.465-2.758l-5.72,2.634
 c-2.818,1.299-4.055,4.65-2.759,7.466l2.083,4.513c-2.731,2.211-5.083,4.773-7.02,7.603l-4.665-1.724
 c-2.815-1.049-6.188,0.504-7.23,3.324l-2.181,5.912c-0.521,1.41-0.46,2.938,0.166,4.304c0.634,1.364,1.758,2.403,3.163,2.917
 l4.673,1.73c-0.371,3.403-0.25,6.882,0.392,10.335l-4.514,2.078c-2.819,1.299-4.053,4.645-2.756,7.461l2.635,5.724
 c1.298,2.813,4.646,4.054,7.463,2.755l4.515-2.08c2.208,2.735,4.771,5.083,7.602,7.019l-1.726,4.669
 c-0.524,1.407-0.463,2.936,0.167,4.303c0.626,1.364,1.751,2.406,3.159,2.929l5.909,2.179c1.409,0.521,2.938,0.461,4.303-0.164
 c1.367-0.63,2.404-1.754,2.922-3.163l1.729-4.675c3.404,0.371,6.879,0.25,10.336-0.389l2.076,4.512
 c1.298,2.814,4.648,4.056,7.466,2.755l5.72-2.634c2.821-1.3,4.054-4.646,2.755-7.464l-2.079-4.513
 c2.732-2.213,5.084-4.771,7.017-7.601l4.672,1.729c1.411,0.521,2.94,0.459,4.307-0.171c1.362-0.628,2.398-1.753,2.919-3.159
 l2.184-5.911C122.671,53.914,121.178,50.67,118.269,49.597z M87.322,64.294c-2.95,1.357-6.078,2.046-9.301,2.046
 c-8.663,0-16.597-5.082-20.22-12.945C52.669,42.249,57.559,29.007,68.7,23.876c2.947-1.359,6.077-2.045,9.297-2.045
 c8.662,0,16.601,5.079,20.224,12.94C103.351,45.92,98.463,59.163,87.322,64.294z"/>
 </g>
 </g>
</svg>

Ok now, don’t be scared, it won’t bite you. This code could be inline in the HTML or on a separate .svg file.

This SVG was probably generated with a desktop software, Illustrator or something similar. Although, if you need how they work you could code basic forms by hand.

If you take a deeper look you’ll see each path has a class. We’ll use them to style it like so:

.first {
 fill: green;
}

.second{
 fill: red;
}

.third {
 fill: blue;
}

With SVG you can even use stroke-width and stroke to style the border of each element:

 stroke: #c0392b;
 stroke-width: 2px;

svg-icon-stroke

Beautiful.

Final thoughts

There is no SVG support in IE8 and in some old Android browsers. If needed, detect the browser and create a fallback.
In the other hand, if you need old browsers and you don’t actually need the extra customization SVG has to offer, stick with font icons. Once your clients drop IE8 from their requirements, you can do the upgrade.

Did you know about SVG icons? Are you using them already?

iconic-svg-icons

Is your web presence mobile-friendly?

Recent changes on the Google search algorithm means this is more important than ever. A mobile-friendly website needs to be the core of your marketing strategy, helping you raise the awareness of your organization’s products and services.

According to Morgan Stanley Research; in 2015 the number of global mobile users exceeded the number of global desktop users by almost 200 million and this trend is increasing.
USage

From 21st April 2015 Google also rolled-out a mobile-friendly update. This means Google is giving a special ranking to mobile-friendly-pages on mobile-search results and mobile searchers can find quality and relevant results from mobile-friendly pages.

You can check if your URL is mobile-friendly through Google’s Test

At the moment 50% of the web traffic comes from mobile devices. After the introduction of the new algorithm if your site is not mobile-friendly there might have been a decrease in the mobile traffic originated from Google search and some potential customers will not see you in search results.

Once your site is mobile-friendly Google will automatically re-process your pages, or you can even speed up the process by manually re-indexing your URL with the webmaster tools Fetch as Google with submit URL to index.