Update svg-sprites.svg syntax

[calvinjuarez]

I feel like the svg-sprites.svg file could do with a syntax update. Chris Coyier wrote a really good article about the syntax called SVG symbol a Good Choice for Icons. In it he describes this pattern for the svg sprite file:

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="fa-glass" viewBox="0 0 1792 1792"><path d="..."></symbol>
  ...
  <symbol id="fa-medium" viewBox="0 0 1792 1792"><path d="..."></symbol>
</svg>

Reasons:

As Chris points out, there are some very good reasons for going with this markup style.

• It could open the doors for some really great accessibility (with the <title> and <desc> tags)
• The viewBox attribute should make consistent sizing very easy.
• "This is probably what <symbol> was invented for anyway."

I get that this will increase the file size (because of repetition over 519 icons), but GZIP eats this kind of character repetition for breakfast, so the performance hit shouldn't be all that severe.

Alternatively, all the <paths> could be wrapped inside a <defs> tag, which should hide things properly, and the <svg> itself could just be set to display: none;. Like so:

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <defs>
    <path id="fa-glass" d="...">
    ...
    <path id="fa-medium" d="...">
  </defs>
</svg>

[nikgavalas]

So I've implemented this in by forked branch if you want it. Great suggestion. The icons show up more consistently centered and sized

https://github.com/nikgavalas/Font-Awesome-SVG-PNG

[calvinjuarez]

@nikgavalas Nice work! Would it affect #29 at all?

[Rush]

@nikgavalas Could you do a PR?

[calvinjuarez]

@nikgavalas @Rush Did this ever move?