Schrift und Webfonts für SVG

SVG Text mit geladenen Schriften, CSS Webfonts

SVG kann Webfonts genauso interpretieren wie lokale Fonts. Es gibt zwar Webfonts auch im SVG-Format, aber Fonts im WOFF-Format haben den Vorteil, dass keine lange Schriftliste mit alternativen Fonts angeboten werden muss.

SVG-Fonts, die mit dem Erscheinen von SVG im Jahr 1999 für die Typografie sorgen sollten, werden heute nur noch von Safari unterstützt und spielen keine Rolle mehr.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Ladbare Fonts für SVG

Als SVG als Grafik für das Web entwickelt und definiert wurde, gab es noch keine Spur von ladbaren Schriften für Webseiten – Webfonts. Stattdessen konnte SVG Informationen über Glyphen (das grafische Zeichen für einen Buchstaben, eine Ziffer oder ein Symbol) verarbeiten.

Als SVG in HTML5 endlich den Weg in das HTML-Dokument fand, hatten die Browser bereits WOFF als Schriftformat für Webfonts an Bord. Wir bekommen zwar in den Webfont-Kits hier und da noch SVG-Fonts angeboten oder können SVG-Fonts mit dem Webfont-Generator von Fontsquirrel erzeugen, aber SVG-Fonts sind überflüssig und veraltet, seitdem SVG WOFF-Fonts interpretiert.

Fonts in inline-SVG

Wenn SVG direkt als svg-Tag in die HTML-Seite eingebettet ist, gehorcht SVG den CSS-Regeln der Webseite. Dabei ist es egal, ob lokale Fonts oder Webfonts eingesetzt werden.

CSS der Webseite
@font-face {
   font-family: 'Amadeus';
   src: url(Amadeus.woff);
   }
h2, text {font-family: 'Amadeus'}
Externe Schriftdatei für Text in SVG

SVG als img-Tag und Webfonts

Wird die SVG-Grafik über ein img-Tag eingebunden, bekommt sie von den CSS-Regeln der Webseite nichts mit. Auch ein eigenes style-Tag zeigt auf der Webseite keine Wirkung.

CSS in der SVG-Datei
<style type="text/css">
@font-face {
    font-family: 'uglyqua';
    src:  url('uglyqua-webfont.woff#uglyqua') format('woff'),
         url('uglyqua-webfont.svg#uglyqua') format('svg');
}
</style>
Font in SVG

Wenn ein spezieller Font in der SVG-Grafik zuverlässig eingesetzt werden soll, dann hilft erst ein Font, der als Base64 in die SVG-Datei eingebunden wird.

Font als Base64 in externem SVG eingebettet
Eingebettet als Base64 – dann zeigt sich der Font auch bei einem externen SVG
<style>
@font-face {
    font-family: 'black_roseregular';
    src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAA70AA8AAAAAGF …) format('woff2'),
    font-weight: normal;
    font-style: normal;
}
</style>

<clipPath id="blackroses">
	 <text font-size="116" 
		   font-family="black_roseregular">
	 <tspan x="7" y="150">Black Roses</tspan>
	 </text>
</clipPath>

<image clip-path="url(#blackroses)" width="600" height="200" xlink:href="data:image/jpeg;base64,/9j/4QAYRXhp … /Z "/>

SVG via iframe / object und Webfonts

Besser funktionieren Webfonts, wenn die SVG-Grafik über iframe oder ein HTML object Tag eingebunden ist. Dabei zeigt die Grafik Text in Webfonts, wenn die Webfonts direkt in der SVG-Datei definiert sind.

CSS in der SVG-Datei
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     … >
<style type="text/css">
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  src: local('Kalam'), 
       local('Kalam-Regular'), 
       url(https://fonts.gstatic.com/s/kalam/v7/6wE4KkDTwLxfsX94FmTAW6CWcynf_cDxXwCLxiixG1c.woff) format('woff');
}
tspan { font-family:'Kalam', cursive; fill:hsl(356,30%,20%) }
</style>
    <g … >
</svg>
Je schneller du dich bewegst, desto schwerer wirst du. Gott sei Dank ist das nicht andersrum. E = m × c 2