Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  |  Kapitel 17   

17.3 Externe SVG Fonts

Mit Hilfe des font-face-Element können Sie SVG fonts referenzieren, die in einem externen SVG Dokument festgelegt wurden. In diesem Fall muß dem Eltern-Element font im externen Dokument durch das Attribut id ein eindeutiger Name zugeordnet werden - wie im folgenden Beispiel.

Beispiel Quellcode


   Grafische Darstellung:   SVG-Darstellung (nur SVG-fähige Browser!)    Screenshot JPG-Grafik
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" >
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<font id="ente" horiz-adv-x="54" >
  <font-face
    font-family="Entebbe"
    units-per-em="1000"
    panose-1="0 0 0 0 0 0 0 0 0 0"
    ascent="935"
    descent="-292"
    alphabetic="0">
  </font-face>
  <missing-glyph horiz-adv-x="800"
    d="M50 0V800H750V0H50ZM700 50V750H100V50H700Z" />
  <glyph unicode=" " glyph-name="space" horiz-adv-x="290" />
  <glyph unicode="!" glyph-name="exclam" horiz-adv-x="223"
    d="M86 171L83 197V683Q83 719 96 725T117 731Q141 731 145 709L148 683
    V197Q148 161 135 155T114 149Q90 149 86 171ZM76 4Q61 19 61 40Q61 62 75 76
    T112 91Q119 91 140 83T162 41Q162 30 159 22T144 2T111 -10Q92 -10 76 4Z" />
  <!-- ... -->
  <!-- ... mehr Zeichendefinitionen folgen hier -->
  <!-- ... -->
</font>
</defs>
</svg>
      

Wenn Sie einen externen SVG font in einem anderen SVG Dokument verwenden wollen, platzieren Sie das font-face-Element direkt im defs-Bereich eines SVG Dokuments.
Es wird kein font-Element als Eltern-Element benötigt.

Das font-face-Element muß, selbst wenn es einen externen SVG Font referenziert, mindestens das Attribut font-family enthalten, das den gleichen Wert erhält, wie das font-family Attribut im externen font-face-Element.

Die Referenzierung des externen Fonts können Sie dann durch die folgenden Elemente, die im font-face-Bereich platziert werden müssen, und deren Attribute realisieren:

  1. Im Element font-face-name geben Sie mit dem Attribut name den Namen der Schriftart an (der Wert aus font-family).
  2. Im Element font-face-src geben Sie mit dem Attribut xlink:href die URL zum externen SVG font an (in Form dateiname#font-id).
    Dieses Element entspricht dem Deskriptor src im der CSS 2 @font-face Regel.
  3. Im Element font-face-format, einem Kind-Element von font-face-src, können Sie mit dem Attribut string das Format des referenzierten Fonts angeben (in unserem Falle natürlich svg).

.. und nun das SVG Dokument, das den, im vorangegangenen Beispiel definierten, SVG font mit Hilfe des font-face-Elements referenziert:
Dieses Beispiel funktioniert leider bis dato nur im Batik-Squiggle SVG Browser :-) und noch nicht im Adobe SVG Viewer :-(.

Beispiel Quellcode


   Grafische Darstellung:   SVG-Darstellung (nur SVG-fähige Browser!)    Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<font-face font-family="Entebbe">
  <font-face-src>
    <font-face-name name="Entebbe" />
    <font-face-uri xlink:href="kap17_3.svg#ente">
      <font-face-format string="svg" />
    </font-face-uri>
  </font-face-src>
</font-face>
</defs>

<text x="20" y="60"
  style="font-family:Entebbe;font-size:50px;font-weight:bold;">
  externe !SVG fonts!
  <tspan x="20" dy="25" style="font-size:14px;">
    .. wird vom Adobe SVG Viewer noch nicht unterstützt.
  </tspan>
  <tspan x="20" dy="20" style="font-size:14px;">
    .. aber vom Batik-Squiggle.
  </tspan>
</text>
</svg>
      

Es ist in SVG ebenfalls möglich, mit Hilfe der CSS @font-face Regel innerhalb eines style-Bereichs externe SVG fonts zu referenzieren. Auch in diesem Fall muß dem Eltern-Element font im externen Dokument durch das Attribut id ein eindeutiger Name zugeordnet werden.
Leider funktioniert dieses Feature weder im Adobe SVG Viewer noch im Batik-Squiggle SVG Browser.
Nichtsdestotrotz folgt ein Beispiel - das leider nicht funktioniert :-(.

Beispiel Quellcode


   Grafische Darstellung:   SVG-Darstellung (nur SVG-fähige Browser!)    Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
<![CDATA[
  @font-face {
    font-family: 'Entebbe';
    src: url('kap17_3.svg#ente') format(svg);
  }
]]>
</style>
</defs>

<text x="20" y="60"
  style="font-family:Entebbe;font-size:50px;font-weight:bold;">
  externe !SVG fonts!
  <tspan x="20" dy="20" style="font-size:14px;">
    .. wird noch nicht unterstützt.
  </tspan>
</text>
</svg>
      



index  |  Kapitel 17  |  17.2  <<  | 17.3 |  >>  17.4   Das font-Element