Wissensdatenbank zu SVG-Schriftarten | Aspose.Font

Einführung in die SVG-Schriftart

Um zu erklären, was eine SVG-Schriftart ist, lernen wir zunächst den gebräuchlichen Begriff SVG kennen. Aus dem sogenannten Aspose.SVG-Produkt verstehen wir, dass Scalable Vector Graphics (SVG) eine XML-Sprache zum Erstellen zweidimensionaler Vektor- und gemischter Vektor-/Rastergrafiken ist. Bei einem SVG-Dokument handelt es sich um eine Textdatei, die Bilder als geometrische Grundelemente beschreibt: Linien, Kurven, Formen, Text usw. Vektorobjekte werden als Satz von Befehlen, Zahlen und Formeln erstellt und gespeichert, nicht in einem Pixelraster wie bei Bitmaps.

SVG-Schriftart ist eine Schriftart, die in SVG-Bildern verwendet wird und wie jedes andere Objekt des Formats ohne Qualitätsverlust skaliert werden kann. Sie können Schriftarten direkt in das Bild einbetten und so ganz einfach Grafiken mit benutzerdefinierter Typografie erstellen.

Eine SVG-Schriftart ist eine Schriftart, die wie ein SVG-Bild mithilfe von XML definiert wird. Es handelt sich um eine Sammlung von Formen, Linien und Kurven, die die Zeichen der Schriftart definieren. Die Schriftart kann auch mit CSS gestaltet und manipuliert werden. Daher können Sie zum Codieren von Text in einem SVG-Bild dieselben Techniken verwenden, wie Sie dies auch für jedes andere SVG-Element tun würden.

Vor- und Nachteile der SVG-Schriftart

Die folgende Tabelle zeigt die Vor- und Nachteile von SVG-Schriftarten, sodass Sie entscheiden können, ob Sie sie in Ihrem Projekt verwenden möchten oder nicht.

Vorteile	Nachteile
Skalierbarkeit: SVG-Schriftarten können ohne Qualitätsverlust auf jede beliebige Größe skaliert werden und eignen sich daher perfekt für die Verwendung in jedem responsiven Design.	Browserunterstützung: Die meisten modernen Webbrowser unterstützen SVG-Schriftarten, einige ältere Browser jedoch möglicherweise nicht.
Kleinere Dateigröße: Im Vergleich zu Web-Schriftarten haben SVG-Schriftarten eine kleinere Dateigröße, was entscheidend ist, wenn Sie die Ladezeit verbessern möchten.	Eingeschränkte Editorunterstützung: Nicht alle Texteditoren und Designsoftware unterstützen SVG-Schriftarten.
Bessere Zugänglichkeit: SVG-Schriftarten gelten als besser zugänglich für Benutzer mit Behinderungen. Sie können von Bildschirmleseprogrammen leicht gelesen werden und ermöglichen die Einbindung alternativer Textbeschreibungen.	Komplexität: SVG-Schriftarten sind schwierig zu bearbeiten, da sie mehr technisches Wissen erfordern.
Erweiterte Typografie: SVG-Schriftarten enthalten erweiterte typografische Funktionen wie Ligaturen, Kerning, Alternativzeichen usw.	Durchsuchbarkeit: SVG-Schriftarten können sich auf die SEO einer Website auswirken, da sie von Suchmaschinen nicht durchsuchbar sind.
Stil und Animation: Gestalten oder animieren Sie SVG-Schriftarten ganz einfach in CSS und JavaScript.	Begrenzte Schriftartenoptionen: Im Vergleich zu TrueType-Schriftarten stehen im SVG-Format weniger Schriftartenoptionen zur Verfügung.
Bessere Unterstützung für nicht-lateinische Symbole: Aufgrund der Skalierbarkeit können SVG-Schriftarten zum Zeichnen von Schriftarten verwendet werden, die eine große Anzahl von Zeichen aufweisen oder eine komplexe Darstellung erfordern, wie Hieroglyphen, arabische oder Hindi-Buchstaben.

