Verwendung von SVG-Fonts

Die SVG-Spezifikation definiert SVG-Fonts um ein Schrift­ar­ten­format zur Verfügung zu stellen, bei dem sich Designer darauf verlassen können, dass es von jedem konformen SVG-Betrach­tungs­programm, egal auf welchem Betriebs­system, unterstützt wird; und das in ein SVG-Dokument eingebettet werden kann. Beim Speichern eines Bildes als SVG bietet das Vektor-Zeichen­programm Ihrer Wahl Ihnen vielleicht die Möglichkeit an, verwendete Schrift­arten einzubetten. Das ist wohl die einfachste Möglichkeit SVG-Fonts zu verwenden, aber nicht immer die beste. Lesen Sie weiter, um mehr über die Verwendung von SVG-Fonts zu lernen. Beachten Sie aber, dass Mozilla Firefox—wahrschein­lich der verbreitetste SVG-fähige Webbrowser—bisher noch keine unter­stüt­zung von SVG-Fonts eingebaut hat.

Woher man SVG-Fonts bekommt

Schrift­ar­ten­dateien in anderen Formaten als SVG können in das SVG-Font­format umgewandelt werden, indem man sie in das Schrift­arten-Bear­beitungs­programm FontForge lädt und dann als SVG-Fonts speichert. Schriften im format True Type können auch mit dem Apache Batik SVG Font Converter umge­wan­delt werden. Es gibt noch andere Programme zur Konvertierung von Schrift­arten. Vielleicht hat das Vektor-Zeichen­programm, das Sie verwenden auch eine Option zum Einbetten von Schrift­arten, was bedeutet, dass diese ins SVG-Font­format umgewandelt und in die selbe Datei geschrieben werden, in der das Bild selbst gespeichert wird.

Neben der technischen Aufgabe Schrift­arten zu konver­tieren, stellt sich noch die Frage, ob man das eigentlich darf. Die meisten kommer­ziellen Schrift­arten sind nicht als Webfonts einsetzbar, da dies eine Weitergabe darstellt, was nicht durch die jeweilige Lizenz erlaubt wird. Sogar viele frei zugängliche Schrift­arten können rechtlich proble­matisch sein. Es handelt sich um eine Technologie, die noch nicht sehr gebräuchlich ist und daher beim Verfassen von Lizenzen für Schrift­arten oft gar nicht bedacht wurde.

Eine gute Quelle für Schrift­arten unter liberalen Lizenzen ist die Open Font Library. Alle Schrift­arten in der Open Font Library werden unter Lizenzen verbreitet, die definitiv die Konver­tierung in andere Datei­formate und die Verwendung als Webfonts und noch mehr erlauben.

Wie man einen externen SVG-Font einsetzt

Wenn wir eine Schriftart im SVG-Format haben, können wir sie in einer Grafik wie dieser hier verwenden:

An dieser Stelle sollten Sie ein Beispiel­bild sehen. Wenn das Bild nicht angezeigt wird, unter­stützt Ihr Browser vielleicht kein SVG oder hat Probleme mit dem object-Tag in HTML.

Vergessen Sie nicht, dass SVG-Fonts in Firefox nicht funktio­nieren. Ich empfehle, diese Seite im Opera Webbrowser zu betrachten. Auch wenn Sie Opera in einer aktuellen version verwenden, kann es sein, dass der Text in einer auf Ihrem System instal­lierten Schriftart dargestellt wird, bevor die Comic-SVG-Schrift Tomson Talks herunter­geladen wurde. Wenn die Darstellung nicht von selbst erneuert wird, sobald der korrekte Font verfügbar ist, hilft es meistens, den Text mit der Maus zu markieren.

Nun werfen wir mal einen Blick auf den Quelltext dieses Bildes, um zu verstehen, wie es funktio­niert:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 300">
<defs >
 <font-face font-family="Tomson Talks">
  <font-face-src>
   <font-face-uri xlink:href="../font/TomsonTalks.svg#TomsonTalks">
    <font-face-format string="svg"/>
   </font-face-uri>
  </font-face-src>
 </font-face>
