SVG Tutorial

SVG fonts können innerhalb des defs-Bereichs einer Grafik mit Hilfe des font-Elements und seiner Kind-Elemente definiert werden.

Mit Hilfe des Kind-Elements font-face wird die Schrift beschrieben, d.h. sie können hier Eigenschaften und Charakterisktika der Schrift angeben.
Einzelne Schriftzeichen werden durch das Kind-Element glyph bzw. missing-glyph mittels Pfadbeschreibungen festgelegt.
Kerning zweier Schriftzeichen kann mittels der Kind-Elemente hkern und vkern definiert werden.

Die Eigenschaften und Charakteristika von SVG fonts sind nahezu identisch mit den Eigenschaften und Charakteristika von Schriften, wie sie in der CSS 2 Spezifikation beschrieben werden.
Das SVG Element font-face ist gewissermaßen die SVG-Variante der CSS 2 @font-face Regel. Daher sind nahezu alle Möglichkeiten, die mit Hilfe der CSS 2 @font-face Regel in Bezug auf Schriftspezifikation, Schriftcharakteristika und Schriftauswahl vorgenommen werden können, auch mit Hilfe des Elements font-face in einem SVG font möglich.

Schriftspezifikation, Schriftcharakteristika und Schriftauswahl sind Bestandteil der CSS 2 Spezifikation und haben folgende Bedeutung:

• Schriftspezifikation
  Schriften können nicht lediglich über einen bestimmten Schriftnamen angefordert werden, sondern ebenfalls durch die Festlegung mehrerer Schrifteigenschaften. Diese Eigenschaftsnamen, wie font-family, font-weight, font-style, etc. bilden die Grundlage für den Schriftauswahlmechanismus des Benutzerprogramms.
• Schriftcharakteristika
  Schriftcharakteristika werden herangezogen, um Schriften zu näher zu beschreiben. Mit Hilfe von Eigenschaften können Sie weitere Merkmale der Schrift, wie z.B. metrischen Angaben für Grundlinieneinstellungen, Akzent-höhen, etc. definieren.
• Schriftauswahl
  Die Schriftauswahl wird vom Benutzerprogramm vorgenommen. Dazu wird die Schriftbeschreibung, die in SVG durch das Element font-face realisiert wird und in der die Schriftspezifikation und die Charakteristika der Schrift durch sogenannte Schriftdeskriptoren (Attribute) bestimmt wurden, zur internen Schriftdatenbank hinzugefügt und dann verwendet, um die entsprechenden Schriftdaten auszuwählen.

Metrische Angaben für Schriftzeichen werden in Abhängigkeit eines abstrakten Quadrates angegeben, das ein einzelnes Zeichen einschließt und mit em square bezeichnet wird.
Dieses em square ist nicht lediglich ein Quadrat, sondern vielmehr ein Erstellungs-Raster bestimmter Größe für einzelne Zeichen. übliche Rastergrößen sind 250 (Intellifont), 1000 (Type 1) oder 2048 (TrueType, TrueTypeGX, Open-Type).
Dabei befindet sich der Nullpunkt dieses Rasters in der linken, unteren Ecke des em squares, d.h. die y-Achse verläuft in diesem Raster nicht - wie sonst in SVG üblich - von oben nach unten, sondern von unten nach oben.
Durch das Attribut units-per-em können Sie im font-Element und im font-face-Element die entsprechende Rastergröße des em squares festlegen.

In der W3C CSS 2 Specification finden Sie die normativen Informationen zu dieser Thematik.
Weitere empfehlenswerte Seiten:
Deutsche Übersetzung der CSS 2 Spezifikation von Stefan Mintert.
HTML World - Kapitel Schriftdefinition von Jan Winkler.

Nachfolgend ein SVG Dokument, das die Schriftart Entebbe als SVG font beinhaltet. Dieser wurde aus dem gleichnamigen TrueType Font mit Hilfe des Apache Batik Font Converters erzeugt.

Beispiel Quellcode

<?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" />
  <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" />
  <glyph unicode="&quot;" glyph-name="quotedbl" horiz-adv-x="354"
    d="M82 581Q74 577 56 573Q61 583 68 599T78 627L79 630Q51 651 51 682
    Q51 687 51 690T60 713T101 732Q110 732 132 723T154 676Q154 641 136 622
    T106 594T82 581ZM232 581Q224 577 206 573Q211 583 218 599T228 627
    L229 630Q201 651 201 682Q201 687 201 690T210 713T251 732Q260 732 282 723
    T304 676Q304 641 286 622T256 594T232 581Z" />
  <glyph unicode="#" glyph-name="numbersign" horiz-adv-x="491"
    d="M119 238H23L36 288H132L167 432H69L81 482H180L239 720H291L232 482
    H327L386 720H438L379 482H469L457 432H366L331 288H423L410 238H318
    L259 0H207L266 238H171L112 0H60L119 238ZM183 288H279L314 432H219L183 288Z" />
  <!-- ... -->
  <!-- ... mehr Zeichendefinitionen folgen hier -->
  <!-- ... -->
</font>
</defs>

<text x="20" y="60"
  style="font-family:Entebbe; font-size:18px; fill:black">
  !SVG fonts!
</text>
</svg>