SVG: Text 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.

<?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>

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

<?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>

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

<?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>

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.

<?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>

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.

<?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>

Beispiel

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

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!

<?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>