SVG Font

Das originale Vektorschriftformat — menschenlesbares XML, das SVG-Pfade auf Schriftglyphen abbildet.

.svg SVG-Schriftformat

TypXML-basierter Vektor

KomprimierungKeine (Klartext)

DateigrößeGrößte aller Formate

UnterstützungNur Safari (anderswo veraltet)

Ideal fürDebugging, Quellformat

BobcornPipeline-Quelle

Was ist SVG Font?

SVG-Fonts wurden als Teil der SVG 1.1-Spezifikation, veröffentlicht vom W3C, definiert. Anders als traditionelle binäre Schriftformate betten SVG-Fonts Glyphen-Konturen als SVG-Pfaddaten in ein <font>-Element ein. Jede Glyphe wird durch ein <glyph>-Element dargestellt, dessen d-Attribut den Vektorpfad enthält, der die Form beschreibt.

Im Wesentlichen sind SVG-Fonts SVG-Zeichnungen, die als Schrift verpackt sind. Dieselbe Pfad-Syntax, die Sie zum Zeichnen von Formen in einer SVG-Datei verwenden, wird zur Definition von Buchstabenformen und Icon-Konturen wiederverwendet. Dies macht sie einzigartig inspizierbar — Sie können eine SVG-Font in einem beliebigen Texteditor öffnen und die tatsächliche Geometrie jeder Glyphe lesen.

Funktionsweise

Eine SVG-Font-Datei kapselt Glyphenpfade in einer Standard-XML-Struktur. Hier ist ein vereinfachtes Beispiel:

SVG-Font-Struktur

<font id="MyIcons">
  <font-face font-family="MyIcons" units-per-em="1024"/>
  <glyph glyph-name="home" unicode="&#xE001;"
         d="M512 0L0 448h128v576h256V640h256v384h256V448h128z"/>
  <glyph glyph-name="search" unicode="&#xE002;"
         d="M..."/>
</font>

Das <font-face>-Element deklariert den Schriftfamiliennamen und das Koordinatensystem (units-per-em). Jedes <glyph> bildet einen Unicode-Codepunkt auf einen Vektorpfad ab. Das d-Attribut verwendet genau dieselbe Pfad-Syntax wie ein reguläres SVG-<path>-Element.

Dies ist das Zwischenformat in Bobcorns Pipeline. Einzelne SVG-Icons werden zunächst in dieser SVG-Font-Struktur zusammengestellt, die dann in Binärformate konvertiert wird: SVG Font → TTF → WOFF / WOFF2 / EOT.

Vor- und Nachteile

Vorteile

Menschenlesbar — in jedem Texteditor öffnbar
Einfaches Debuggen von Glyphenpfaden und Metadaten
Vollständig vektorbasiert, unbegrenzte Skalierbarkeit
Keine Kompilierung erforderlich, um die Quelle anzuzeigen

Nachteile

Größte Dateigröße aller Schriftformate
Veraltet in Chrome, Firefox und Edge
Keinerlei Komprimierung
Kein Hinting-Support
Schlechte Renderqualität unter Windows

Browser-Unterstützung

Die Unterstützung für SVG-Fonts wurde aus den meisten gängigen Browsern entfernt. Chrome stellte die Unterstützung für SVG-Fonts in Version 38 (2014) ein. Firefox hat sie nie implementiert. Edge (Chromium-basiert) unterstützt sie ebenfalls nicht. Der einzige verbleibende Browser ist Safari und iOS Safari, der SVG-Fonts noch rendert.

Für den praktischen Web-Einsatz ist SVG Font im Wesentlichen ein Legacy-Format. Sie sollten sich niemals darauf als Auslieferungsformat für Endnutzer verlassen. Verwenden Sie stattdessen WOFF2.

Wann SVG Font verwenden

Debugging von Schriftgenerierungsproblemen — da es sich um einfaches XML handelt, können Sie die Pfaddaten direkt lesen und mit den originalen SVG-Icons vergleichen, um Probleme zu diagnostizieren.
Als Quellformat in Build-Pipelines — viele Schriftgenerierungswerkzeuge (einschließlich Bobcorn) verwenden SVG Font als Zwischendarstellung, bevor sie in Binärformate konvertieren.
Legacy iOS < 5-Unterstützung — heute extrem selten, aber ältere iOS-Geräte vor der WOFF-Unterstützung konnten für Web-Fonts nur SVG-Fonts verwenden.

Bobcorn

In Bobcorn ist SVG Font der erste Schritt der Generierungs-Pipeline. Ihre SVG-Icons werden in einer SVG-Font zusammengestellt, die dann in TTF und von TTF in WOFF, WOFF2 und EOT konvertiert wird. Sie können die SVG-Font-Datei zu Debugging-Zwecken exportieren — das ist besonders nützlich, wenn eine Glyphe falsch aussieht und Sie die rohen Pfaddaten prüfen müssen.