Icon fonts vs. SVG

Icon fonts vs. SVG

Tim Hunt -
回帖数:9
Core developers的头像 Documentation writers的头像 Particularly helpful Moodlers的头像 Peer reviewers的头像 Plugin developers的头像

If you have not already seen this article, you might be interested in it:

http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/

平均分:Useful (2)
回复Tim Hunt

Re: Icon fonts vs. SVG

Jason Hardin -

For backwards browser support and caching there is also the option to convert the svg file (just xml after all) into base64 and add it to the url in a CSS file. This is supported in IE 8 and allows IE to scale the svg image in all versions as well.  It has the drawback of making the CSS file larger,  but can be a single file load and be cached.

I don't know if the base64 version works with the concept of SVG classes that allows you to change the color of icons using CSS.

It is a definitely a good article and well argued.

回复Tim Hunt

Re: Icon fonts vs. SVG

David Scotson -
It certainly makes things easier when you simply decide not to send most of the icons to IE8. But it's good that someone's out there finding and fixing all the problems with rolling new technologies out into production.
回复Tim Hunt

Re: Icon fonts vs. SVG

Stuart Lamour -
Plugin developers的头像

For feature icons there is lotsa fun you can do with svgs, including animating paths with css.

Quick fun illustrating different branding colours applied to svg :

http://stuartlamour.com/mrooms/fun/allthesvg.html

(yeh - you will probably need to use a v.modern browser 微笑

But for generic icons, i think i still prefer to use an icon font.

 

 

回复Stuart Lamour

Re: Icon fonts vs. SVG

Gareth J Barnard -
Core developers的头像 Particularly helpful Moodlers的头像 Plugin developers的头像

Warning, the above post ^^^^^^^^^ contains flashing images, you may need to put on shades before you are hypnotised 微笑.

回复Gareth J Barnard

Re: Icon fonts vs. SVG

Stuart Lamour -
Plugin developers的头像

lolz, i slowed it down...

command plus or whatever for full effect and bonus point to who can spot where the little grades stamp may have some from....

回复Stuart Lamour

Re: Icon fonts vs. SVG

David Scotson -
The date one doesn't look as nice as the others. I'm suspecting a font issue due to me being on Ubuntu? (Though I don't see any flashing either so it may just be my version of Firefox is too old).

It seems like no-one talks about VML any more, has it just gone out of fashion or is it not up to the task of being a polyfill for SVG in IE8?
回复David Scotson

Re: Icon fonts vs. SVG

Stuart Lamour -
Plugin developers的头像

oops - thanks david - the cal icon is trying to use a webfont which i include in the theme, but didn't in the demo.

Also found a fun way to make the cal icon show the current date. Which is nice.