usa l'icona FontAwesome in svg senza file esterni

Question

Ho bisogno di creare un SVG (con PHP e/o Javascript) dove alcuni degli elementi SVG sono icone da FontAwesome, ma: senza dipendenze esterne (come: importazione di un file css, ecc. .).

Ho trovato la domanda di stackoverflow this, che è un argomento simile, ma non si adatta al mio problema, perché ci sono dipendenze esterne, come l'aggiunta di FontAwesome (file CSS) alla pagina web in cui viene mostrato lo svg.

Il diverso è che ho bisogno di un SVG tutto in uno, in cui tutte le definizioni FontAwesome necessarie fanno parte dello svg, perché l'utente dovrebbe essere in grado di scaricare l'SVG generato per continuare a lavorare su di esso con un svg spettatore o editore.

C'è un modo, per mettere la definizione di (ad esempio) un'icona "Font Awesome" in uno svg?

Ho trovato this (probabilmente) lista di informazioni svg. Quindi sembra che i percorsi delle icone siano disponibili come codice SVG. Quindi, chi posso usare questo in un SVG?

---

// Aggiornamento: Ho trovato il seguente esempio, ma non so, come includere la definizione FontAwesome e come accedere un'icona :-(

<?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> 

Answer 1

Il vostro esempio è un . SVG carattere e non funziona su IE o Firefox è necessario codificare FontAwesome come dati URI e incorporare come @font-face se si vuole farlo funzionare ovunque:

<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> 

Sostituire la [...] con la versione codificata base64 del font. È possibile caricare un file .ttf o .otf su un servizio base64 o sulla riga di comando openssl base64 -in <infile> -out <outfile>.

Se si desidera impostare il sottoinsieme della libreria FontAwesome, è possibile andare su icomoon http://icomoon.io/app/#library e aggiungere la libreria FontAwesome. Quindi seleziona le icone di cui hai bisogno, scarica il file zip, quindi carica il file TTF su un servizio di codifica base64 come questo http://www.opinionatedgeek.com/dotnet/tools/base64encode/ e incolla la stringa risultante sulla dichiarazione di font-face src:.