SVG Tutorial

Das Attribut kerning stammt wieder aus der Attributgruppe PresentationAttributes-TextContentElements, das Attribut text-rendering gehört zur Attributgruppe PresentationAttributes-Graphics.

• Kerning - kerning
• Anti-Aliasing - text-rendering

kerning
Voreinstellung: auto.
Kerning bedeutet die Bereichsunterschneidung von Zeichen.
Bei einigen Schriftarten haben die einzelnen Zeichen unterschiedliche Ausmaße in der Breite - das "i" ist zum Beispiel schmaler als das "w".
Mit dem Attribut kerning haben Sie in solchen Fällen die Möglichkeit die Darstellung der Zeichen Ihren Bedürfnissen anzupassen.
Die Standardeinstellung auto ist allerdings in den meisten Fällen die beste Lösung ;-).

text-rendering
Voreinstellung: optimizeQuality.
Mit Antialiasing wird die Fähigkeit des user agents bezeichnet, die Ränder von Textzeichen etwas weichgezeichnet darstellen zu können, d.h. die Kanten des Textes werden geglättet.
Standardmäßig ist das Antialiasing eingeschaltet.
Um es zu deaktivieren, müssen Sie das Attribut text-rendering mit dem Wert optimizeSpeed verwenden. Dies empfiehlt sich vor allem bei der Verwendung von kleinen Schriftgrößen.
Dieses Attribut gehört zur Attributgruppe PresentationAttributes-Graphics.

Beispiel Quellcode

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="190"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Kerning und Aliasing</title>
<desc>Lesbarkeit des Textes verbessern</desc>
  <defs>
    <style type="text/css"><![CDATA[
      text {font-family:Verdana,sans-serif;}
      .kerning {font-size:40px; font-family:'Times New Roman';}
    ]]></style>
  </defs>

  <!-- Bereichsunterschneidung beeinflussen -->
  <text class="kerning" x="20" y="50">
    KERNING auto *
  </text>
  <text class="kerning" x="20" y="90" kerning="5">
    KERNING 5
  </text>

  <!-- Antialiasing abschalten -->
  <text x="30" y="115"
    style="text-rendering:optimizeSpeed; fill:red; font-size:10px;">
    .. die mit * gekennzeichnete ist die default-Einstellung ..
  </text>

  <text x="180" y="140" text-rendering="optimizeSpeed">
    Antialiasing ausgeschaltet
  </text>
  <text x="180" y="160">
    Antialiasing eingeschaltet *
  </text>
</svg>