Skip to main content
Topic: SVG vs FontAwesome icons (Read 3578 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

SVG vs FontAwesome icons

Just curiosity, but are there any vantages using svg files instead of font awesome icons?

as far as I know svg is a vector format, or better a free vector format. I understand well the difference from an image and a vector image... FontAwesome are just font icons, which are loading fast. I know some browsers like Opera doesn't support FontAwesome, but beside this are any other vantages?

Thank you in advance
sorry for my bad english


Re: SVG vs FontAwesome icons

Reply #2

SVG is scalable, hence good if you are planning to use it on big screen. Scalability has always been an advantage of SVG.As for desktop monitors and small screen devices we use with Elk, I am not SVG gives any benefits over font awesome which is delivered through a CDN.

Re: SVG vs FontAwesome icons

Reply #3

I've watched the video that you've attached. It's very interesting, I would never have thought that some users could have such difficulties. (and that they would modify fonts for themselves)

Last time, when I was trying to use svg for a logo, there was lot of hassle to export it right and add colour. but definitely a good thing to consider. A biggest point for me is, that all the icons have to be done separately, or through the list with icon id, where the support isn't the greatest.

Re: SVG vs FontAwesome icons

Reply #4

Quote from: radu81 – I know some browsers like Opera doesn't support FontAwesome
For the record, Opera/Presto has supported web fonts since version 10, including SVG web fonts (which Firefox does not). It's Opera Mini which doesn't download web fonts for obvious reasons.

Other advantages? Well, using icon fonts is kind of a hack with preciously few advantages:

1. It works on IE8. I'm glad we're properly in the post-IE8 era now. I haven't personally catered to it in over half a decade, beyond the obvious aspect that nothing's really broken in it anyway because of progressive enhancement. What I mean is that if IE8 doesn't get the full experience, that's okay. I suspect IE8 is the primary reason icon fonts ever took off in the first place.
2. Likely fewer HTTP requests.
3. Easy to change colors through CSS. This can be really, really neat though. To me this is the only advantage worth serious consideration. It's not that SVG can't do this, but you'd need to make sure to make your SVG images link to an external CSS file or perform some JS inline image replacement or something to easily do the same thing otherwise. Basically it requires more planning for SVG.
4. Performance in inferior browsers cough*WebKit*cough when you use a lot of icons.

SVG's primary "advantage" (rather, what makes icon fonts such a stupid hack) is that SVG is an image. Proper semantics. Proper accessibility. No weird sizing or positioning issues. No unexpected fallbacks.[1] You can tinker with it by hand.

Quote from: meetdilip – SVG is scalable, hence good if you are planning to use it on big screen. Scalability has always been an advantage of SVG.As for desktop monitors and small screen devices we use with Elk, I am not SVG gives any benefits over font awesome which is delivered through a CDN.
Fonts are also vectors — well, except for bitmap fonts.

Quote from: CrimeS – I've watched the video that you've attached. It's very interesting, I would never have thought that some users could have such difficulties. (and that they would modify fonts for themselves)
Funny how our worlds differ. :) I consider the fact that everyone wants to experience the web their way a self-evident truth.
And hey, let's not forget about the PICTURE element with PNG fallback. Works in a heck of a lot more browsers than icon fonts…
Last Edit: April 19, 2016, 05:18:28 am by Frenzie

Re: SVG vs FontAwesome icons

Reply #5

Thanks for your explanation, it's more clear now to me. And yes Opera Mini, not Opera as I said ;)
sorry for my bad english