Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Design & Illustration
  2. SVG

Was ist eine SVG-Schriftart? Alles über SVG-Schriftarten

by
Read Time:10 minsLanguages:

German (Deutsch) translation by Rebecca Priscilla (you can also view the original English article)

Das innovative SVG-Schriftformat ist mit voller Wucht angetreten, um traditionelle Schriftformate aufzurütteln. Sehen wir uns einmal an, worum es hier geht!

In der Welt der Schriftformate hat sich in den letzten Jahren nicht viel verändert, und als SVG-Schriftdateien auf den Markt kamen, eroberten sie die Welt des Designs im Sturm. SVG-Schriftzeichen enthalten so viel mehr Attribute als normale Schriften, und wir werden in diesem Artikel darüber sprechen, was eine SVG-Schriftart ist. Wir werden auch darauf eingehen, wie man SVG-Schriftarten herstellt, wie man SVG-Schriftarten installiert und wie man eine SVG-Schriftart verwendet. Sind Sie bereit, einzusteigen?

Wenn Sie auf der Suche nach tollen Beispielen für SVG-Schriften sind, finden Sie unter Envato Elements und GraphicRiver einige schöne SVG-Schriften und SVG-Kalligrafie-Schriften.

Was ist eine SVG-Schriftart?

Eine SVG-Schriftart ist eine neue Version des OpenType-Formats, wobei SVG für Scalable Vector Graphics (skalierbare Vektorgrafiken) steht. Das SVG-Glyphenformat ermöglicht es, die Zeichen in mehreren Farben und verschiedenen Transparenzen darzustellen, wobei einige sogar animiert sein können. Diese Attribute werden von den regulären OTF- und TTF-Formaten nicht unterstützt.

OpenType-SVG-Schriften sind auch als Farbschriften bekannt. Ein Unterschied zwischen regulären Schriften und SVG-Schriften ist die Dateigröße. Die SVG-Schriftartendateien sind mit so vielen Informationen eingebettet, dass es sich statt um Kilobyte um Megabyte handelt.

SVG-Schriften sind besonders nützlich, wenn Sie mit von Pinseln inspirierten Schriften entwerfen. Sie werden feststellen, dass Aquarelleffekte halbtransparente Bereiche enthalten. Hier sind ein paar Beispiele für Schriften mit mehreren transparenten Bereichen.

Querins SVG Pinsel Schriftart

Ein perfektes Beispiel für Mehrfachtransparenzen ist eine von Pinselstrichen inspirierte Schrift. Dieses Beispiel einer SVG-Schriftart wurde aus einem authentischen Pinsel erstellt, so dass sie sich wie handgemacht anfühlt. Die Schrift eignet sich perfekt für redaktionelles Design, Beschilderungen und sogar Logos.

Querins SVG Brush FontQuerins SVG Brush FontQuerins SVG Brush Font
Querins SVG Pinsel Schriftart

Cardus Brush SVG Schriftart

Ein weiteres Beispiel für eine SVG-Schriftart, die mehrere Transparenzen und viel Textur enthält, ist Cardus Brush. Dieser fette Stil wird erreicht, indem jede Glyphe einer SVG-Schrift mit den Händen gemalt wird. Diese SVG-Schriftart ist fett und perfekt, wenn Sie auffällige Designs erstellen möchten.

Cardus Brush SVG FontCardus Brush SVG FontCardus Brush SVG Font
Cardus Brush SVG Schriftart

Das SVG-Schriftartformat ermöglicht es auch, dass SVG-Schriftartglyphen mehrere Farben enthalten können. Das bedeutet, dass jedes Zeichen mehr als eine Farbe enthält, z.B.:

Futuristico SVG Farbschriftart

Dieses SVG-Schriftartbeispiel enthält Farbverläufe und mehrere Farben in einer einzigen SVG-Schriftart-Glyphe. Diese geometrische und komplexe Schrift eignet sich als Anzeigeschrift für jede Art von redaktioneller Gestaltungsarbeit. Sie können eine benutzerdefinierte Farbe erstellen, indem Sie Adobe Photoshop erkunden.

