użyj ikony FontAwesome w svg bez plików zewnętrznych

Question

Potrzebuję utworzyć SVG (z PHP i/lub Javascript), gdzie niektóre z elementów SVG są ikonami z FontAwesome, ale: bez zewnętrznych zależności (np .: importowanie pliku css, itp. .).

Znalazłem this pytanie stackoverflow, które jest podobnym tematem, ale nie pasuje do mojego problemu, ponieważ istnieją zewnętrzne zależności, takie jak dodanie FontAwesome (Pliki CSS) na stronie internetowej, na której pokazano SVG.

Różnica polega na tym, że potrzebuję SVG typu all-in-one, w którym wszystkie niezbędne definicje FontAwesome są częścią svg, ponieważ użytkownik powinien mieć możliwość pobrania wygenerowanego SVG, aby kontynuować pracę nad nim za pomocą svg przeglądający lub redaktor.

Czy istnieje sposób, aby umieścić definicję (na przykład) jednej ikony "Font Awesome" w jednym svg?

Znalazłem this (prawdopodobnie) listę svg informacji. Wygląda na to, że ścieżki ikon są dostępne jako kod SVG. Więc kto może użyć tego w svg?

---

// Update: Znalazłem następujący przykład, ale nie wiem, jak to definicję FontAwesome i jak uzyskać dostęp do ikony :-(

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

Twój przykład jest . SVG Font i nie działa na IE lub Firefox trzeba kodować FontAwesome jako URI danych i osadzić jako @font-face jeśli chcesz pracować wszędzie:

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

Wymień [...] z kodowaną czcionką base64. Możesz przesłać plik .ttf lub .otf do usługi base64 lub linii poleceń openssl base64 -in <infile> -out <outfile>.

Jeśli chcesz dokonać podzbioru biblioteki FontAwesome, możesz przejść do icomoon http://icomoon.io/app/#library i dodać bibliotekę FontAwesome. Następnie wybierz potrzebne ikony, pobierz zip, a następnie prześlij plik ttf do usługi kodowania base64, takiej jak ta http://www.opinionatedgeek.com/dotnet/tools/base64encode/ i wklej wynikowy ciąg do swojej deklaracji typu "twarz czcionki" o wartości src:.