</defs>
 <image xlink:href="Imp.jpg" width="400" height="300"/>
 <path fill="#fff" stroke="#000" stroke-width="3" stroke-miterlimit="50" d="M350 280a400 400 0 0 0 4 -150a100 60 0 1 0 -14 4a400 400 0 0 1 10 146z"/>
 <text font-family="'Tomson Talks',sans-serif" font-size="25">
  <tspan x="302" y="60" text-anchor="middle">Du machst</tspan>
  <tspan x="302" y="85" text-anchor="middle">mir nichts als</tspan>
  <tspan x="302" y="110" text-anchor="middle">Ärger.</tspan>
 </text>
</svg>

Um einen SVG-Font für Text in einem SVG-Bild zu verwenden, sind zwei Dinge zu tun. Zum Einen muss eine Referenz zu der Datei, in der die Schrift definiert ist, eingefügt werden, damit ein SVG-Betrachtungs­programm weiß, wo diese zu finden ist. Im obigen Beispiel wurde das mit dem font-face-Element und dessen Unter­elementen realisiert. Sie können diesen Abschnitt einfach kopieren, in Ihre Dateien einfügen und die Attribute anpassen. Das Attribut font-family des font-face-Elementes sollte auf den Namen der jeweiligen Schriftart geändert werden. Und das Attribut xlink:href des font-face-uri-Elementes muss den Link zur Schrift enthalten. Es ist wichtig, zu beachten, dass der URL nicht einfach auf die Datei verweist, sondern mit dem letzten Bestandteil, “#TomsonTalks”, einen bestimmten Knoten innerhalb der XML-Datei in ../font/TomsonTalks.svg identi­fiziert. Und zwar das font-Element, das die Definition der Schriftart enthält. Wenn Sie die Tomson Talks-Datei öffnen und sich den Quelltext anzeigen lassen, werden Sie feststellen, dass darin ein font-Element enthalten ist, dessen Attribut id auf “TomsonTalks” gesetzt ist. Für jede Schriftart, die Sie auf diese Art einsetzen wollen, müssen Sie das id-Attribut des jeweiligen font-Elementes bestimmen. Das ermöglicht es auch, mehrere Schrift­arten in einer Datei vorzuhalten. Das Attribut string des font-face-format-Elementes wird nur dann verändert, wenn Sie eine Schriftart in einem Anderen Format einsetzen. Aber kein anderes Schrift­arten­format als SVG-Fonts muss von standard­konformer SVG-Darstel­lungs­soft­ware unterstützt werden.

Es ist nicht strikt festgelegt, wo das font-face-Element hin gehört, aber es ist guter Stil, es in ein defs-Element zu setzen, das am Anfang der Datei steht; gleich nach dem title-Element und dem ersten desc-Element und vor allen darstell­baren Elementen.

Alternativ kann man auch in CSS Web Fonts-Syntax auf eine Schrift­arten­datei verweisen. Aber das wird derzeit wohl noch weniger von Browsern unterstützt, als die oben verwendete Syntax.

Das zweite, was man tun muss, ist festzulegen, welche Schriftart für welche Text­be­stand­teile verwendet werden soll. In unserem Beispiel geschieht dies mittels des font-family-Attributes des text-Elementes. Schrift­arten­namen, die Leerzeichen enthalten, müssen noch einmal in zusätzliche Anführungs­zeichen gestellt werden. Statt nur einem Schrift­arten­namen, ist in unserem Beispiel eine mit Kommata getrennte Liste angegeben. Der zweite Eintrag ist kein Name einer Schriftart, sondern ein allgemeiner Schrifttyp-Bezeichner. Damit wird das Darstel­lungs­programm aufge­fordert, eine serifenlose Schrift zu verwenden, falls Tomson Talks nicht zur verfügung steht. Da wir dem Programm ja bereits mitteilen, wo Tomson Talks zu finden ist, sollte das idealer­weise keine Rolle spielen. Aber das Bild kann schon einmal angezeigt werden, während die Schrift­arten­datei noch geladen wird, und außerdem sind ja Browser in Gebrauch, die keine externen SVG-Fonts unterstützen. Mit einer Liste von Ausweich­möglich­keiten, hat man auch in diesen Fällen noch einige Kontrolle über die Darstellung.

