SVG: Schrift einbetten

► W3C-Empfehlung: <text> <tspan>

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 CSS – die angegebenen Schriftarten auf dem Rechner des Betrachters der Grafik installiert sein müssen, sonst wird ein Fallback-Font als Ersatz verwendet. Bei SVGrafiken im Web können Schriftarten mit der @font-face-Regel von CSS eingebunden werden. Bei eigenständigen Grafikdateien muss die Schrift vektorisiert werden. Dies lässt sich mit einem Vektorgrafikeditor wie z. B. Inkscape umsetzen.

Mit dem Element <tspan> können einzelne Abschnitte eines Textes mit abweichenden Eigenschaften versehen werden.

Code auswählen
1
2
3
4
5
6
7
8
9
10
11
 
<?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' version='1.1' baseProfile='full' width='350px' height='180px'>
  <style type='text/css'>
    text { font-family:'DejaVu Sans',Verdana,'Lucida Sans',Arial,Helvetica,sans-serif; font-weight:bold; font-size:45px; fill:red; }
    tspan { fill:green; font-family:'serif'; }
    line { stroke:black; }
  </style>
  <text x='20' y='80'><tspan>H</tspan>ello <tspan>W</tspan>orld!</text>
  <line x1='20' y1='80' x2='330' y2='80' />
</svg>
SVG-Beispiel für Text SVG-Beispiel für Text

Text ausrichten mit text-anchor

► W3C-Empfehlung: text-anchor

Mit dem Attribut text-anchor kann die Ausrichtung des Textes relativ zur x-Position angegeben werden. Folgende Werte sind möglich:

start – am Anfang des Textes (Voreinstellung)
middle – in der Mitte des Textes
end – am Ende des Textes

Code auswählen
1
2
3
4
5
6
7
8
9
10
11
12
 
<?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' version='1.1' baseProfile='full' width='350px' height='180px'>
  <style type='text/css'>
    text { font-family:'DejaVu Sans',Verdana,'Lucida Sans',Arial,Helvetica,sans-serif; font-weight:bold; font-size:25px; fill:red; }
    line { stroke:black; }
  </style>
  <text x='175' y='55' text-anchor='start'>Hello World!</text>
  <text x='175' y='95' text-anchor='middle'>Hello World!</text>
  <text x='175' y='135' text-anchor='end'>Hello World!</text>
  <line x1='175' y1='0' x2='175' y2='180' />
</svg>
SVG-Beispiel für Text SVG-Beispiel für Text

Bei Schriften, die von rechts nach links laufen, wie beispielsweise Hebräisch oder Arabisch, wird die Ausrichtung entsprechend angepasst, wenn die Schreibrichtung mit dem Attribut direction explizit angegeben wurde.

ltr – links nach rechts (Voreinstellung)
rtl – rechts nach links

Code auswählen
1
2
3
4
5
6
7
8
9
10
11
12
 
<?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' version='1.1' baseProfile='full' width='350px' height='180px'>
  <style type='text/css'>
    text { font-family:'DejaVu Sans',Verdana,'Lucida Sans',Arial,Helvetica,sans-serif; font-weight:bold; font-size:25px; fill:red; }
    line { stroke:black; }
  </style>
  <text x='175' y='55' text-anchor='start' direction='rtl'>السلام عليكم</text>
  <text x='175' y='95' text-anchor='middle' direction='rtl'>السلام عليكم</text>
  <text x='175' y='135' text-anchor='end' direction='rtl'>السلام عليكم</text>
  <line x1='175' y1='0' x2='175' y2='180' />
</svg>
SVG-Beispiel für Text SVG-Beispiel für Text

Textlänge festlegen mit textLength

► W3C-Empfehlung: textLength

Mit dem Attribut textLength kann die Breite eines Textes festgelegt werden. Die einzelnen Zeichen werden entsprechend dieser Angabe gesperrt oder unterschnitten.

Code 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' version='1.1' baseProfile='full' width='350px' height='180px'>
  <style type='text/css'>
    text { font-family:'DejaVu Sans',Verdana,'Lucida Sans',Arial,Helvetica,sans-serif; font-weight:bold; font-size:35px; fill:red; }
    line { stroke:black; }
  </style>
  <text x='175' y='95' textLength='350' text-anchor='middle'>Hello World!</text>
  <line x1='175' y1='0' x2='175' y2='180' />
</svg>
SVG-Beispiel für Text SVG-Beispiel für Text

Text an Pfad ausrichten mit <textPath>

► W3C-Empfehlung: <textPath>

Mit dem Element <textPath> (einem Kind eines <text>-Elements) kann Text an einem gegebenen Pfad ausgerichtet werden. Dieser Pfad wird über seine ID identifiziert und in dem Attribut xlink:href referenziert. Dazu muss das <svg>-Tag im Attribut xmlns:xlink die URI des entsprechenden XML-Namensraumes enthalten.

Das <textPath>-Element kann weitere Attribute enthalten, wie beispielsweise startOffset, in dem der Abstand zum Anfang des Pfades angegeben wird.

Code auswählen
1
2
3
4
5
6
7
8
9
10
11
12
 
<?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 type='text/css'>
    text { font-family:'DejaVu Sans',Verdana,'Lucida Sans',Arial,Helvetica,sans-serif; font-weight:bold; font-size:30px; fill:red; }
    path { stroke:black; }
  </style>
  <path id='tp' fill='none' d='M 10,90 Q 82,110 175,90 Q 268,70 340,90' />
  <text>
    <textPath textLength='250' startOffset='20' xlink:href='#tp'>Hello World!</textPath>
  </text>
</svg>
SVG-Beispiel für Text SVG-Beispiel für Text

Beispiel

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!

Code 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
37
 
<?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 type='text/css'>
    @font-face { font-family:Ubuntu; font-weight:bold; font-style:normal; src:url(/fonts/Ubuntu-B.ttf); }
    text { 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='-15' y='-15' width='20' height='20'>
      <feGaussianBlur in='SourceGraphic' stdDeviation='15' />
    </filter>
    <text id='dc' text-anchor='middle' x='290' y='140'>decocode</text>
  </defs>
  <rect x='0' y='0' width='580' height='280' fill='black' />
  <use id='z4' xlink:href='#dc' transform='scale(-1 1) translate(-580 15) rotate(180 290 140)' />
  <use id='z5' xlink:href='#dc' transform='scale(-1 1) translate(-580 15) rotate(180 290 140)' />
  <rect x='0' y='110' 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>