Der filter-Tag

(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)

Mit dem <filter>-Tag können Sie im <defs>-Bereich der Webseite Filter definieren, die aus einem oder mehreren untergeordneten Filter-Elementen bestehen. Der <filter>-Tag wird grundsätzlich mit </filter> abgeschlossen, weil dazwischen die Filterelemente stehen. Der Tag verfügt über die folgenden Attribute:

  • filterUnits bestimmt das Koordinatensystem des Filters. Dazu stehen die Werte userSpaceOnUse und objectBoundingBox zur Verfügung. Wählen Sie den Wert userSpaceOnUse, müssen Sie mit den Attributen x, y, width und height absolute Werte angeben, die sich auf den Bereich des Objekts beziehen, das mit diesem Filter formatiert wird. Geben Sie hingegen objectBoundingBox an, sind die Werte für diese Parameter prozentual und beziehen sich dann auf das Objekt, in dem das mit <filter> formatierte Objekt enthalten ist. Entweder ist dies eine Gruppe mit einem eigenen Koordinatensystem oder die Zeichenfläche selbst.
  • primitiveUnits legt fest, wie die Maßangaben innerhalb der untergeordneten Filter-Elemente interpretiert werden. Zur Verfügung stehen die Werte userSpaceOnUse und objectBoundingBox. Bei Auswahl von userSpaceOnUse werden alle Längen- und Breitenangaben als Angaben im aktuellen Koordinatensystem interpretiert. Wenn Sie objectBoundingBox auswählen, werden sie als prozentuale Werte interpretiert und müssen auch so angegeben werden.
  • x, y, width und height definieren gemeinsam den Bereich, auf den der Filter angewendet werden soll. Die Attribute width und height müssen positive Werte haben. Geben Sie dafür 0 an, bedeutet dies, dass das Element, das mit dem Filter versehen wird, nicht sichtbar ist. Bei negativen Werten erhalten Sie eine Fehlermeldung. Wenn Sie width und heigth nicht angeben, bekommen beide Attribute den Wert 120%. Geben Sie die Attribute x und y nicht an, die den Nullpunkt des Filterbereichs definieren, bekommen die nicht angegebenen Attribute den Wert -10%.
  • filterRes definiert in der Form x-pixel, y-pixel die Auflösung, die der Filter verwenden soll. Die Angabe filterRes="600, 600" würde bedeuten, dass der Filter in der Auflösung 600 x 600 dpi arbeiten soll. Dabei ist die Angabe des Wertes für die vertikale Auflösung wahlfrei. Wird sie nicht angegeben wird der gleiche Wert wie für x-pixel verwendet. Lassen Sie das ganze Attribut weg, wird eine Standardauflösung verwendet. Für die Bildschirmausgabe ist diese Standardauflösung identisch mit der aktuellen Bildschirmauflösung, also 72 bzw. 96 dpi. Beim Ausdruck wird eine Auflösung von 400 dpi verwendet.

Hinweis:
Beachten Sie, dass der SVG-Viewer bzw. Browser zum Rendern der Grafik Zeit benötigt. Je höher die Auflösung ist, desto mehr Zeit ist erforderlich, bis das Bild aufgebaut ist. Dies gilt insbesondere für sehr komplexe Filter. Daher sollten Sie, wenn Sie dieses Attribut angeben, keinen überdimensionierten Wert verwenden.

  • xlink:href ermöglicht die Referenzierung eines anderen Filters. Dieser wird dann in den Filter mit dem xlink:href-Attribut integriert, als wäre er hier definiert.

Hinweis:
Der SVG-Viewer in der Version 1.0 und 2.0 unterstützt das Attribut xlink:href für den <filter>-Tag leider noch nicht.

Die Verwendung der genannten Attribute soll nun an einem ersten Beispiel gezeigt werden. Da ein untergeordnetes Element innerhalb des <filter>-Tags erforderlich ist, wird hier der Effekt <feGaussianBlur> verwendet. Für dieses und alle folgende Beispiele wird ein- und dieselbe Grafik verwendet, die ohne Filter wie in der nächsten Abbildung aussieht. Diese beide Elemente in der Grafik werden deshalb gewählt, um zu zeigen, wie sich die Filter auf gruppierte und einzelne Objekte auswirken.

Die Ursprungsgrafik für Filter auf gruppierte und einzelne Objekte

Abbildung: Die Ursprungsgrafik für Filter auf gruppierte und einzelne Objekte.