SVG oder WOFF?

SVG-Schriftarten waren in den Anfängen von SVG beliebt, doch heute werden sie in den meisten Fällen durch Web-Schriftarten ersetzt, da sie flexibler sind und von allen modernen Browsern weitgehend unterstützt werden. Allerdings sind SVG-Schriftarten beispielsweise auch in älteren Versionen des Internet Explorers noch zu finden. Vergleichen wir also diese Schriftarten.

Web Open Font Format oder WOFF ist ein Format zur Bereitstellung von Schriftartdateien über das Internet, das die Anforderungen des Webanwendungsmarkts abdecken soll. Das WOFF-Format wurde entwickelt, um im Vergleich zu anderen Dateiformaten wie TrueType und OpenType eine effizientere Möglichkeit zur Bereitstellung von Web-Schriftarten zu bieten. Das Format komprimiert Schriftartdaten, um die Dateigröße zu reduzieren und Webseiten schneller herunterzuladen und zu verwenden. Es enthält auch Metadaten, die Informationen über die Schriftart bereitstellen, z. B. die Schriftartfamilie, den Stil und Copyright-Informationen.

SVG ist ein Vektorgrafikformat, das zum Erstellen und Anzeigen von Bildern im Web verwendet wird. Es handelt sich um ein textbasiertes Format, das leicht bearbeitet und manipuliert werden kann und daher eine gute Wahl für die Erstellung von Logos, Symbolen und anderen Grafiken ist.

Wenn Sie also diese Formate nach ihrem Zweck vergleichen und Grafiken für die Verwendung im Web erstellen möchten, sollten Sie SVG verwenden. Wenn Sie eine Schriftart für die Verwendung auf einer Website benötigen, sollten Sie WOFF verwenden.

Beide Formate können mit CSS interagieren, WOFF-Dateien werden jedoch mithilfe der Font-Face-Regel in CSS in Webseiten eingebettet. Dadurch können Webdesigner benutzerdefinierte Schriftarten auf ihren Websites verwenden, ohne darauf angewiesen zu sein, dass Benutzer die Schriftart auf ihren Geräten installiert haben. Dies sorgt für mehr Flexibilität und ein konsistentes visuelles Erlebnis, unabhängig davon, welchen Browser der Benutzer verwendet.

SVG oder TTF?

Wenn Sie zwischen TTF oder SVG wählen, müssen Sie zunächst die Anforderungen des Projekts klären, da diese normalerweise für verschiedene Fälle verwendet werden. Diese Schriftarten sind sich ziemlich ähnlich, da sie beide qualitativ hochwertigen, skalierbaren und leicht lesbaren Text liefern.

True Type Font Format ist das bekannteste Schriftformat für Web- und Printdesign und wird von den meisten Betriebssystemen und Geräten unterstützt. TTF ist außerdem recht einfach zu verwenden und zu implementieren. Dabei handelt es sich um ein Vektorformat, das jedoch ein entwickeltes Befehlstool verwendet, das Schriftarten eine ähnliche Qualität wie Bitmap-Schriftarten ermöglicht und von einigen Quellen als Rasterformat betrachtet wird. SVG ist ein Vektorschriftformat. Es speichert die Schriftart als eine Reihe von Pfaden, verlustfrei auf jede beliebige Größe skaliert. Dadurch erhalten Sie mit solchen Schriftarten eine kleinere Schriftartendatei, wie bereits im SVG-zu-WOFF-Vergleich erwähnt. SVG ist auch für Menschen mit Behinderungen eine bessere Option als True Type, da es eine bessere Lesbarkeit bietet.

Kurz gesagt: TTF ist das am weitesten verbreitete Format und eignet sich für die meisten Fälle am besten. SVG ist jedoch eine großartige Option, wenn Sie den Text skalieren müssen, den Text zugänglich machen möchten oder erweiterte Typografiefunktionen benötigen.

Wo werden SVG-Schriftarten verwendet?

Wählen Sie das SVG-Schriftformat, wenn Sie sich auf Folgendes konzentrieren:

