SVG/Tutorials/Filter/Bildmanipulation

Der Begriff Filter kommt ja aus der Fotografie, in der vor das Objektiv weitere Linsen und Filter platziert werden um bestimmte Effekte zu erzielen. In diesem Kapitel lernen Sie, wie Rastergrafiken (gif, jpeg oder png) durch Filter verfremdet und gestaltet werden können.

feImage

Der primitive Filter feImage referenziert eine externe Grafik oder ein SVG-Fragment.

FeImage verhält sich wie image und hat die gleichen Attribute:

x: horizontale Position der linken oberen Ecke
y: vertikale Position der linken oberen Ecke
height: Höhe
width: Breite
href: URI der Grafik
preserveAspectRatio:
- defer
- align,
- meetOrSlice;
- xMidYMid meet (Standardwert) legt Seitenverhältnis fest

Beispiel ansehen …

<defs>
  <svg id="doppeldecker">
    ...  	  	  
  </svg>	

  <filter id="image" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse">
     <feImage x="0" y="0" width="200" height="200" href="https://wiki.selfhtml.org/images/c/c8/Wolke.png" result="img" />
  </filter>

  <filter id="Vektorgrafik" x="0" y="0"  filterUnits="userSpaceOnUse">
    <feImage x="0" y="0" width="200" height="200" href="https://wiki.selfhtml.org/images/2/21/Burg.svg" result="img" />
  </filter>
  
  <filter id="Fragment" x="0" y="0"  filterUnits="userSpaceOnUse">
    <feImage x="0" y="0" width="100%" height="100%" href="#doppeldecker" result="img" />
  </filter>
</defs>

  <text x="20" y="20">Rastergrafik</text>
  <rect width="200" height="200" 
        transform="translate(10,50)" 
		filter="url(#image)" 
  />
...

In den Beispielen werden drei Grafiken mit feImage referenziert. Die linke Grafik ist eine Rastergrafik, die mittlere eine SVG-Vektorgrafik und die rechte das im Definitionsabschnitt befindliche SVG-Fragment #doppeldecker.

Beachten Sie: Der Firefox hat hier einen alten Bug und unterstützt keine Referenzierungen von internen SVG-Fragmenten.^[1]
Alternativ könnten Sie die Grafik als UTF-8 Data-URI einbetten:

<feImage href='data:image/svg+xml;charset=utf-8,<svg width="100" height="100"><rect width="50" height="50 /></svg>' />

Beachten Sie: Wenn Sie ein SVG-Fragment referenzieren wollen, müssen Sie die Höhe und Breite des feImage-Elements auf 100% setzen, da der Filter die originalen Breiten- und Höhenangaben zugunsten filterinterner Einstellungen ignoriert.^[2]

feTile

Der primitive Filter feTile füllt Objekte mit einem Kachelmuster.

Folgende Attribute sind möglich:

in: Eingangsgrafik

Beachten Sie: Die Eingangsgrafik ist typischerweise die Ausgangsgrafik eines anderen Filters wie feImage, da der Kacheleffekt nur mit Grafiken funktionert, die kleiner als die zu füllende Grafik sind.
Deshalb wird im Allgemeinen für den vorausgehenden Filter mit den Attributen x, y, width und height eine geringere Größe festgelegt.

Kachelung ansehen …

<defs>
  <filter id="gekachelt" x="0" y="0" width="100%" height="100%">
    <feImage result="imgSource" href="http://wiki.selfhtml.org/images/a/a6/Lauf-1.jpg" width="10%" height="10%" preserveAspectRatio="xMidYMid slice"  />
    <feTile in="imgSource" />
  </filter>
</defs>
 
<rect x="20" y="20" width="600" height="490" filter="url(#gekachelt)" />

Das Rechteck erhält den Filter #gekachelt. Hier wird mit feImage ein Bild referenziert und entsprechend verkleinert, sodass es mehrfach in das vorgegebene Rechteck passt. Der Filter feTile kachelt die Grafik dann in das vorgegebene Rechteck.

feColorMatrix

Der primitive Filter feColorMatrix verändert die RGBA Farb- und Alphawerte jedes Pixels einer Grafik.

Folgende Typen sind möglich:

matrix: 5x4-Matrix für alle RGBA-Werte^[3]
- values: Standardwert ist: 1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0
  jeder Farbwert kann in seinen Rot, Grün, Blau-Kanälen und im Alphawert beeinflusst werden
hueRotate: Farbtonänderung
- values: Gradzahl von 0-360 (Standardwert 0), positive oder negative Werte möglich
saturate: Sättigung
- values: Wert von 0-1 (Standardwert 1) verringert die Sättigung
luminanceToAlpha: Aufhellung des Alphakanals, keine Angabe von values benötigt

