You’re reading all articles tagged 'svg'

Friday Linkage: Iconfonts, Grunticon and SVG tools

17 Jan 2014

I’ve now completed a few icon projects for clients where the deployment method has been a font. It’s a fairly painful process, but a great way of providing resolution independent graphics to all sorts of browsers, including as far back as IE4. The alternative has been SVG sprites, which work, and allow multiple colours, but to me have been even more of a pain to implement.

Something I hadn’t considered a problem until recently, was font-face support on mobile, which of course iconfonts rely on. Ian Feather (Front End Developer at Lonely Planet) wrote about this in Ten reasons we switched from an icon font to SVG.

The Filament Group have done a lot of work on this, and their research showed that the top 5 browsers without font-face support have a user base that can’t be ignored:

Opera Mini 261 million
Nokia XPress browser 70 million
Blackberry 4 & 5 – stock browser 20 million
Android 2.1 – stock browser 10 million
Windows Phone 7 – 7.8 10-15 million

These user numbers are estimates, but the total number of devices that don’t support font-face is around 370 million. This may or not affect your project – at least one of my clients uses the iconfont within an self-contained application, and it will never be viewed in any browser. Thankfully, the Filament Group also provide two solutions:

Bulletproof Icon Fonts – if you have to use icon fonts, here’s a way to implement them with fallbacks.

Grunticon – takes a folder of SVG/PNG files, and outputs them to CSS in 3 formats: svg data urls, png data urls, and a third fallback CSS file with references to regular png images, which are also automatically generated. So you can avoid the hassle of working out sprite positions and still get each icon setup with a class name, just as you would with an iconfont tool like IcoMoon. I haven’t had a play with this yet, but it looks very promising indeed!

Finally, a very useful tool if you’re exporting SVG from something like Illustrator, is svgo ui, an easy drag and drop front end to the svgo command tool for optimising file sizes. I find I save on average about 30% on my icon files!


SVGWeb Brings SVG Support to Internet Explorer


Instagram Hickstagram

  • 21 Oct 2018

    Common Darter Dragonfly

  • 20 Oct 2018

    Inktober Day 20: quick doodle without planning in pencil or looking at reference, which is usually a bad idea. Your turn @hicksmade! #inktober #inktober2018 #leighandjondoinktober

  • 20 Oct 2018

    Morning dog walk. Even the wheelie bins looked good in this light

  • 20 Oct 2018

    Inktober Day 19. Following @hicksmadeā€™s marshmallows with more marshmallows šŸ¤Ŗ #inktober #inktober2018 #leighandjondoinktober #ghostbusters #staypuft

  • 18 Oct 2018

    Inktober Day 18. When @hicksmade did a prawn I was sure she was setting me up to do cocktails! #inktober #inktober2018 #leighandjondoinktober #cocktails

  • 18 Oct 2018

  • 18 Oct 2018

  • 18 Oct 2018

    Inktober day 17 . @hicksmadeā€™s pen led me onto squid and their ink shooting abilities. I also found out that a part of the squids anatomy is called a ā€˜penā€™. #inktober #inktober2018 #ink #leighandjondoinktober

  • 16 Oct 2018

    Inktober day 16 ā€œThe Pilotā€ - a response to @hicksmadeā€™s barber shop poster. Experimenting with a different style on this one #inktober #inktober2018 #leighandjondoinktober #pilot

  • 15 Oct 2018

    Inktober Day 15. @hicksmadeā€™s staircase led me to this. There must be a hairdressers somewhere called this? #inktober #inktober2018 #leighandjondoinktober #hairwaytosteven

Contact us

Call Jon on +44 (0)7917 391536, email or tweet @hicksdesign.

Alternatively, pop in for tea and cake at the studio…

Hicks
Wenrisc House
Meadow Court
Witney, OX28 6ER
United Kingdom