Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  |  Kapitel 11   

11.3 Eigenschaften zur Farbdarstellung

color
Voreinstellung: vom user agent abhängig.
Das Attribut color entspricht dem gleichnamigen Attribut aus der CSS 2 Spezifikation. Es wird zur Zeit jedoch nicht unterstützt. Verwenden Sie stattdessen die SVG-eigenen Eigenschaften fill und/oder stroke.

color-interpolation
Voreinstellung: sRGB.
Mit Hilfe des Attributs color-interpolation können Sie das Verhalten des user agents bei der Farbberechnung beeinflussen. Mögliche Werte sind: sRGB (Farbberechnung nach dem sRGB-Farbmodell), auto (der user agent entscheidet) und linearRGB (Farbberechnung nach dem linearen RGB-Farbmodell).

color-rendering
Voreinstellung: auto.
Durch das Attribut color-rendering können Sie das Verhalten des user agents bei der Dastellung von Farbe oder Farbverläufen beeinflussen. Mögliche Werte sind auto, optimizeSpeed und optimizeQuality.
Der Wert auto errechnet automatisch einen günstigen Mittelwert zwischen Qualität und Geschwindigkeit der Anzeige, wo bei die Qualität etwas höher gewichtet wird. Mit optimizeSpeed wird die Qualität verschlechtert und die Geschwindigkeit der Anzeige erhöht. Der Wert optimizeQuality bewirkt das Gegenteil - besser Qualität, langsamere Darstellung.

Beispiel Quellcode


   Grafische Darstellung:   SVG-Darstellung (nur SVG-fähige Browser!)    Screenshot JPG-Grafik
<?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="600" height="420"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<title>PresentationAttributes-Color</title>
<desc>Interpolation und Rendering - sehen Sie den Unterschied?</desc>
  <defs>
    <style type="text/css">
    <![CDATA[
      text {font-family:Verdana,sans-serif; font-size:14px; }
      rect {fill:url(#g01);}
    ]]>
    </style>
    <linearGradient id="g01"
      x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="1%" stop-color="blue" />
      <stop offset="99%" stop-color="yellow" />
    </linearGradient>
  </defs>

  <!-- 3 verschiedene Interpolationsarten -->
  <rect x="170" y="20" width="120" height="160" />
  <rect x="310" y="20" width="120" height="160"
    color-interpolation="auto" />
  <rect x="450" y="20" width="120" height="160"
    color-interpolation="linearRGB" />

  <!--3 verschiedene Rendering-Einstellungen -->
  <rect x="170" y="220" width="120" height="160" />
  <rect x="310" y="220" width="120" height="160"
    color-rendering="optimizeSpeed" />
  <rect x="450" y="220" width="120" height="160"
    color-rendering="optimizeQuality" />

  <text x="10" y="40" style="font-weight:bold;">color-interpolation</text>
  <text x="175" y="200">sRGB</text>
  <text x="315" y="200">auto</text>
  <text x="455" y="200">linearRGB</text>
  <text x="10" y="240" style="font-weight:bold;">color-rendering</text>
  <text x="175" y="400">auto</text>
  <text x="315" y="400">optimizeSpeed</text>
  <text x="455" y="400">optimizeQuality</text>
</svg>
      

Im obigen Beispiel wird ein Rechteck, das mit einen Farbverlauf (das nächste Kapitel: Verläufe und Muster) gefüllt ist, jeweils mit 3 verschiedenen Interpolationsarten und 3 unterschiedlichen Rendering-Einstellung dargestellt.
Falls Sie keinen Unterschied in der Darstellung entdecken können - der Autor auch nicht :-).




index  |  Kapitel 11  |  11.2  <<  | 11.3 |  >>  12   Verlaeufe und Muster