Farbveränderungen mit feColorMatrix ansehen …

  <defs>
    <filter id="f1">
      <feColorMatrix type="matrix" values="1 0 0 1 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0"/>
    </filter>
    <filter id="f2">
      <feColorMatrix type="matrix" values="0 0 0 0 0, 1 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0"/>
    </filter>
    <filter id="f3">
      <feColorMatrix type="matrix" values="1 0 0 0 0, 0 1 0 0 0, 0 0 1 1 0, 0 0 0 1 0"/>
    </filter>
    <filter id="f4">
      <feColorMatrix type="hueRotate" values="90" />
    </filter>
    <filter id="f5">
      <feColorMatrix type="hueRotate" values="-90" />
    </filter>
    <filter id="f6">
      <feColorMatrix type="hueRotate" values="180" />
    </filter>
    <filter id="f7">
      <feColorMatrix type="saturate" values="0" />
    </filter>
    <filter id="f8">
      <feColorMatrix type="luminanceToAlpha" values="0"/>
    </filter>
    <filter id="f9">
      <feColorMatrix type="luminanceToAlpha" result="tmp1" />
      <feComposite in="SourceGraphic" in2="tmp1"
        operator="in" />
    </filter>
  </defs>

  <image x="230" y="10" width="200px" height="200px" filter="url(#f1)"
    xlink:href="Lauf-1.jpg">
    <title>&lt;feColorMatrix type="matrix" values="1 0 0 1 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0"/></title>
  </image>	
  ...

Das Bild auf der linken Seite wird durch den Filter unterschiedlich gefärbt. In der oberen Reihe wurde in der Matrix jeweils ein Farbton hervorgehoben.

In der mittleren Reihe wurde die Farbtonänderung mit hueRotate durchgeführt.

Links unten wurde die Farbsättigung mit saturate aufgehoben. Das mittlere untere Beispiel wurde mit luminanceToAlpha invertiert. Im letzten Beispiel wurde luminanceToAlpha zusammen mit feComposite angewandt, um den aufgehellten Alphakanal mit dem Originalbild zu vermischen.

Reliefstruktur

Mit diesem Filter können Sie einen Prägeeffekt in Form einer Reliefstruktur (embossing filter oder embossed photography) erzielen:

Beispiel ansehen …

  <filter id="Relief" width="100%" height="100%" x="0" y="0">
    <feColorMatrix in="SourceGraphic" type="luminanceToAlpha" />
    <feDiffuseLighting surfaceScale="10" lighting-color="white">
      <feDistantLight azimuth="50" elevation="50"/>
    </feDiffuseLighting>
  </filter>
 <filter id="sobel" color-interpolation-filters="sRGB" width="100%" height="100%" x="0" y="0">
    <feColorMatrix type="matrix" in="SourceGraphic" result="RA" values="0 0 0 0 1
          0 0 0 0 1
          0 0 0 0 1
          1 0 0 0 0"></feColorMatrix>
    <feColorMatrix type="matrix" in="SourceGraphic" result="GA" values="0 0 0 0 1
          0 0 0 0 1
          0 0 0 0 1
          0 1 0 0 0"></feColorMatrix>
    <feColorMatrix type="matrix" in="SourceGraphic" result="BA" values="0 0 0 0 1
          0 0 0 0 1
          0 0 0 0 1
          0 0 1 0 0"></feColorMatrix>
    <feDiffuseLighting in="RA" result="R" surfaceScale="8.0">
      <feDistantLight elevation="90"></feDistantLight>
    </feDiffuseLighting>
    <feDiffuseLighting in="GA" result="G" surfaceScale="8.0">
      <feDistantLight elevation="90"></feDistantLight>
    </feDiffuseLighting>
    <feDiffuseLighting in="BA" result="B" surfaceScale="8.0">
      <feDistantLight elevation="90"></feDistantLight>
    </feDiffuseLighting>
    <feColorMatrix type="matrix" in="R" result="RS" values="-1 0 0 0 1
          0 0 0 0 0
          0 0 0 0 0
          0 0 0 0 1"></feColorMatrix>
    <feColorMatrix type="matrix" in="G" result="GS" values="0 0 0 0 0
          0 -1 0 0 1
          0 0 0 0 0
          0 0 0 0 1"></feColorMatrix>
    <feColorMatrix type="matrix" in="B" result="BS" values="0 0 0 0 0
          0 0 0 0 0
          0 0 -1 0 1
          0 0 0 0 1"></feColorMatrix>
    <feComposite in="RS" in2="GS" result="RSGS" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"></feComposite>
    <feComposite in="RSGS" in2="BS" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"></feComposite>
  </filter>

Der feColorMatrix-Filter wandelt die Eingangsgrafik in eine Ebene mit den Alphawerten um. Diese Ebene wird dann vom feDiffuseLighting-Filter beleuchtet und erzielt so den Prägeeffekt.

Empfehlung: Definieren Sie eine Größenangabe für den Filter, da er ansonsten über das Foto herausragt.

Eine solche Relief-Struktur wird auch Sobel-Filter genannt. (vergleiche: Wikipedia: [1])

feConvolveMatrix

