sử dụng biểu tượng FontAwesome trong svg không có tệp bên ngoài

Question

Tôi cần tạo SVG (với PHP và/hoặc Javascript) trong đó một số yếu tố SVG là biểu tượng từ FontAwesome, nhưng: không phụ thuộc bên ngoài (như: nhập tệp css, v.v. .).

Tôi đã tìm thấy this câu hỏi về lưu lượng truy cập stackover, nhưng không phù hợp với vấn đề của tôi, vì có phụ thuộc bên ngoài, như thêm FontAwesome (CSS Files) tại trang web nơi hiển thị svg.

Điểm khác biệt là tôi cần SVG tất cả trong một, tất cả định nghĩa FontAwesome cần thiết là một phần của svg, vì người dùng có thể tải SVG đã tạo để tiếp tục làm việc với svg người xem hoặc người chỉnh sửa.

Có cách nào không, để đặt định nghĩa (ví dụ) một biểu tượng "Phông chữ tuyệt vời" thành một svg?

Tôi đã tìm thấy this (có thể) danh sách thông tin svg. Vì vậy, có vẻ như, các đường dẫn biểu tượng có sẵn dưới dạng mã SVG. Vì vậy, những người tôi có thể sử dụng này trong một svg?

---

// Cập nhật: tôi tìm thấy ví dụ sau đây, nhưng tôi không biết, làm thế nào để bao gồm các định nghĩa FontAwesome và làm thế nào để truy cập vào một biểu tượng :-(

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

dụ của bạn là một . SVG Font và nó không hoạt động trên trình duyệt IE hoặc Firefox bạn cần phải mã hóa FontAwesome như một dữ liệu URI và nhúng như một @font-face nếu bạn muốn nó làm việc ở khắp mọi nơi:

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

Thay [...] với phiên bản mã hóa base64 của phông chữ. Bạn có thể tải lên tệp .ttf hoặc .otf lên dịch vụ base64 hoặc dòng lệnh openssl base64 -in <infile> -out <outfile>.

Nếu bạn muốn đặt thư viện FontAwesome, bạn có thể truy cập icomoon http://icomoon.io/app/#library và thêm thư viện FontAwesome. Sau đó chọn các biểu tượng bạn cần, tải xuống mã zip, sau đó tải ttf lên dịch vụ mã hóa base64 chẳng hạn như http://www.opinionatedgeek.com/dotnet/tools/base64encode/ và dán chuỗi kết quả vào tờ khai tuyên bố phông chữ src: của bạn.