在svg中使用FontAwesome图标，而不使用外部文件 [英] use FontAwesome icon in svg without external files

问题描述

我需要创建一个SVG（使用PHP和/或Javascript），其中某些SVG元素是来自 FontAwesome ，但是：没有外部依赖（如：导入css文件等）。

我发现这个stackoverflow问题，这是一个类似的主题，但不适合我的问题，因为有外部依赖，例如在显示svg的网页添加FontAwesome（CSS文件）。 / p>

不同的是，我需要一个All-in-one SVG，其中所有必要的FontAwesome定义都是svg的一部分，因为用户应该能够下载生成的SVG继续使用svg查看器或编辑器处理它。

有一种方法，将一个Font Awesome图标一个svg？

我发现这（可能）svg信息列表。所以它看起来像，图标路径可用作SVG代码。

---

//更新：我发现了下面的例子， t知道，如何包括FontAwesome定义和如何访问图标： - （

 <？xml version =1.0 standalone =yes？> 
< svg width =100％height =100％version =1.1
 xmlns ='http://www.w3.org/ 2000 / svg'> 
< defs> 
< font id =Font2horiz-adv-x =1000> 
& Super Sansfont-weight =normalfont-style =italic
 units-per-em =1000cap-height =600x-height =400
 =700descent =300
 alphabetic =0mathematical =350ideographic =400hanging =500> 
< font-face-src> 
< font-face-name name =Super Sans Italic/> 
< / font-face-src> 
< / font-face> 
& glyph>< path d =M0,0h200v200h-200z/>< / missing-glyph> 
< glyph unicode =！horiz-adv-x =300> - 惊叹号。 pt。 glyph  - >< / glyph> 
< glyph unicode =@><！ -  @ glyph  - >< / glyph> 
<！ - 更多glyphs  - > 
< / font> 
< / defs> 
< / svg> 
  

解决方案

您的示例是一个SVG字体，在IE或Firefox上工作。您需要将FontAwesome编码为数据URI，并嵌入为 @ font-face ，如果您希望它在任何地方都可以使用：

 < svg width =500height =200version =1.1xmlns ='http://www.w3.org/2000/svg'xmlns：xlink =http://www.w3.org/1999/xlinkviewBox =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 =0y =0height =100width =500fill =＃eee/> 
< text x =20y =50font-family =FontAwesomefont-weight =normalfont-size =32> 
&＃xf007 
< / text> 
< / svg> 
  

取代 [...] base64编码版本的字体。您可以将.ttf或.otf文件上传到base64服务或命令行 openssl base64 -in< infile> -out< outfile> 。

如果要将FontAwesome库子集化，可以转到icomoon http://icom.on/app/#library 并添加FontAwesome库。然后选择所需的图标，下载zip，然后将ttf上传到base64编码服务，如 http：// www.opinionatedatedek.com/dotnet/tools/base64encode/ ，并将结果字符串粘贴到 src： font-face声明。

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 an similarly topic, but not fits my problem, because there are external dependencies, like adding FontAwesome (CSS Files) at the webpage where the svg is shown.

The different 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 who 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>

解决方案

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.

这篇关于在svg中使用FontAwesome图标，而不使用外部文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！