Der primitive Filter feConvolveMatrix verändert die Bildpunkt-Matrix. Dabei werden Pixel der Eingangsgrafik mit Nachbar-Pixeln vermischt. Dies ermöglicht eine große Anzahl von Effekten, wie: Scharfzeichnen, Verwischen oder Prägeeffekte.^[4]

Dieser Filter ermöglicht Ihnen einen neuen Filter zu erzeugen. Eine kernelMatrix ist ein Pixelraster, das Pixel anhand der Werte der benachbarten Pixel verändert. So können Sie eigene Effekte definieren.^[5]

Folgende Attribute sind möglich:

in: Eingangsgrafik
order: legt die Größe der Matrix fest (2 Zahlen für Reihe und Spalte, bei nur einer Zahlenangabe wird der Wert für beide Koordinaten verwendet. Standardwert ist 3).

Empfehlung: Verwenden Sie nur kleine Werte, um die CPU beim Laden der SVG-Grafik nicht zu überlasten.

kernelMatrix: Matrix aus den Bildpunkten, die in order für die Verarbeitung der Bildpunkte herangezogen werden.
divisor: Nachdem das Eingangsbild durch die kernelMatrix verändert wurde, werden die Bildinformationen durch den divisor geteilt. Dies bewirkt eine Glättung der Farbsättigung.
bias: Zahlenwert, Standardwert ist 0; (erlaubt, den Bereich eines Filters zu verschieben. Nachdem die kernelMatrix auf das eingehende Bild angewandt wird und durch einen divisor verändert wird, wird der Wert von bias addiert.)
targetX: X-Position der Convolution Matrix
targetY: Y-Position der Convolution Matrix
edgeMode: an den Rändern der Grafik können einzelne Punkte der Kernel-Matrix können nicht mehr auf Bildpunkten zu liegen kommen, da die Kernel-Matrix über die Ränder der Grafik ragt.
Folgende Werte sind möglich:
- duplicate: Standardwert) Werte, die im Leerraum liegen, werden die äußersten Werte vom Rand zugeweisen
- wrap: äußersten Werte des gegenüberliegenden Rands
- none: 0
preserveAlpha: legt fest, wie die Alphatranparenz bearbeitet wird.
- false: alle 4 Kanäle (auch der Alpha-Kanal) werden von der Convolution Matrix verändert.
- true: nur die Farbkanäle werden von der Convolution Matrix verändert.

Bildbearbeitung mit feConvolveMatrix ansehen …

    <filter id="KantenErkennung">
      <feConvolveMatrix 
        order="3"
        preserveAlpha="true" 
        kernelMatrix="
		  -1 -1 -1
		  -1  8 -1
		  -1 -1 -1"
		divisor="1.0"
		bias="0.0"   
		  />
    </filter>
	
    <filter id="Schärfung">
      <feConvolveMatrix 
        order="3"
        preserveAlpha="true" 
        kernelMatrix="
		  -1 -1 -1
		  -1  9 -1
		  -1 -1 -1"
		divisor="1.0"
		bias="0.0"   
		  />
    </filter>
	
    <filter id="Prägung">
      <feConvolveMatrix 
        order="3"
        preserveAlpha="true" 
        kernelMatrix="
		  -4 0 0
		   0 1 0
		   0 0 4"
		divisor="1"
		bias="0"   
        />
    </filter>

Mit dem feConvolveMatrix-Filter werden die Kanten des linken Bildes erkannt und betont. Die Schärfung auf dem mittleren und die Prägestruktur des rechten Bildes sind hier nicht so deutlich erkennbar.

Quellen

↑ https://bugzilla.mozilla.org/show_bug.cgi?id=455986
↑ http://apike.ca/prog_svg_filter_feImage.html
↑ apike.ca: feColorMatrix-Live-Demo
↑ W3C: feConvolveMatrixElement
↑ smashing-magazine: Why The SVG Filter is awesome

wikibooks.org: Urfilter feImage
wikibooks.org: Urfilter feTile (Kacheln)
wikibooks.org: Urfilter feConvolveMatrix
SVG Filters Retro 80er-Jahre-Texteffekte mit CSS und SVG Filtern
Add Bevel And Emboss Effects With The feConvolveMatrix Filter Primitive Steven Bradley
Image Kernels Explained Visually von Victor Powell

Siehe auch

Referenz

[1] ttps://bugzilla.mozilla.org/show_bug.cgi?id=455986

[2] ttp://apike.ca/prog_svg_filter_feImage.html

[3] .ca: feColorMatrix-Live-Demo

[4] W3C: feConvolveMatrixElement

[5] smashing-magazine: Why The SVG Filter is awesome

[1

[2

[3

[4

[5

SVG/Tutorials/Filter/Bildmanipulation

Inhaltsverzeichnis

feImage

feTile

feColorMatrix

Reliefstruktur

feConvolveMatrix

Quellen

Siehe auch

Navigationsmenü

Meine Werkzeuge

Namensräume

Varianten

Ansichten

Mehr

Suche

Starten

Mitmachen

Werkzeuge

SELFHTML