SVG Tutorial

color-interpolation-filters
Voreinstellung: linearRGB.
Alle primitiven Filter verwenden als Input-Bild ein RGBA Bild. Dieser Farbraum wird durch das Attribut color-interpolation-filters bzw. dessen voreingestelltem Wert linearRGB festgelegt.
Für andere Farboperationen, wie z.B. Farbverläufe, gilt der Farbraum der innerhalb der SVG Grafik durch das Attribut color-interpolation definiert ist: das ist in der Voreinstellung sRGB.
Wenn Sie also auf ein Element, dessen Füllung durch einen anderen Farbraum definiert ist (das z.B. mit einem Farbverlauf gefüllt ist), einen der farbverändernden Filter feColorMatrix oder feComponentTransfer anwenden wollen, sollten Sie die Werte dieser beiden Attribute anpassen. Nur so ist gewährleistet, dass der gewünschen Effekt korrekt dargestellt wird.

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 width="760px" height="200px"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>PresentationAttributs-FilterPrimitives</title>
  <desc>
    Attribute für primitive Filter 1
  </desc>
  <defs>
    <style type="text/css">
    <![CDATA[
      text {font-family:Verdana,sans-serif; font-size:48px;
            font-weight:bold; }
    ]]>
    </style>
<!-- der Verlauf -->
    <linearGradient id="v1"
      x1="0" y1="0" x2="1" y2="0">
      <stop offset=".2" stop-color="limegreen" />
      <stop offset="1" stop-color="black" />
    </linearGradient>

<!-- Filter: linearRGB -->
    <filter id="f1">
      <feColorMatrix in="SourceGraphic"
        type="hueRotate" values="90" />
    </filter>

<!-- Filter: sRGB -->
    <filter id="f2" color-interpolation-filters="sRGB">
      <feColorMatrix in="SourceGraphic"
        type="hueRotate" values="90"
        color-interpolation-filters="sRGB" />
    </filter>
  </defs>

  <text x="30" y="70" fill="url(#v1)"
    filter="url(#f1)">
    color-interpolation-filters
    <tspan x="330" dy="20"
      style="font-size:16px; font-stretch:ultra-expanded;">
      linearRGB
    </tspan>
  </text>
  <text x="30" y="150" fill="url(#v1)"
    filter="url(#f2)">
    color-interpolation-filters
    <tspan x="330" dy="20"
      style="font-size:16px; font-stretch:ultra-expanded;">
      sRGB
    </tspan>
  </text>
</svg>
      

Die obige Beispielgrafik enthält 2 Textelemente, die mit einem Verlauf gefüllt sind. Auf diese beiden text-Elemente wird jeweils eine Farbveränderung durch die Filter f1 und f2 angewandt. Beide Filter enthalten den primitiven Filter feColorMatrix der eine Farbveränderung bewirkt.

Im Filter f1 werden die unterschiedlichen Farbräume von Verlauf und Filteroperation nicht angepasst. Im Filter f2 wird durch Verwendung des Attributs color-interpolation-filters der Farbraum sRGB als gültiger Farbraum definiert.

Das Attribut color-interpolation-filters kann übigens auch im filter-Element verwendet werden.