Futuristico SVG Color FontFuturistico SVG Color FontFuturistico SVG Color Font
Futuristico SVG Farbschriftart

Corn Fruit Loops SVG-Farbschrift

Benötigen Sie eine nahrungsmittelbezogene SVG-Schriftart? Die Schrift Corn Fruit Loops ist das perfekte Konzept für typografische Lebensmittel. Wenn Sie sich fragen, wie Sie die Farbe in Photoshop ändern können, um eine Art benutzerdefinierte Schriftart in SVG zu erstellen, lesen Sie weiter unten weiter. Sie können die Farbe der Fruit-Loops auf jede beliebige Palette ändern, die Sie möchten.

Corn Fruit Loops SVG Color FontCorn Fruit Loops SVG Color FontCorn Fruit Loops SVG Color Font
Corn Fruit Loops SVG-Farbschrift

Wie man SVG-Schriften installiert

Wenn Sie sich fragen, wie man SVG-Schriftarten installiert, können Sie dies wie bei einer normalen Schriftart tun. Die meisten Download-Dateien werden in einem .zip enthalten sein, also fahren Sie fort, den Ordner zu entpacken. OpenType-SVG-Schriftarten haben die gleichen Dateierweiterungen wie normale Schriftarten, .ttf und .otf. Unter Mac, doppelklicken Sie auf eine dieser Erweiterungen, und das Schriftenbuch wird geöffnet. Klicken Sie auf Font installieren und es ist bereit zur Benutzung!

Wenn Sie sich fragen, wie Sie SVG-Schriften unter Windows 10 installieren können, können Sie dies beispielsweise über die Systemsteuerung oder einen beliebigen Schriftartenmanager Ihrer Wahl tun. Die Schriften werden auf die gleiche Weise wie die übrigen Schriften angezeigt, d.h. in reinem schwarz.

SVG-Schriftarten werden derzeit von iOS 12, MacOS Mojave und Windows 10 unterstützt. Derzeit können Sie diese Schriftarten ab den folgenden Versionen verwenden: Illustrator CC 22.0.0, Photoshop CC 18.0 und InDesign CC 13.0.1. Die einzigen Webbrowser, die SVG-Schriftarten unterstützen, sind Safari und iOS Safari.

How to install SVG fontsHow to install SVG fontsHow to install SVG fonts

Wie man SVG-Schriften in Photoshop verwendet

Die Schriftart, die ich verwenden werde, um Ihnen zu zeigen, wie man SVG-Schriften in Photoshop verwendet, ist Bluesky SVG Schriftart und kommt in Blautönen. Diese SVG-Schriftart hat aufgrund der Schatten, die in jeder SVG-Schriftglyphe enthalten sind, einen erstaunlichen 3D-Look.

Bluesky SVG FontBluesky SVG FontBluesky SVG Font
Bluesky SVG Schriftart

Wählen Sie in Photoshop das Textwerkzeug (T), erstellen Sie ein Textfeld auf der Seite und fügen Sie Ihren Inhalt hinzu. Wählen Sie in der Symbolleiste die SVG-Schriftart Ihrer Wahl. Sie werden feststellen, dass das Logo auf der rechten Seite des Dropdown-Menüs das OTF-Logo mit einem kleinen SVG-Logo anzeigt.

how to use SVG fonts in Photoshop select the text tool and choose your custom font in SVGhow to use SVG fonts in Photoshop select the text tool and choose your custom font in SVGhow to use SVG fonts in Photoshop select the text tool and choose your custom font in SVG

Um die Farbe dieser speziellen Schriftart zu ändern, gehen Sie zum Ebenen-Panel. Klicken Sie mit der rechten Maustaste auf die Textebene und wählen Sie Fülloptionen. Markieren Sie im Pop-up-Fenster die Option Farbüberlagerung und klicken Sie darauf, um die Einstellungen zu öffnen. Stellen Sie den Füllmethode auf Farbe, klicken Sie auf das Farbfeld und wählen Sie die Farbe Ihrer Wahl. Ich werde die Farbe in Orange ändern, um die SVG-Schrift fetter zu machen. Klicken Sie auf OK.

