SVG-Weichzeichnereffekte - HTML lernen

Diese Seite erklärt, wie SVG-Grafiken mit dem <feGaussianBlur>-Filterprimitivum weichgezeichnet werden: wie die Unschärfestärke gesteuert wird, wie nur die Silhouette einer Form weichgezeichnet wird, wie die Filterregion so dimensioniert wird, dass der Weichzeichner nicht abgeschnitten wird, und wann stattdessen das einfachere CSS filter: blur() sinnvoller ist.

Beschreibung von SVG-Filtern

Alle SVG-Filter werden innerhalb eines <defs>-Elements definiert. <defs> steht für definitions (Definitionen). Es enthält wiederverwendbare Elemente — wie Filter —, die erst gezeichnet werden, wenn etwas auf sie verweist.

Das <filter>-Element definiert einen SVG-Filter. Es benötigt ein id-Attribut (erforderlich), das den Filter identifiziert. Das <filter>-Element wird nicht direkt gerendert: Es wirkt erst, wenn es über das filter-Attribut einer SVG-Form oder über die Funktion url() in CSS referenziert wird.

Jedes <filter> enthält ein oder mehrere Filterprimitiven als untergeordnete Elemente. Ein Filterprimitivum führt eine grafische Operation an einem oder mehreren Eingaben durch und erzeugt eine einzige Ausgabe. Neben der Ausgabe eines anderen Primitivums kann ein Primitivum auch eingebaute Eingaben wie SourceGraphic und SourceAlpha akzeptieren.

Jedes Filterprimitivum verwendet das Präfix fe, das für „filter effect" (Filtereffekt) steht. Im SVG-Filter-Standard sind 17 Filterprimitiven definiert. Um ein Element weichzuzeichnen, verwenden wir <feGaussianBlur>.

Beispiel zur Erzeugung eines Weichzeichnereffekts:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="150" height="150">
      <defs>
        <filter id="filter" x="0" y="0">
          <feGaussianBlur in="SourceGraphic" stdDeviation="20" />
        </filter>
      </defs>
      <rect width="110" height="110" stroke="green" stroke-width="5" fill="lightblue" filter="url(#filter)" /> 
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Probier es selbst »

Code-Erklärung:

Das id-Attribut des <filter>-Elements gibt dem Filter einen eindeutigen Namen.
Der Weichzeichnereffekt wird durch das <feGaussianBlur>-Element erzeugt.
in="SourceGraphic" übergibt die gesamte Form — mit Farben — an den Weichzeichner.
stdDeviation legt die Stärke des Weichzeichners fest.
Das filter-Attribut des <rect>-Elements verknüpft die Form über ihre id mit dem Filter.

Das stdDeviation-Attribut

stdDeviation steuert die Stärke des Weichzeichners. Es ist die Standardabweichung der Gaußschen Funktion, die auf die Pixel angewendet wird — einfach ausgedrückt: Ein größerer Wert verteilt jeden Pixel über einen größeren Bereich, sodass das Bild weicher wirkt. 0 bedeutet kein Weichzeichner.

Es kann ein Wert für einen gleichmäßigen Weichzeichner oder zwei durch Leerzeichen getrennte Werte für einen asymmetrischen Weichzeichner angegeben werden, bei dem X- und Y-Achse unterschiedlich stark weichgezeichnet werden:

<!-- Uniform blur in both directions -->
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />

<!-- 20px of horizontal blur, 5px of vertical blur (motion-blur look) -->
<feGaussianBlur in="SourceGraphic" stdDeviation="20 5" />

Typische Werte sind klein: 1–3 ergibt eine sanfte Weichzeichnung, 5–10 ein deutlich unscharfes Ergebnis, und alles über ~20 macht die Form fast unkenntlich. Da der Weichzeichner in alle Richtungen wächst, reicht er über die ursprünglichen Grenzen der Form hinaus — deshalb ist die Filterregion wichtig (siehe unten).

SourceGraphic vs. SourceAlpha

Das in-Attribut legt fest, womit das Primitivum arbeitet. Die beiden eingebauten Quelleingaben verhalten sich sehr unterschiedlich:

in="SourceGraphic" — das Element genau so, wie es gezeichnet wurde, einschließlich Füllung, Kontur und Farben. Das Weichzeichnen ergibt eine weiche, farbige Kopie der Form.
in="SourceAlpha" — nur der Alpha-Kanal (Deckkraft) des Elements. Die Farbinformationen werden verworfen, sodass eine einfarbig schwarze Silhouette der Form übrig bleibt. Das Weichzeichnen dieser Silhouette ist die Grundlage für Schlagschatten, da ein farbloser, weichgezeichneter Umriss hinter dem Original benötigt wird. Dieses Muster ist unter SVG-Schlagschatten beschrieben.