• Responsive Designs: Skalierbare Schriftarten wie SVG eignen sich gut für solche Probleme.
• Barrierefreiheit: Wie oben erwähnt, können SVG-Schriftarten für eine bessere Lesbarkeit sorgen.
• Erweiterte Typografie: Funktionen wie Ligaturen, Kerning und alternative Zeichen sind in SVG-Schriftarten enthalten.
• Stil und Animation: SVG-Schriftarten bieten mehr Flexibilität für Design und Animation.
• Nicht-lateinische Skripte: Sie können SVG-Schriftarten verwenden, um Schriftarten darzustellen, die eine große Anzahl komplex darzustellender Zeichen enthalten.
• Druckdesign: SVG ist bei bestimmten Druckdesignprojekten nützlich, bei denen die Größe einer Datei entscheidend ist, Sie aber gleichzeitig hochauflösende Bilder und komplexe Typografie verwenden müssen.
• Arbeiten mit SVG-Grafiken: Da SVG-Schriftarten gemeinsam Teil des SVG-Grafikbildes sind und mithilfe der XML-Sprache dargestellt werden, können Sie Schriftartglyphen manuell oder mit Hilfe der speziellen Software bearbeiten und die Ergebnisse (Text) sofort anzeigen Änderungen anzeigen im gesamten SVG-Bild.

Es ist wichtig zu beachten, dass SVG-Schriftarten möglicherweise nicht für alle Projekte die beste Wahl sind. Es ist besser, als Fallback-Option auch Schriftarten eines anderen Formats hinzuzufügen.

Sind SVG-Schriftarten kostenlos?

Es gibt viele Open-Source-Schriftartenbibliotheken mit einer Vielzahl kostenloser SVG-Schriftarten unter Open-Source-Lizenzen wie Google Fonts, Open Font Library usw. Allerdings können nicht alle SVG-Schriftarten kostenlos verwendet werden. Einige Designer verkaufen Lizenzen und die Lizenzbedingungen können variieren. Für einige Schriftarten gibt es möglicherweise eine kostenlose Version mit eingeschränkten Funktionen und eine kostenpflichtige Version mit mehr Optionen.

Überprüfen Sie die Lizenz- und Nutzungsbedingungen einer Schriftart, bevor Sie sie in einem Projekt verwenden. Dadurch stellen Sie sicher, dass die Nutzung kostenlos ist oder Sie über die erforderlichen Berechtigungen verfügen.

Bei der Schriftartenlizenzierung sind vier Optionen zu berücksichtigen:

1. Ermöglicht das Einbetten und temporäre Laden von Schriftarten auf anderen Systemen. Mit einer solchen Lizenz können Sie Schriftarten bearbeiten, einschließlich der Formatierung neuer Texte, und alle Änderungen speichern.
2. Ermöglicht das temporäre Einbetten der Schriftart, wodurch die Schriftart auf andere Systeme geladen werden kann. Mit einer solchen Lizenz können Sie neuen Text mithilfe der eingebetteten Schriftart bearbeiten und formatieren und alle Änderungen speichern.
3. Ermöglicht die dauerhafte Einbettung der Schriftart, sodass die Schriftart von Remote-Systemen oder anderen Benutzern installiert und verwendet werden kann.
4. Ermöglicht das vorübergehende Einbetten der Schriftart zum Anzeigen oder Drucken des Dokuments auf anderen Systemen.

SVG-Schriftartdatei

SVG-Schriftarten verwenden XML-Syntax und können direkt in SVG-Dokumente eingebettet oder als externe Dateien referenziert werden. Seine Struktur besteht aus den folgenden Komponenten:

• XML-Deklaration am Anfang der Datei. Es gibt die verwendete XML-Version und die Codierungsinformationen an.
• Schriftartelement. Es enthält allgemeine Informationen zur Schriftart wie Schriftartname, Familie, Stil usw.
• Glyphenelement. Es definiert einzelne Zeichen der Schriftart. Jede Glyphe verfügt über eine eindeutige Kennung, eine Unicode-Nummer und eine Reihe von Pfaden oder Formen, aus denen das Zeichen besteht.
• Font-Face-Element. Es wird verwendet, um Schriftmetadaten ( metrics) wie Aufstieg, Abstieg, Grundlinienposition und Glyphen-Begrenzungsrahmen zu definieren.
• Fehlendes Glyphenelement. Es definiert eine Standardglyphe. Diese Glyphe wird verwendet, wenn die benötigte Glyphe nicht in der Schriftart gefunden wird.
• Optionale Elemente wie „font-face-src“, das die Quelle der Schriftartdatei definiert, und „font-face-uri“, das einen URI für die Schriftart bereitstellt.

Hier ist ein Codebeispiel für die Grundstruktur einer SVG-Schriftartdatei:

 
    <?xml version="1.0" encoding="UTF-8"?>
    <svg xmlns="http://www.w3.org/2000/svg">
      <font id="MyFont" horiz-adv-x="1000">
        <font-face font-family="MyFont" units-per-em="1000" ascent="800" descent="200" />
        <glyph glyph-name="Triangle" d="M0,0 L100,0 L50,100z" />
        <glyph unicode="B" glyph-name="B" d="M50,50 L50,150 L100,150 L100,115 L85,100 L50,100 M85,100 L100,85 L100,50z" />
      </font>
    </svg>

Lassen Sie uns das Codebeispiel erklären.

Zuerst sehen wir die allgemeine XML-Deklaration, die die XML-Versionsnummer und -Kodierung definiert. Die Kodierung UTF-8 ist seit 2008 die gebräuchlichste Kodierung für das World Wide Web.

Das Hauptelement (Tag) in diesem XML ist das Element „svg“, das ein SVG-Dokumentfragment definiert. Das Attribut „xmlns“ des Elements „svg“ verweist auf den XML-Namespace, der in der Spezifikation Scalable Vector Graphics (SVG) 1.0 definiert ist.

Die Beschreibung der Schriftart selbst beginnt mit dem Element <font>. Dieses Element enthält zwei Attribute:

Ein „id“-Attribut identifiziert die Schriftart eindeutig und wird verwendet, wenn es zum Verweisen auf die Schriftart aus einer externen SVG-Datei benötigt wird. Das Attribut „horiz-adv-x“ bestimmt den standardmäßigen horizontalen Vorschub nach dem Rendern einer Glyphe in horizontaler Ausrichtung (weitere Informationen finden Sie unter Glyphenmetriken). Wenn dieses Attribut nicht angegeben ist, ist der Standardwert 1000.

Das Element „font-face“ in diesem Beispiel definiert solche gemeinsamen Merkmale der Schriftart wie:

• Schriftfamilie – eine Gruppe verwandter, ähnlicher Schriftarten.
• Einheiten pro Geviert – Anzahl der Koordinateneinheiten auf dem Geviertquadrat, die Größe des Entwurfsgitters, auf dem Glyphen angeordnet sind.
• Aufstieg, Abstieg – Länge vom Ursprungspunkt auf der Grundlinie bis zum höchsten bzw. niedrigsten Punkt der Glyphe.

Jede Glyphe, die unsere Beispielschriftart enthält, wird durch das Element „glyph“ dargestellt.

Parameter wie „unicode“ und „glyph-name“ geben an, wie auf die entsprechende Glyphe zugegriffen werden soll – unter Verwendung eines Zeichencodes bzw. Namens der Glyphe. In tatsächlichen SVG-Schriftartdaten reicht es aus, nur ein einziges Attribut, einen Unicode oder einen Namen einer Glyphe anzugeben, um auf die gewünschte Glyphe zuzugreifen.

Ein Attribut „d“ ist das wichtigste Attribut des „glyph“-Elements. Es definiert den Umriss einer Glyphe mithilfe geometrischer Grundelemente wie Linien und Kurven.