how to use SVG fonts in Photoshop select the blending option and colorhow to use SVG fonts in Photoshop select the blending option and colorhow to use SVG fonts in Photoshop select the blending option and color

Was ist, wenn Sie eine Schriftart mit mehreren Farben haben? Für dieses Beispiel zur Verwendung von SVG-Schriften in Photoshop verwenden wir Color Paper Color Schriftart. Der Designer wollte die SVG-Schriftart so aussehen lassen, als hätte sie mehrere Ebenen. Das Ergebnis ist eine erstaunliche Mischung aus mehreren Dimensionen und Farben.

Color Paper Color FontsColor Paper Color FontsColor Paper Color Fonts
Color Paper Color Schriftart

Für Schriften mit mehreren Farben wie Color Paper 3D haben Sie die Möglichkeit, die zuvor beschriebene Methode zu verwenden. Diese Methode ermöglicht es Ihnen, die Zeichen mit einfarbige Schattierungen zu beschichten.

Wenn Sie die Vielfalt der Farben, die mit der Schriftart geliefert wird, beibehalten möchten, gehen Sie zum Ebenen-Panel. Klicken Sie auf Neue Füll- oder Neue Einstellungsebene erstellen > Farbton/Sättigung. Drücken Sie die Optionstaste und klicken Sie auf die neue Ebene, um eine Schnittmaske zu erstellen. Wechseln Sie zur Ebeneneigenschaften, wo Sie die Farbe durch Verschieben der Optionen Farbton, Sättigung und Helligkeit ändern können.

Wenn Sie sich genauer informieren möchten, klicken Sie auf das Master-Dropdown-Menü und wählen Sie jede Farbe aus. Stellen Sie jede Farbe mit den unten liegenden Sliders ein

SVG color font add an adjustment layer and change the huesaturation SVG color font add an adjustment layer and change the huesaturation SVG color font add an adjustment layer and change the huesaturation

Wie man Fontsymbole aus SVG erstellt

Icon-Schriften werden hauptsächlich als Web-Fonts verwendet, da die Icons skalierbare CSS-Eigenschaften wie verschiedene Farben und Schatten angewendet werden können. All dies kann mit einer besseren Geschwindigkeit durchgeführt werden, da die Symbole schneller geladen werden. Der einzige Nachteil liegt in den vielen verschiedenen Webbrowsern, so dass die Glättung der Icons unzuverlässig ist. Im Internet gibt es zahlreiche kostenlose und kostenpflichtige Tools, die Ihnen bei der Konvertierung von SVG-Dateien in Fontsymbole wie IcoMoon und Fontello helfen können.

Um die Schriftartensymbole zu erstellen, stellen Sie sicher, dass Sie die Dateien als SVG aus Photoshop oder Illustrator gespeichert haben. Importieren Sie in IcoMoon die SVG-Dateien, wählen Sie die Symbole, die Sie erzeugen möchten, und klicken Sie auf Schriftart generieren.

Select the individual SVG files from your computer and click OpenSelect the individual SVG files from your computer and click OpenSelect the individual SVG files from your computer and click Open

Sie können jede Datei umbenennen und mit dem Herunterladen fortfahren. Sie können auch den Code zur Verwendung auf Ihrer Website erhalten. Mit der gleichen Methode können Sie auch eine Schriftartdatei aus SVG erstellen und Ihre eigene benutzerdefinierte Schriftart in SVG haben.

After importing allt he SVG files for your font click on Generate Font After importing allt he SVG files for your font click on Generate Font After importing allt he SVG files for your font click on Generate Font

Wenn Sie sich fragen, wie man SVG-Dateien in Schriften konvertiert, ist der Prozess genau derselbe. Zeichnen Sie jedes Zeichen im Vektor- oder Bitmap-Format mit Adobe Illustrator oder Adobe Photoshop. Sie können die gleichen Anwendungen wie oben oder kostenpflichtige Software wie Glyphs verwenden, eine professionelle Schriftbearbeitungssoftware, mit der Sie SVG-Dateien importieren können, um jedes Schriftzeichen zu erstellen. Jetzt sind Sie bereit, SVG-Schriften zu erstellen!

