10

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>
Akshay
  • 926
  • 9
  • 21
The Bndr
  • 13,204
  • 16
  • 68
  • 107

1 Answers1

16

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.

valentine
  • 57
  • 1
  • 8
methodofaction
  • 70,885
  • 21
  • 151
  • 164
  • Thank you. That works great. Amazing: why you know such special things? Greeting to Playa del Carmen. By the way: nice place there! :-) – The Bndr Aug 23 '13 at 18:58
  • An additional question to your answer: the base64 encoded stuff @ fontawesome.css will add all the icons. Is there a way to add only one icon? (your answer works, this additional question is more nice to have, to keep the files small) – The Bndr Aug 23 '13 at 19:02
  • I've updated the answer to allow subsetting of FontAwesome's library. If you need to do this numerous times then you'd need a command line script to accomplish. Thanks for the greetings, much appreciated in this uncaring craft :) – methodofaction Aug 26 '13 at 14:30
  • Unfortunately, this gist is no longer available – Andrew Eisenberg Sep 18 '14 at 23:06
  • Thanks @AndrewEisenberg I've included instructions to encode it yourself. – methodofaction Sep 19 '14 at 17:00