SVG: Filter

► W3C-Empfehlung: <filter>

MIt dem <filter>-Element lassen sich Grafikfilter definieren, die dann auf einzelne Elemente der Grafik angewendet werden können. Es können auch mehrere Filtermethoden kombiniert werden.

<feGaussianBlur> – Gaußscher Weichzeichner

► W3C-Empfehlung: <feGaussianBlur>

Diese Filtermethode wendet den Gaußschen Weichzeichner auf ein Element an, wodurch dessen Konturschärfe reduziert werden kann.

Code auswählen
1
2
3
4
5
6
7
8
9
10
 
<?xml version='1.0' encoding='UTF-8'?>
<!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'>
  <defs>
    <filter id='filter1' x='-15' y='-15' width='130' height='130'>
      <feGaussianBlur in='SourceGraphic' stdDeviation='15' />
    </filter>
  </defs>
  <circle filter='url(#filter1)' cx='175' cy='90' r='50' fill='red' />
</svg>
SVG-Beispiel für Filter SVG-Beispiel für Filter

<feMorphology> – Kantenmanipulation

► W3C-Empfehlung: <feMorphology>

Diese Filtermethode kann die Kanten eines Objektes entweder nach innen „schrumpfen“ oder nach außen „ausdehnen“. Dazu werden für das Attribut operator die Werte erode oder dilate verwendet.

Code auswählen
1
2
3
4
5
6
7
8
9
10
 
<?xml version="1.0" encoding="UTF-8"?>
<!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">
  <defs>
    <filter id="filter1">
      <feMorphology operator="erode" radius="2" in="SourceGraphic" />
    </filter>
  </defs>
  <text filter="url(#filter1)" x="175" y="90" font-family="sans-serif" font-size="50" font-weight="bold" text-anchor="middle" fill="red">Hallo Welt!</text>
</svg>
SVG-Beispiel für Filter SVG-Beispiel für Filter