use FontAwesome icon in svg without external files

Issue

I need to create an SVG (with PHP and/or Javascript) where some of the SVG Elements are icons from FontAwesome, but: without external dependencies (like: importing an css file, etc.).

I found this stackoverflow question, which is a similar topic, but does not fit my problem, because there are external dependencies, like adding FontAwesome (CSS Files) at the webpage where the svg is shown.

The difference is, that I need an All-in-one SVG, where all the necessary FontAwesome definition are part of the svg, because the user should be able to download the generated SVG to continue working on it with an svg viewer or editor.

Is there a way, to put the definition of (for example) one "Font Awesome" icon into one svg?

I found this (probably) list of svg informations. So it looks like, the icon paths are available as SVG code. So how can I use this in an svg?

---

//Update: I found the following example, but I don't know, how to include the FontAwesome definition and how to access an icon :-(

<?xml version="1.0" standalone="yes"?>
<svg width="100%" height="100%" version="1.1"
 xmlns = 'http://www.w3.org/2000/svg'>
  <defs>
    <font id="Font2" horiz-adv-x="1000">
      <font-face font-family="Super Sans" font-weight="normal" font-style="italic"
          units-per-em="1000" cap-height="600" x-height="400"
          ascent="700" descent="300"
          alphabetic="0" mathematical="350" ideographic="400" hanging="500">
        <font-face-src>
          <font-face-name name="Super Sans Italic"/>
        </font-face-src>
      </font-face>
      <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
      <glyph unicode="!" horiz-adv-x="300"><!-- Outline of exclam. pt. glyph --></glyph>
      <glyph unicode="@"><!-- Outline of @ glyph --></glyph>
      <!-- more glyphs -->
    </font>
  </defs>
</svg>

Solution

Your example is an SVG Font and it doesn't work on IE or Firefox. You need to encode FontAwesome as a data URI and embed as a @font-face if you want it to work everywhere:

<svg width="500" height="200" version="1.1" xmlns = 'http://www.w3.org/2000/svg' xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 200">  
    <defs>
      <style type="text/css">
        @font-face {
          font-family: 'FontAwesome';
          src: url(data:font/opentype;base64,[...]) format('opentype');
        }
      </style>
    </defs>
    <rect x="0" y="0" height="100" width="500" fill="#eee" />
    <text x="20" y="50" font-family="FontAwesome" font-weight="normal" font-size="32">
      &#xf007
    </text>
  </svg>

Replace the [...] with the base64 encoded version of the font. You can upload a .ttf or an .otf file to a base64 service or the command line openssl base64 -in <infile> -out <outfile>.

If you want to subset the FontAwesome's library you can head to icomoon http://icomoon.io/app/#library and add the FontAwesome library. Then select the icons you need, download the zip, then upload the ttf to a base64 encoding service such as this http://www.opinionatedgeek.com/dotnet/tools/base64encode/ and paste the resulting string to your src: font-face declaration.

Answered By - methodofaction