Comment utiliser une police personnalisée dans une image SVG sur mon site?

28

J'ai créé une icône Facebook personnalisée à l'aide d'Inkscape et l'ai enregistrée en tant que svg. Il utilise la même police que le titre de ma page, qui utilise la police "ubuntutitling-bold-webfont", que j'ai référencée comme .woff dans un fichier CSS. Le titre fonctionne, mais pas le svg - il affiche le "f" dans une sorte de police par défaut. Le fichier de police se trouve dans ../fonts/ubuntutitling-bold-webfont.woff en relativité avec le fichier CSS et image, et en fonts / ubuntutitling-bold-webfont.woff en relativité avec la page Web.

Je trouve Comment puis-je incorporer des polices Web Google dans un SVG? , mais je suis un peu confus sur la façon d'appliquer le code au SVG, si j'en ai besoin. Le SVG peut-il utiliser la police .woff référencée dans le fichier CSS? La façon dont j'ai changé manuellement la police dans le fichier SVG était-elle correcte?

Voici le code du 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>

Merci d'avance.

css svg web-fonts Joe
la source
Comment affichez-vous le SVG? Le chargez-vous en tant que <img>, l'incorporez-vous en tant qu'objet ou affichez-vous le SVG en ligne?
Idéogramme

Réponses:

19

Vous devez mettre CSS dans la defssection. Quelque chose comme:

<defs>
  <style type="text/css">
    @font-face {
      font-family: Delicious;
      src: url('../fonts/font.woff');
    }
  </style>
</defs>
leighman
la source
2
Selon mon exemple github.com/marians/test-webfonts-in-svg , cela ne fonctionne pas avec les navigateurs actuels (février 2016).
Marian
13
Si vous utilisez <object>pour incorporer le svg, plutôt que <img>, alors la police se charge correctement! github.com/marians/test-webfonts-in-svg/pull/1
waldyrious
2
@waldyrious Il n'y a pas assez de votes positifs dans le monde pour cette astuce.
Scribblemacher
@waldyrious et si le SVG est une image de fond?
notacouch
L'utilisation <object>a quelques inconvénients. Après avoir examiné vecta.io/blog/best-way-to-embed-svg, j'ai décidé d' insérer le balisage svg directement dans mon document.
Herman J. Radtke III
3

Pour charger Google ou tout autre fornts externes dans un fichier SVG, nous devons ajouter la balise style dans la balise defs comme suit:

<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>
muTheTechie
la source
3
Selon mon exemple github.com/marians/test-webfonts-in-svg , cela ne fonctionne pas avec les navigateurs actuels (février 2016).
Marian
1

Edit: J'ai relu votre question ... il semble que votre meilleure option pourrait être de convertir le texte de votre icône en un contour, donc il n'a pas du tout besoin de la police. (Vous devrez peut-être vérifier votre licence de police pour voir si cela est correct.)

J'ai supposé, à tort, que vous aviez une icône vectorielle et que vous cherchiez la meilleure façon de l'afficher sur votre site Web.

Je pense que vous avez quelques options.

Utiliser une image SVG

Vous pouvez simplement utiliser le SVG comme image elle-même. Vous perdrez la prise en charge des anciennes versions d'IE, mais vous pouvez échanger un PNG ou GIF pour IE8 et versions antérieures. Ou ne vous souciez pas d'IE8 et d'un support plus ancien (peut ou non être une option, selon votre public cible).

Utiliser le générateur de Font Squirrel

Font Squirrel a un générateur @ font-face qui fait tout le gros du travail pour vous, si vous avez déjà créé la police.

Font Squirrel @ générateur font-face

Utilisez une image PNG

Pourquoi utilisez-vous SVG? Est-ce pour un meilleur zoom et un support DPI élevé? Si c'est le cas, il existe des moyens de le faire avec CSS et PNG. Cela dépend vraiment de votre utilisation prévue.

Je ne suis pas fan de l'intégration d'icônes dans les polices. Vous perdez le contrôle du niveau des pixels. Il y a quelques situations où le faire est un bon choix, mais souvent c'est beaucoup plus d'efforts que cela vaut et donne de moins bons résultats.

Marc Edwards
la source
-2 
<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>

C'est un exemple pour la police suivante. https://fonts.googleapis.com/css?family=Fredoka One Open visitez la page des polices et copiez tout dans "defs"

Invisible
la source
2
Bienvenue à GDSE! Le lien ne mène nulle part pour moi, pourriez-vous s'il vous plaît modifier votre réponse pour ajouter les informations pertinentes?
curieux