<?xml version="1.0" standalone="no"?>
...
<svg width="300" height="150">
  <defs>
    <desc>Es folgen die Farbverläufe</desc>
    <radialGradient id="runderVerlauf" cx="50%" cy="90%" r="60%" fx="60%" fy="80%">
      <stop offset="0%" style="stop-color:rgb(255,150,150);stop-opacity:1"/>
      <stop offset="1%" style="stop-color:rgb(255,128,128);stop-opacity:1"/>
      <stop offset="50%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
    </radialGradient>
    <linearGradient id="linearerVerlauf" gradientTransform="rotate(90)">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1"/>
      <stop offset="90%" style="stop-color:rgb(255,1,1);stop-opacity:1"/>
    </linearGradient>
  </defs>
  <g transform="translate(20,20), scale(0.7)">
    <desc>Der Button</desc>
    <circle cx="25" cy="25" r="25" style="stroke-width:1;stroke-opacity:0.8;stroke:rgb(222,0,0);fill-opacity:1;opacity:1;fill:url(#runderVerlauf)"/>
    <ellipse cx="25" cy="15" rx="20" ry="12" style="stroke-width:1;stroke:none;fill-opacity:1;opacity:1;fill:url(#linearerVerlauf)"/>
  </g>
  <g transform="translate(120,20)">
    <desc>Der Text mit Rechteck</desc>
    <rect x="0" y="0" width="150" height="75" style="fill:red;stroke:black;stroke-width:1"/>
    <text x="20" y="55" style="font-family:'Arial Black';font-size:46;stroke:black; fill:yellow">SVG</text>
  </g>
</svg>

Hinweis:
Um den Code so kurz wie möglich zu halten, werden in den nachfolgenden Beispielen lediglich die Ergänzungen im Code dargestellt. Wird nichts anderweitig bestimmt, heißt das, dass der <filter>-Tag innerhalb des <defs>-Tags positioniert wird.

Erstellen Sie einen Filter mit dem nachfolgend abgebildeten Code und weisen ihn einmal der Gruppe mit dem Button und zum anderen dem Text "SVG" im Viereck zu, sehen Sie einen Ausschnitt aus den einzelnen Ursprungsbildern, die dann mit dem Schatten versehen sind. Dieser Ausschnitt wird bestimmt durch die Attribute width, height, x und y.

<filter id="AusschnittMitSchatten" filterUnits="userSpaceOnUse" x="10" y="10" width="20" height="150">
  <feGaussianBlur stdDeviation="3"/>
</filter>

Die einzelnen Objekte mit Filter

Abbildung: Die einzelnen Objekte mit Filter.

Wenn Sie nun noch die Auflösung für den Filter über das Attribut filterRes auf 600 dpi festlegen, werden die mit dem Filter behandelten Objekte stark vergrößert dargestellt.

<filter id="AusschnittMitSchatten" x="10" y="10" width="20" height="150" filterRes="600,600">
  <feGaussianBlur stdDeviation="3"/>
</filter>

Hinweis:
Die Vergrößerung kommt daher, dass ein Bildschirm nur maximal 72 dpi (PC) bzw. 96 dpi (Mac) anzeigen kann. Nur eine Grafik mit genau dieser Auflösung wird auf dem Bildschirm in Originalgröße angezeigt. Das ist auch der Grund, warum Schriften und Grafiken auf einem Mac kleiner dargestellt werden, als auf einem PC. Wenn Sie eine mit 600 dpi gerenderte SVG-Grafik allerdings auf einem Drucker ausgeben, der 600 dpi drucken kann, erhalten Sie im Ausdruck die Originalgröße.

Die mit 600 dpi gerenderten Filter-Ausschnitte

Abbildung: Die mit 600 dpi gerenderten Filter-Ausschnitte.

Hinweis:
Die Angabe der Auflösung mit dem filterRes-Attribut arbeitet offenbar mit dem SVG-Viewer 2.0 noch nicht einwandfrei. Vergrößert man nämlich den Ausschnitt bei gleich bleibender Auflösung, wird die gleiche Grafik kleiner dargestellt. Je größer der Ausschnitt, desto kleiner die Auflösung. Bei einem Ausschnitt von ca. 90 Pixel Breite werden die beiden Objekte schon in Originalgröße dargestellt.

   

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema SVG bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © verlag moderne industrie GmbH 2001
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "Das Einsteigerseminar SVG — Webgrafiken mit XML" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

verlag moderne industrie GmbH, Justus-von-Liebig-Straße 1, D-86899 Landsberg/Lech, fon ++49 (0) 81 91 / 125 – 0, leserservice(at)mi-verlag.de