Die Auswahl der Schriftart kann auch mit CSS instruiert werden, und CSS-Eigen­schaften haben Vorrang vor XML-Attributen. Das bedeutet, dass vorhandenes CSS nicht durch hinzufügen des font-family-Attributes über­schrie­ben werden können. Wenn Sie die Schriftart eines Textes in einem existie­renden SVG-Dokument abändern müssen, ohne ein Vektor­grafik-Bear­beitungs­programm zu verwenden, also nur mit einem Texteditor, dann ist es wohl am einfachsten, mit der Suchen und Ersetzen-Funktion den Schrift­namen überall zu ersetzen, wo er vorkommt.

Wenn Sie eine Schriftart verwenden, die sie nur im SVG-Format haben, dann werden Sie diese wahr­schein­lich nicht in Ihrem Vektor-Zeichen­programm auswählen können. In diesem Fall kann es sogar nötig sein, eine instal­lierte Schriftart auszuwählen und den Schrift­namen dann in einem Texteditor zu ersetzen.

Wie man einen einge­bet­teten SVG-Font einsetzt

Wenn Sie eine Schriftart nur in einem einzigen Dokument verwenden, wollen Sie die Schrift vielleicht gleich direkt in der selben Datei speichern.

Dafür müssen Sie das font-Element aus der Schrift­arten­datei in Ihr SVG-Bild kopieren. Alles von <font bis </font> muss in die Bilddatei. Normaler­weise wird das font-Element bereits ein font-face-Element enthalten, also müssen Sie keines mehr einfügen. Falls kein font-face-Element vorhanden ist, überprüfen Sie noch einmal, ob es nicht doch da ist. Wenn es wirklich fehlt, müssen Sie eines hinzufügen. Das font-face-Element sollte in dem font-Element stehen, da dann das font-face-src-Element weggelassen werden kann. Nur das Attribut font-family ist erfor­derlich, damit auf die Schriftart verwiesen werden kann.

Das dürfte normaler­weise ausreichen um die Schriftart innerhalb der Datei verfügbar zu machen. Aber es gibt Ausnahmen. Wenn die Schrift­arten­­defi­nition von Entities gebrauch macht, die in einer internen Teil-DTD definiert werden, dann müssen Sie diese ebenfalls in Ihr Bild­doku­ment kopieren. Das ist nichts, das Ihnen bei Schriften begegnen wird, die von einem anderen Format konvertiert wurden, aber eine von mir entwickelte Schriftart namens „spaceagedigital“ verwendet Entity-Defini­tionen. Diese Technik kann praktisch sein, wenn Teile von Schrift­zeichen mehrfach Verwendung finden, wie etwa bei Digital­anzeigen-Schriften oder für Akzente. Da diese Verwendung von Entities aber nicht gebräuchlich ist und mein eigener Einsatz der Methode hauptsächlich experi­men­tell ist, gehe ich hier nicht ins Detail darüber, was genau wohin zu kopieren ist.

Außerdem ist zu beachten, dass Werte von id-Attributen doku­ment­weit eindeutig sein müssen, weshalb das Zusammen­kopieren von Elementen aus verschie­denen Dateien proble­ma­tisch sein kann. Browser geben nicht notwen­diger­weise eine Fehler­meldung aus, wenn eine id mehr als einmal vorkommt, aber bei mancher Software kann es zu Problemen führen. Das font-Element braucht eine id um von anderen Dokumenten aus referen­ziert zu werden. Aber wenn die Schriftart eingebettet ist, wird das id-Attribut norma­ler­weise nicht benötigt werden und kann entfernt werden.

Um die Datei zu verkleinern, können Glyphen, die nicht verwendet werden, entfernt werden. Gerade dann, wenn eine Schriftart nur für ein Bild verwendet wird, kann es gut sein, dass sich so einiges einsparen lässt. Die Schrift­zeichen von Hand auszusor­tieren dürfte viel Arbeit sein. Und wenn der Text geändert wird, muss der Font aktuali­siert werden. Um nur Schrift­zeichen einzubetten, die auch im Text vorkommen, sollten Sie aus einem Vektor­grafik-Programm exportieren, das diese Option anbietet.

Es ist nicht strikt festgelegt, wo das font-Element hingehört, aber es ist guter Stil, es in ein defs-Element zu setzen, das am Anfang der Datei steht; gleich nach dem title-Element und dem ersten desc-Element und vor allen darstell­baren Elementen.

Der zweite Schritt, Festlegung der zu verwen­denden Schrift­arten, funktio­niert ganz genau wie mit externen Schrift­arten.