Я створив власну піктограму Facebook за допомогою Inkscape і зберег її як svg. Він використовує той самий шрифт, що і назва моєї сторінки, в якому використовується шрифт "ubuntutitling-bold-webfont", на який я посилався як .woff у файлі CSS. Заголовок функціонує, але svg - ні, він відображає "f" в якомусь шрифті за замовчуванням. Файл шрифту розміщений за адресою ../fonts/ubuntutitling-bold-webfont.woff у відношенні до CSS та файлу зображення, а також у шрифтах / ubuntutitling-bold-webfont.woff у відносності до веб-сторінки.

Я знаходжу як я можу вставити веб-шрифти Google у SVG? , але я трохи розгублений у тому, як застосувати код до SVG, якщо мені це навіть потрібно. Чи може SVG використовувати шрифт .woff, на який посилається у файлі CSS? Чи правильно я змінив шрифт у файлі SVG вручну?

Ось код для SVG:

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="80"
   height="80"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.3.1 r9886"
   sodipodi:docname="New document 1">
  <defs
     id="defs4" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="1"
     inkscape:cx="26.573808"
     inkscape:cy="42.478414"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     fit-margin-top="0"
     fit-margin-left="0"
     fit-margin-right="0"
     fit-margin-bottom="0"
     inkscape:window-width="1619"
     inkscape:window-height="611"
     inkscape:window-x="165"
     inkscape:window-y="301"
     inkscape:window-maximized="0" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0.75006053,-981.36219)">
    <rect
       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
       id="rect2987"
       width="70"
       height="70"
       x="4.2499394"
       y="986.36218"
       rx="10"
       ry="10" />
    <text
       xml:space="preserve"
       style="font-size:109.44319916px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:#fffffe;stroke-width:2.73607969;stroke-opacity:1;font-family:ubuntutitling-bold-webfont';-inkscape-font-specification:ubuntutitling-bold-webfont'"
       x="25.989071"
       y="1096.0118"
       id="text3757"
       sodipodi:linespacing="125%"
       transform="scale(1.0381556,0.96324674)"><tspan
         sodipodi:role="line"
         id="tspan3759"
         x="25.989071"
         y="1096.0118"
         style="stroke-width:2.73607969">f</tspan></text>
  </g>
</svg>

Спасибі заздалегідь.

У defsрозділ потрібно поставити CSS . Щось на зразок:

<defs>
  <style type="text/css">
    @font-face {
      font-family: Delicious;
      src: url('../fonts/font.woff');
    }
  </style>
</defs>

Щоб завантажити Google або будь-який інший зовнішній форнт у SVG-файл, нам потрібно додати тег стилю в тег defs таким чином:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="246" height="272" xml:space="preserve"><desc>Your description</desc>

<defs>
<style type="text/css">@import url('http://fonts.googleapis.com/css?family=Lobster|Fontdiner+Swanky|Crafty+Girls|Pacifico|Satisfy|Gloria+Hallelujah|Bangers|Audiowide|Sacramento');</style>
</defs>

Редагувати: я перечитав ваше запитання ... здається, що найкращим варіантом може бути перетворення тексту у вашому значку в контур, тому він зовсім не потребує шрифту. (Можливо, вам доведеться перевірити ліцензію на ваш шрифт, щоб побачити, чи це нормально.)

Я неправильно припустив, що у вас є векторний значок, і ви шукаєте найкращий спосіб відобразити його на своєму веб-сайті.

Я думаю, у вас є кілька варіантів.

Використовуйте зображення SVG

Ви можете просто використовувати SVG як зображення. Ви втратите підтримку старих версій IE, але ви можете поміняти PNG або GIF на IE8 та новіші версії. Або не турбуватися про підтримку IE8 та старіші (може бути, а може і не бути варіантом, залежно від вашої цільової аудиторії).

Використовуйте генератор шрифту Білка

У білки шрифту є генератор @ шрифту для обличчя, який робить все важке підйом для вас, якщо у вас вже створений шрифт.

Білок шрифту @ генератор шрифту

Використовуйте зображення PNG

Чому ви використовуєте SVG? Це для кращого збільшення та високої підтримки DPI? Якщо так, то є способи зробити це за допомогою CSS та PNG. Це дійсно залежить від призначення.

Я не прихильник вбудовування піктограм у шрифти. Ви втрачаєте контроль рівня пікселів. Існує декілька ситуацій, коли це - хороший вибір, але часто це зусилля, що докладають більше зусиль, і дає гірші результати.

<defs>
 <style type="text/css">
 <![CDATA[
  @font-face {
    font-family: 'Fredoka One';
    font-style: normal;
    font-weight: 400;
    src: local('Fredoka One'), local('FredokaOne-Regular'), 
    url(https://fonts.gstatic.com/s/fredokaone/v7/k3kUo8kEI- 
    tA1RRcTZGmTlHGCac.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, 
    U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, 
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  ]]>
 </style>
</defs>

Це приклад для наступного шрифту. https://fonts.googleapis.com/css?family=Fredoka One Open відвідайте сторінку шрифту та скопіюйте все в "defs"