Font-awesome: SVG Icons

[miljan-aleksic]

Hi!

I would like to propose for consideration moving the fonts to SVG. That would allow editing the icons in real time, adding very precise effects and so much more as you probably know.

I'm aware it's a big task, but wondering if there is any reason why this could be not such a good idea.

[tagliala]

You are suggesting to abandon the font-face implementation in favour of pure svg?

[miljan-aleksic]

Yes, but SVG are more perfomance expensive and the transition would breake up current integrations. I would suggest support both, font-face by default plus providing the SVG source file when requiring special icon interaction.

The SVG code to display the flag icon would look like, after proper source file loaded, as:

<svg viewBox="0 0 32 32">
    <use xlink:href="#icon-flag">
</svg>

The conversion from font to SVG is possible, the current icon creation workflow would not change.

[tagliala]

nice, is there any tool to convert from .svg font file to that format?

[miljan-aleksic]

In theory they are, online ones as well, but if this topic gain interest could investigate deeper and set some testing.

[tagliala]

@RushPL (one of the authors of https://github.com/CodeCharmLtd/Font-Awesome-SVG-PNG)

[tagliala]

Will that fire a notification to @RushPL? I would like his suggestions about this option

[miljan-aleksic]

Yes, it should.

Seems very cool what he got there! Definetly, let's see what he had to say :)

[Rush]

Looks interesting .. so as I understand FontAwesome-SVG-PNG should generate kind of a bundle with all glyphs with proper ID assigned?

[tagliala]

a kind of svg sprite?

http://www.sitepoint.com/use-svg-image-sprites/

[miljan-aleksic]

This article well ilustrates all the SVG advantages and the sprite tehnique, or similar one.

[tagliala]

IE 9+

fffff!

[Rush]

[email protected] will generate a spritesheet with --sprites argument. Also a static version is available on github: https://github.com/CodeCharmLtd/Font-Awesome-SVG-PNG/blob/master/sprites.svg

[Rush]

One note maybe, you need to use this like this:

<svg class="icon" width="32" height="32" viewBox="0 0 2304 2304">
    <use xlink:href="#fa-github-square" fill="red">
</svg>

[Rush]

Actually the viewBox here behaves a bit strangely .. anyway please test. Simple test shown 1800 to work well.. I have no idea why.

[tagliala]

@RushPL thanks!

I will wait for @miljan-aleksic 's feedback

btw I don't know if you are using semver. In that case, since you introduced a new feature, you should bump the minor and reset the patch ([email protected]) and maybe add a tag so tagged versions are displayed here: https://github.com/CodeCharmLtd/Font-Awesome-SVG-PNG/releases

[Rush]

Thanks, good points, done.

[miljan-aleksic]

Impressive @RushPL, this opens a whole new world of experimentation, let's see where it leads. I could think of a JS plugin loading the SVG, allowing to append the icons, change them, animate, interact...

Really cool, thanks guys!

[Rush]

I would very much welcome such a plugin if it would allow to create nice looking SVG effects simply by composing of css classes and possibly setting some data- attributes. Let me know if you need any additional help from my part.

[mattboehm]

+1 . We've got a web application currently using Bootstrap/FontAwesome, but have to support users whose security policies do not allow the downloading of custom fonts. I was planning on using the SVG sprite sheet mentioned above and was hoping there would be some way to switch to it with minimal code edits.

I've been playing with it for a while now, but as different icons are different width/height, I currently need to tweak the viewbox for each set of dimensions.

It's possible that I'm doing something stupidly though, and that there is some universal combination of viewBox and preserveAspectRatio that will work universally.

[Rush]

@mattboehm It is done in https://github.com/CodeCharmLtd/Font-Awesome-SVG-PNG

[iegik]

Here I create SVG Font Viewer: http://jsfiddle.net/iegik/r4ckgdc0/
Actually, Its get d attribute from <glyph/> tag and creates new SVG with <path/> tag.

There are few reasons to using SVG Font as main repository file:

• SVG files may be converted to web fonts using grunt-webfont
• easy to maintain icons changes
• easy to maintain class-names with glyph-name attribute

[iegik]

<svg class="icon" width="32" height="32" viewBox="0 0 2304 2304">
    <use xlink:href="#fa-github-square" fill="currentColor">
</svg>

http://css-tricks.com/cascading-svg-fill-color/

[Rush]

@iegik Cool stuff! :) Especially the fill color. Does it work across the browsers?

[tagliala]

@iegik thanks for sharing

[edouard-lopez]

+1

And another article in favour of SVG icons: Inline SVG vs Icon Fonts.

[Schweinepriester]

+1

[kieranmorrissey]

+1

[ghost]

+1

[konfuzed]

As I commented at https://github.com/encharm/Font-Awesome-SVG-PNG/pull/11#issuecomment-195034397 changing to SVG symbols for the sprites and setting the viewBox on each symbol will alleviate the issues as run into above, where the viewBox is being set in the svg usage rather than as the default essentially. https://github.com/CodeCharmLtd/Font-Awesome-SVG-PNG defaults everything to 0 0 origin and the 1792 em units as per the font, and I'd guess it's something that might be corrected via SVGO settings, but haven't had time to dig through them.

But if not in the SVGO run due to only having the font defaults for em and ascent sizing available, perhaps there's a step further back in the font production which could help with setting the viewBox easier for creating sprites.

[sanek4life]

+1

[mattboehm]

For what it's worth, here's a Microsoft blog post where they suggested disabling custom fonts: https://blogs.technet.microsoft.com/srd/2011/12/13/more-information-on-ms11-087/ . I think this is what's triggered multiple organizations to mandate that custom fonts are disabled.

I've run into this problem 3 times so far in my career and always fixed it with the fontawesome svg-png repo mentioned above. I've yet to find a pure css solution. For others looking to implement this workaround, here's a gist to get you started: https://gist.github.com/mattboehm/3525b5090c5568207daa09c35ae1e895

[leungwensen]

If you are ready to use SVG icons, you should check this out: http://leungwensen.github.io/svg-icon/#awesome not only Font-Awesome, there are more than 10,000 SVG icons out of the box.

[tagliala]

I think this has been addressed in Font Awesome 5 and I'm going to close here