Schauen wir uns an, wie wir in unserem Beispiel einen grafischen Pfad für die Glyphe namens „Triangle“ erhalten. Jeder Buchstabe in diesem Pfad ist eine spezielle Abkürzung, bezogen auf den entsprechenden Befehl im grafischen Kontext. Auf jeden Buchstaben folgen 2 Zahlen, das sind die Koordinaten. Alle Koordinaten im Beispiel sind global, keine Koordinate ist relativ zum vorherigen Punkt.

Der erste Buchstabe in diesem Pfad ist „M“. Es ist ein Befehl „MoveTo“. Wie der Name schon sagt, setzt dieser Befehl einen Stift auf die angegebenen Koordinaten, in unserem Fall auf den Anfang des Koordinatensystems (0, 0).

Nächster Befehl – ​​„L“ bedeutet Befehl „LineTo“. Dieser Befehl zeichnet eine Linie vom aktuellen Punkt (0,0) zur angegebenen (x,y)-Koordinate, die zum neuen aktuellen Punkt wird.

Die Koordinaten des neuen aktuellen Punktes sind die Parameter des „L“-Befehls – in unserem Fall sind das die Koordinaten (100, 0).

Die erste Linie in unserem Glyphen ist also die Linie vom Punkt (0,0) zum Punkt (100, 0). Der nächste Befehl – ​​„L50,100“ – zeichnet eine Linie vom aktuellen Punkt (100, 0) zum Punkt (50, 100). Und der letzte Befehl in unserem Glyphenpfad – „z“ heißt „closepath“ und wird verwendet, um den aktuellen Unterpfad zu schließen, indem eine gerade Linie vom aktuellen Punkt zum Anfangspunkt des aktuellen Unterpfads gezogen wird – (0,0).

So from the explained example we briefly learned how the glyphs are represented in the SVG format, how to access these glyphs, and what the most common characteristics a font should have in order to get texts rendered with this font displayed correctly.

Wie erstelle ich eine SVG-Schriftart?

Normalerweise hat der Prozess der Erstellung einer SVG-Schriftart die folgende Reihenfolge:

1. Erstellen Sie Vektorgrafiken für jedes Glyph der Schriftart. Zu diesem Zweck können Sie Software wie Illustrator, Inkscape oder Glyphs verwenden.
2. Exportieren Sie jede Glyphe als SVG-Datei und stellen Sie sicher, dass Sie für jede Glyphe denselben Schriftartnamen und dieselben Attribute verwenden.
3. Erstellen Sie die Schriftartdatei mit Software wie FontForge oder FontLab. Importieren Sie dann die SVG-Dateien für jedes Zeichen.
4. Fügen Sie der erstellten Datei Metadaten wie den Namen der Schriftart, den Autor und die Lizenz hinzu.
5. Testen Sie das Ergebnis. Installieren Sie die Schriftart auf Ihrem Computer und probieren Sie sie in verschiedenen Texteditoren und Designprogrammen aus. Beachten Sie, dass nicht alle dieser Programme SVG-Schriftarten unterstützen. Stellen Sie daher sicher, dass Sie über die entsprechenden Programme verfügen, um SVG-Schriftarten zu erstellen und zu bearbeiten.

Abschluss

SVG-Schriftarten erfreuen sich einer ziemlich hohen Beliebtheit und sind in vielen Fällen eine bessere Lösung als andere Schriftarten. Aber um zu entscheiden, ob dieses Format die richtige Wahl für Ihr Projekt ist, sollten Sie sich zunächst über die Vor- und Nachteile informieren.

Wenn Sie online mit SVG arbeiten möchten, ohne zusätzliche Software zu laden, können Sie plattformübergreifende Anwendungen verwenden. Wenn Sie sich auf die Arbeit mit Schriftarten konzentrieren, gehen Sie zu einer anderen Reihe von Apps zum Arbeiten mit Schriftarten Dort finden Sie Konverter zum Umwandeln Ihrer SVG-Schriftartendateien in ein geeigneteres Format, Viewer und Fusionen.