<!-- Soft, full-color blur -->
<feGaussianBlur in="SourceGraphic" stdDeviation="6" />

<!-- Blurred black silhouette (colors removed) -->
<feGaussianBlur in="SourceAlpha" stdDeviation="6" />

Die Filterregion (x, y, width, height)

Ein <filter> besitzt einen Beschneidungsbereich. Standardmäßig beträgt dieser x="-10%" y="-10%" width="120%" height="120%" des Begrenzungsrahmens des Elements — ein 10%-Rand auf jeder Seite. Ein starker Weichzeichner kann diesen Rand leicht überschreiten, und alles außerhalb des Bereichs wird mit einer harten Kante abgeschnitten, was wie eine abrupte Unterbrechung des Weichzeichners wirkt.

Die Attribute x, y, width und height des <filter>-Elements legen diesen Bereich fest. Im ersten Beispiel verschiebt x="0" y="0" die obere linke Ecke des Bereichs zum Ursprung des Elements. Um einem starken Weichzeichner Raum zum sanften Auslaufen zu geben, vergrößern Sie den Bereich:

<filter id="soft" x="-20%" y="-20%" width="140%" height="140%">
  <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>

Wenn ein Weichzeichner auf einer Seite abgeschnitten wirkt, ist die Filterregion in der Regel zu klein — vergrößern Sie sie.

Verknüpfung von Primitiven mit result

Wenn ein Filter mehrere Primitive enthält, benennt das result-Attribut die Ausgabe eines Primitivums, sodass ein nachfolgendes Primitivum es über in referenzieren kann. So werden mehrstufige Effekte (Weichzeichnen, dann Verschieben, dann Zusammenführen) verknüpft:

<filter id="chain">
  <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blurred" />
  <feOffset in="blurred" dx="3" dy="3" />
</filter>

Hier speichert feGaussianBlur seine weichgezeichnete Silhouette als blurred, und feOffset liest sie mit in="blurred" wieder aus. Ohne die result/in-Verbindung würde jedes Primitivum einfach erneut die ursprüngliche Quelle weichzeichnen.

Weichzeichnen eines Bildes und von Text

<feGaussianBlur> funktioniert mit allen SVG-Inhalten, nicht nur mit Rechtecken. Im folgenden Beispiel weicht derselbe Filter ein eingebettetes Bild und eine Textzeile auf. Die Filterregion ist vergrößert, damit der Weichzeichner an den Rändern nicht abgeschnitten wird.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="320" height="240">
      <defs>
        <filter id="blurFilter" x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur in="SourceGraphic" stdDeviation="4" />
        </filter>
      </defs>
      <image
        href="https://www.w3docs.com/build/assets/images/logo.svg"
        width="180" height="60" x="20" y="20"
        filter="url(#blurFilter)" />
      <text x="20" y="160" font-size="40" fill="navy" filter="url(#blurFilter)">
        Blurred text
      </text>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Die CSS-Alternative filter: blur()

Für einen schnellen Weichzeichner auf einem HTML-Element (oder einem gesamten SVG) bietet CSS die wesentlich einfachere Funktion filter: blur():

img {
  filter: blur(4px);
}

filter: blur() nimmt eine einzelne Längenangabe und wendet einen gleichmäßigen Gaußschen Weichzeichner an — es ist die einfachste Wahl, wenn ein Element einfach nur weicher gezeichnet werden soll. Bevorzugen Sie den SVG-<feGaussianBlur>-Ansatz, wenn Sie Folgendes benötigen:

Asymmetrischen Weichzeichner (unterschiedliche X- und Y-Werte über stdDeviation="20 5").
Nur die Silhouette weichzeichnen (in="SourceAlpha").
Den Weichzeichner mit anderen Primitiven verknüpfen — Verschiebungen, Farbänderungen, Zusammenführungen — für Effekte wie Schlagschatten.
Einen wiederverwendbaren, benannten Filter, der von mehreren Formen referenziert wird.

Eine vollständige Liste der Filterprimitiven und Attribute finden Sie in der SVG-Referenz.

Übung

Welche Funktionen haben die Attribute stdDeviation und in im SVG-'feGaussianBlur'-Filter?

Das Attribut stdDeviation definiert die Standardabweichung für den Weichzeichnervorgang.Das Attribut in definiert die Eingabe für den Filter.Das Attribut stdDeviation wird verwendet, um den Radius des Filters festzulegen.Das Attribut in weist dem Filter eine Farbe zu.Die Attribute stdDeviation und in haben keine spezifische Funktion im SVG-'feGaussianBlur'-Filter.