Schrift in SVG einbetten

Das Einbetten von Schrift in SVG ist relativ simpel. Das <text>-Element enthält als Attribute die x- und y-Position des linken Endes der Schriftlinie der Textzeile, wobei sich der Nullpunkt des Koordinatensystems – wie in SVG üblich – in der linken oberen Ecke der Grafik befindet.

Allerdings ist hier zu beachten, dass – wie auch in HTML – die angegebenen Schriftarten auf dem Rechner des Betrachters der Grafik installiert sein müssen, sonst wird ein beliebiger anderer Font verwendet. Wenn eine exakte Darstellung der Schrift unverzichtbar ist, so muss diese daher vektorisiert eingebunden werden. Dies lässt sich mit einem Vektorgrafikeditor wie z. B. Inkscape umsetzen.

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
 
<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' baseProfile='full' width='350px' height='180px'>
  <style>
    text { font-family:'DejaVu Sans',Verdana,'Lucida Sans',Arial,Helvetica,sans-serif; font-weight:bold; font-size:45px; fill:red; }
    line { stroke:black; }
  </style>
  <text x='20' y='80'>Hello World!</text>
  <line x1='20' y1='80' x2='330' y2='80' />
</svg>
SVG-Beispiel für Text SVG-Beispiel für Text

In Kombination mit weiteren SVG-Attributen lassen sich so komplexe Effekte realisieren:

 decocode

Hier der Quelltext dieser Grafik. Man beachte, dass dieser Quelltext gerade mal 1,8 kB umfasst, während eine PNG-Datei mit dem gleichen Bildinhalt ca. 46 kB groß ist und dabei nicht einmal verlustfrei skaliert werden kann!

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<?xml version='1.0' standalone='no'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='580px' height='215px'>
  <style>
    tspan { font-family:Ubuntu,sans-serif; font-weight:bold; font-size:110px; }
    #z1 { fill:red; filter:url(#blur1); }
    #z2, #z4 { stroke:url(#grad3); stroke-width:8px; }
    #z3, #z5 { fill:url(#grad1); }
  </style>
  <defs>
    <linearGradient id='grad1' x1='50%' y1='0%' x2='50%' y2='100%'>
      <stop offset='0%' stop-color='#66aaff' />
      <stop offset='100%' stop-color='#001144' />
    </linearGradient>
    <linearGradient id='grad2' x1='50%' y1='0%' x2='50%' y2='100%'>
      <stop offset='0%' stop-color='#000000' stop-opacity='.6' />
      <stop offset='70%' stop-color='#000000' stop-opacity='1' />
    </linearGradient>
    <linearGradient id='grad3' x1='50%' y1='0%' x2='50%' y2='100%'>
      <stop offset='0%' stop-color='#fff6bf' />
      <stop offset='70%' stop-color='#ff9900' />
      <stop offset='100%' stop-color='#993300' />
    </linearGradient>
    <filter id='blur1' x='0' y='0'>
      <feGaussianBlur in='SourceGraphic' stdDeviation='15' />
    </filter>
    <text id='dc'><tspan x='10' y='120'>&#160;decocode</tspan></text>
  </defs>
  <rect x='0' y='0' width='580' height='280' style='fill:black;' />
  <use id='z4' xlink:href='#dc' transform='scale(-1 1) translate(-580 -25) rotate(180 290 140)' />
  <use id='z5' xlink:href='#dc' transform='scale(-1 1) translate(-580 -25) rotate(180 290 140)' />
  <rect x='0' y='100' width='580' height='130' fill='url(#grad2)' />
  <use id='z1' xlink:href='#dc' />
  <use id='z2' xlink:href='#dc' />
  <use id='z3' xlink:href='#dc' />
</svg>
Weiterführende Websites
W3C
http://www.w3.org/TR/SVG/text.html
SVG-Spezifikation zu Schrift
Jakob Jenkov
http://tutorials.jenkov.com/svg/text-element.html
kurzes Tutorial zu Schrift in SVG