Envato Elements Assets: SVG-Schriftarten-Bibliothek

SVG-Fonts werden hauptsächlich als Display-SVG-Fonts und nicht als Fließtext verwendet. Das liegt daran, dass sie spezielle Informationen enthalten, die dazu beitragen, Ihren Text hervorzuheben. Diese Schriften sind auffälliger und visuell komplexer - deshalb enthalten sie auch so viele Attribute. Verwenden Sie sie für Beschilderungen, Logos, Plakate, Überschriften, Buchumschläge usw. Wir haben einige wirklich großartige Optionen von Envato Elements zusammengestellt, die Sie sich ansehen sollten:

Hamilton SVG Schriftkollektion

Suchen Sie nach SVG-Monogramm-Schriften? Keine Suche mehr! Dieses Paket enthält die fettesten Optionen für SVG-Schriften. Sie erhalten eine serifenlose, serifenlose und Skript-Schriftart. Die Schriften sind handgefertigt und eignen sich für klassische und Vintage-Marken.

Hamilton SVG Font CollectionHamilton SVG Font CollectionHamilton SVG Font Collection
Hamilton SVG Schriftkollektion

Bouqet Blume & Aquarell SVG Schriftart

Jede SVG-Font-Glyphe ist in diesem Satz vollkommen einzigartig. Die Schrift hat zwei Versionen, eine mit echten Blumen und eine mit einem Aquarelleffekt. Wenn Sie nicht über die neueste Photoshop-Version verfügen, erhalten Sie die PSD-Datei, damit Sie die einzelnen Zeichen verwenden können. Diese SVG-Schriftart ist fett und fällt überall auf, wo Sie sie verwenden.

Bouqet Flower Watercolor SVG FontBouqet Flower Watercolor SVG FontBouqet Flower Watercolor SVG Font
Bouqet Blume & Aquarell SVG Schriftart

Astute & Dude SVG Schriftart & Solid

Suchen Sie nach einer fantastischen handgemalten Pinselschrift? Jede Glyphe einer SVG-Schrift ist hochauflösend, und die Striche auf den Zeichen überlappen sich, wodurch eine schöne Textur und Tiefe entsteht. Diese Schrift ist so authentisch für die menschliche Hand, dass die Leute nicht merken werden, dass es sich um eine SVG-Datei handelt.

Astute Dude SVG Font SolidAstute Dude SVG Font SolidAstute Dude SVG Font Solid
Astute & Dude SVG Schriftart & Solid

Aston Vintage Farbschrift

Wenn Sie ein Projekt brandmarken und eine herausragende Marke schaffen wollen, wäre Aston Vintage eine großartige SVG-Monogramm-Schriftart. Die dekorative Schrift hat einen altmodischen und super-ornamentalen Look, geeignet für eine Whisky-Marke oder eine Marke, die stolz darauf ist, vertraut zu werden.

Aston Vintage Color FontAston Vintage Color FontAston Vintage Color Font
Aston Vintage Farbschrift

Light Shutter SVG Schriftart

Diese moderne SVG-Kalligrafie-Schriftart ist wunderschön gestaltet. Durch das SVG-Format kann sie einen Aquarelleffekt erzielen, so dass sie sich perfekt für Hochzeitseinladungen eignet, wenn Sie etwas Kostengünstiges wünschen. Das Paket enthält viele Glyphen, die Ihr Design natürlich aussehen lassen.

Light Shutter SVG FontLight Shutter SVG FontLight Shutter SVG Font
Light Shutter SVG Schriftart

Thinks OpenType SVG Schriftart

Um von Aquarellfarben abzurücken, ist diese SVG-Schriftart ein mutiger Schritt, da sie Ölfarbe verwendet. Die SVG-Glyphen haben eine dickere Konsistenz, auch in der Textur. Die hochauflösenden Pinselstriche lassen es hyperrealistisch erscheinen. Diese experimentelle Schrift eignet sich für digitale Beschriftungen, Verpackungen und vieles mehr!

Thinks OpenType SVG FontThinks OpenType SVG FontThinks OpenType SVG Font
Thinks OpenType SVG Schriftart

Simbox Geometrische Schriftart

Simbox ist ein großartiges Beispiel dafür, wie SVG-Schriftdesigns angewendet werden können. Diese serifenlose SVG-Schrift ist mit ihren geometrischen Formen ein mutiger Stil. Die Farbelemente bringen das Ganze einfach zum Vorschein und machen die Schrift aus dem Gewöhnlichen heraus, exzentrisch und perfekt für Display-Designs.

Simbox Geometric FontSimbox Geometric FontSimbox Geometric Font
Simbox Geometrische Schriftart

10 Color SVG Schriftartenbibliothek

Benötigen Sie viele Optionen in Ihrer SVG-Schriftartenbibliothek? Dies ist das ultimative Paket, das Sie in Ihrem Arsenal haben sollten. Es enthält zehn Schriften mit verschiedenen Themen, von einem Sandstrand bis hin zu münzinspirierten Formen und verschiedenen Stofftexturen.

10 Color SVG Fonts Library10 Color SVG Fonts Library10 Color SVG Fonts Library
10 Color SVG Schriftartenbibliothek

Snowy Winter Floral SVG Farbschriftart

Designer nutzen die Vorteile thematischer SVG-Schriftformate voll aus. Diese SVG-Schriftart ist kräftig und zart zugleich. Die Schriftformen sind fett, sitzen aber auf dem Hintergrund und sind mit schönen Winterblumen geschmückt. Verwenden Sie diese SVG-Schriftart für Ihre nächste Weihnachtskarte!

Snowy Winter Floral SVG Color FontSnowy Winter Floral SVG Color FontSnowy Winter Floral SVG Color Font
Snowy Winter Floral SVG Farbschriftart

Monopixel Awesome

Schauen Sie sich diesen fantastischen Schriftstil an! Diese Neuinterpretation der klassischen Monospace-Schriftart ist innovativ und enthält mehrere farbige Pixel, die jede Glyphe einer SVG-Schriftart ausmachen. Diese farbenfrohe Schrift macht Spaß—ist sie für das nächste Spiele-Event bereit?

Monopixel AwesomeMonopixel AwesomeMonopixel Awesome
Monopixel Awesome

Was sind Ihre Lieblings-SVG-Schriften?

SVG-Schriften sind der neueste Fortschritt in der Welt der Schriftformate, die eine Zeit lang ziemlich ruhig geblieben war. Dieser Fortschritt bei den Schriften führte zu dynamischeren und interaktiven Schriften, die noch eindrucksvollere Designs erzeugen können.

In diesem Artikel haben wir behandelt, was eine SVG-Schriftart ist, wie man Schriftartendateien aus SVG-Dateien erstellt, wie man Schriftartensymbole aus SVG erstellt und wie man eine SVG-Schriftart verwendet. Das alles sind die Grundlagen, die Sie brauchen, um einzutauchen und auf den SVG-Zug aufzuspringen. Sie sind eine ziemlich gute Option, wenn Sie Ihren Entwurf auf die nächste Stufe bringen wollen! Lassen Sie uns im Kommentarabschnitt unten wissen: Was sind Ihre Lieblings-SVG-Schriftarten?

Wenn Sie unter Zeitdruck stehen und auf der Suche nach qualitativ hochwertigen SVG-Schriften sind, sollten Sie sich Envato Elements und GraphicRiver ansehen, um einige hervorragende SVG-Glyphen und SVG-Farbschriften zu erhalten. Suchen Sie nach kostenlosen SVG-Schriften? Schauen Sie sich die SVG-Schriftartenbibliothek von FontSpace an—dort gibt es tolle Optionen!

One subscription.
Unlimited Downloads.
Get unlimited downloads