SVG-Filter und -Verläufe – SVG-Code, Beispiele

Was ist ein SVG-Filter?

SVG-Filter werden häufig verwendet, um Bitmaps oder Vektorgrafiken Spezialeffekte hinzuzufügen. Filtereffekte sind eine Möglichkeit zur Bearbeitung eines visuellen Elements vor der Anzeige im Dokument. Mit anderen Worten handelt es sich um eine Reihe von Vorgängen, die auf ein Bild angewendet werden und eine Vielzahl von Farb- und Lichteffekten, Unschärfen, Verzerrungen, Rauschen und Texturerzeugung usw. erzeugen können. SVG-Filter sind in der Lage, komplexe Effekte im Browser zu erzeugen und haben dies auch das Potenzial, in einer Vielzahl von Projekten eingesetzt zu werden. Sie werden von fast allen modernen Browsern unterstützt, auch von mobilen.

Filter wird durch das Element <filter> definiert, das innerhalb eines Elements <defs> festgelegt wird. Es wird nie selbst gerendert und konzeptionell als das Element beschrieben, das seine untergeordneten Elemente – Filterprimitive – einschließt. Das Element <filter> verfügt über eine Reihe von Attributen, hier sind einige davon: x, y, width, height, filterUnits, primitiveUnits, core attributes, presentation attributes.

SVG-Filter

Jedes Filterprimitiv führt eine einzelne grafische Operation aus, die ein sichtbares Ergebnis erzeugt. Der Vorteil von SVG-Filtern ist die Möglichkeit, mehrere Typen zu kombinieren. Die nach der Anwendung eines Filters erzielten Ergebnisse können die Bildquelle für einen anderen Filter sein.

Erforderliche Attribute für das Filterprimitiv sind x, y, width und height. Sie legen den Bereich des Bildes fest, auf den der Filter angewendet wird. Jedes Filterprimitiv kann eine oder zwei Eingaben annehmen und nur ein Ergebnis ausgeben. Die Eingabedaten des Filterprimitivs werden im Attribut in angegeben. Der Standardwert ist in=“SourceGraphic”. Die Ausgabe der Operation wird im Attribut result definiert.

Für jeden Filter ist ein Quellbild für die Verarbeitung erforderlich. Andernfalls kann der Filter nichts rendern und funktioniert daher nicht. Alle Filterprimitive sind in der SVG-Filterspezifikation definiert.

Gaußsche Unschärfe

Die Gaußsche Unschärfefunktion wird durch Verwischen und Glätten eines Bildes mithilfe der Gaußschen Funktion erhalten. Es kann als Filter betrachtet werden, der Bildrauschen und kleinere Details reduziert. Designer und Fotografen verwenden Gaußsche Unschärfefunktionen häufig für unterschiedliche Zwecke: Gaußsche Unschärfe kann das Bild weicher machen, sie ist nützlich, um chromatische Aberration zu reduzieren, sie kann ein Nummernschild oder Markenlogo verbergen, für dessen Verwendung Sie keine Berechtigung haben, usw.

Der Filter <feGaussianBlur> erzeugt einen weichen Unschärfeeffekt. Es handelt sich um einen häufig genutzten Effekt. Das Attribut stdDeviation gibt die Zahl an, die die Standardabweichung für den Unschärfevorgang charakterisiert. Wenn zwei Zahlen angegeben werden, stellt die erste Zahl einen Standardabweichungswert entlang der x-Achse des Koordinatensystems dar, die zweite – auf der y-Achse.

Hier ist ein Beispiel, das die verschiedenen Werte des stdDeviation-Attributs ( gaussian-blur.svg) veranschaulicht:

<svg height="400" width="600" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="f1" x="-20" y="-20" height="100" width="100">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
        </filter>
        <filter id="f2" x="-20" y="-20" height="100" width="100">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10, 0" />
        </filter>
        <filter id="f3" x="-20" y="-20" height="100" width="100">
            <feGaussianBlur in="SourceGraphic" stdDeviation="0,10" />
        </filter>
    </defs>
    <g stroke="none" fill="#20B2AA">
        <ellipse cx="60" cy="80" rx="55" ry="35" />
        <ellipse cx="200" cy="80" rx="55" ry="35" filter="url(#f1)" />
        <ellipse cx="340" cy="80" rx="55" ry="35" filter="url(#f2)" />
        <ellipse cx="500" cy="80" rx="55" ry="35" filter="url(#f3)" />
    </g>
</svg>

Die um eine Form herum hinzugefügte Unschärfe führt häufig dazu, dass das Ausgabebild größer ist als das Quellbild. Für x und y müssen negative Zahlen verwendet werden, um ein Abschneiden der durch den Filter hinzugefügten Grafiken zu vermeiden. Im obigen Beispiel haben wir dies in den Zeilen 3, 6 und 9 gemacht.

Mit der Aspose.SVG für .NET-API können Sie in C# einen Gaußschen Weichzeichnungseffekt erstellen. Um mehr über den Aspose.Svg.Filters-Namespace zu erfahren und detaillierte C#-Beispiele für die Verwendung der Klasse SVGFEGaussianBlurElement zum Anwenden des Gaußschen Weichzeichnereffekts auf SVG-Elemente und Bitmaps zu betrachten, lesen Sie bitte den Artikel Gaußscher Weichzeichner.

Schlagschatteneffekt

Ein typisches Beispiel für den Schlagschatteneffekt ist das Hinzufügen eines 3D-Looks zu einer Form oder einem Text. Außerdem kann ein Schlagschatteneffekt verwendet werden, um ein Bild hervorzuheben.

Das Filterprimitiv <feOffset> wird verwendet, um eine Ebene in SVG zu versetzen. Zusätzlich zu den Attributen in und result akzeptiert dieses Grundelement zwei Hauptattribute – dx und dy, die den Abstand definieren, um den die Ebene entlang der x- und y-Achse versetzt ist , jeweils. Der Filter <feBlend> vermischt zwei Objekte; Sein mode-Attribut definiert den Mischmodus.

Sehen wir uns an, wie man einen Schlagschatteneffekt erstellt ( drop-shadow-effect.svg):

<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="shadow" x="-20" y="-20" height="150" width="150">
            <feOffset result="offset" in="SourceAlpha" dx="10" dy="10" />
            <feGaussianBlur result="blur" in="offset" stdDeviation="10" />
            <feBlend in="SourceGraphic" in2="blur" mode="normal" />
        </filter>
    </defs>
    <ellipse cx="95" cy="90" rx="75" ry="55" fill="#20B2AA" filter="url(#shadow)" />
</svg>

Die folgenden Filter werden verwendet, um einen Schlagschatteneffekt zu erzeugen:

1. <feOffset> nimmt in="SourceAlpha" und verschiebt das Ergebnis um 10 Pixel nach rechts und 10 Pixel nach unten und speichert das Ergebnis im Puffer als offset. Beachten Sie, dass der Alphakanal der Form als Eingabe verwendet wird. Der Wert SourceAlpha führt zu einem schwarzen Ergebnis.

2. <feGaussianBlur> nimmt in="offset", wendet einen Unschärfewert von 10 an und speichert das Ergebnis in einem temporären Puffer namens "blur".

3. <feBlend> nimmt zwei Eingaben in="SourceGraphic" und in2="blur" und mischt dann die SourceGraphic über dem versetzten schwarzen unscharfen Bild.

Sie können einen Schlagschatteneffekt in C# mit der Aspose.SVG für .NET-API erstellen. Lesen Sie den Artikel Drop Shadow Effect, um mehr über den Aspose.Svg.Filters-Namespace zu erfahren und detaillierte C#-Beispiele für die Anwendung des Schlagschatteneffekts auf SVG-Formen und -Text zu betrachten.

SVG-Lichteffekte

Der Lichteffekt wird in SVG mithilfe einer Reihe von Filtern erstellt. Betrachten Sie einige davon: <feDiffuseLighting>, <feSpecularLighting> und <fePointLight>. Sie können mehrere Filter kombinieren, Details für einen Lichteffekt erstellen und steuern.

Der Filter <fePointLight> definiert eine Lichtquelle, die einen Punktlichteffekt setzt. Es kann innerhalb des Grundelements <feDiffuseLighting> oder <feSpecularLighting> als untergeordnetes Element verwendet werden. Spezifische Attribute x, y und z geben die Position der Punktlichtquelle an. Sowohl der Filter <feDiffuseLighting> als auch der Filter <feSpecularLighting> beleuchten ein Bild mithilfe seines Alphakanals als Bump-Map. Der Unterschied besteht in den unterschiedlichen Berechnungen der Beleuchtungsmodellkomponenten.

Betrachten Sie ein Beispiel für einen Lichteffekt ( light-effect.svg):

<svg height="300" width="300" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id = "F1">
            <feGaussianBlur in = "SourceAlpha" stdDeviation = "4" result = "blur" />
            <feSpecularLighting result = "light" in = "blur" specularExponent = "25" lighting-color = "#bbbbbb">
                <fePointLight x = "80" y = "60" z = "200" />
            </feSpecularLighting>
            <feComposite in = "SourceGraphic" in2 = "light" operator = "arithmetic" k1 ="0" k2 ="1" k3 ="1" k4 ="0" />
        </filter>
    </defs>
    <g  fill = "INDIANRED" filter = "url(#F1)">
        <circle cx="100" cy="100" r="60" />
        <circle cx="100" cy="230" r="60" />
        <circle cx="230" cy="100" r="60" />
        <circle cx="230" cy="230" r="60" />
    </g>
</svg>

In diesem Beispiel werden vier SVG-Filter angewendet, um den Lichteffekt zu erzeugen:

1. <feGaussianBlur> übernimmt die Eingabe SourceAlpha, also den Alphakanal des Quellbilds. Das Ergebnis wird in einem temporären Puffer namens "blur" gespeichert.

2. Die Beleuchtung erfolgt mit den Filtereffekten <feSpecularLighting> und <fePointLighting>. <feSpecularLighting> verwendet den Puffer "blur" als Modell einer Oberflächenhöhe und generiert einen Lichteffekt aus einer Punktquelle, die im Filter <fePointLighting> festgelegt wird. Das Ergebnis wird im Puffer "light" gespeichert.

3. Der <feComposite>-Filter nimmt zwei Eingaben in="SourceGraphic" in2="light" und führt sie mithilfe der arithmetischen Compositing-Operation zusammen. Die Ausgabe des arithmetischen Operators für jedes Ergebnispixel wird wie folgt berechnet: Ergebnis = k1·in1·in2 + k2·in1 + k3·in2 + k4

Im Folgenden wird ein weiteres Beispiel für die Kombination von SVG-Filtereffekten gezeigt ( button.svg):

<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="myF" x="-5" y="-5" height="100" width="150">
            <feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur" />
            <feOffset in="blur" dx="5" dy="5" result="offsetBlur" />
            <feSpecularLighting in="offsetBlur" surfaceScale="8" specularConstant="0.7" specularExponent="2" lighting-color="#bbbbbb" result="specOut">
                <fePointLight x="-100" y="-100" z="100" />
            </feSpecularLighting>
            <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut" />
            <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="1.5" k2="0.5" k3="1" k4="0" result="litPaint" />
            <feMerge>
                <feMergeNode in="offsetBlur" />
                <feMergeNode in="litPaint" />
            </feMerge>
        </filter>
    </defs>
    <ellipse cx="85" cy="70" rx="65" ry="45" fill="#20B2AA" filter="url(#myF)" />
    <g fill="#696969" font-size="25" font-family="arial">
        <text x="55" y="80">PUSH</text>
    </g>
</svg>

In SVG-Lichteffekte erfahren Sie, wie Sie mehrere Filter kombinieren, um SVG-Lichteffekte in C# mithilfe der Aspose.SVG für .NET-API zu erstellen und zu steuern.

Farbfilter

In SVG können Sie verschiedenste Farbeffekte erstellen, die in fast allen modernen Browsern unterstützt werden. Wenn es um die Farbverarbeitung geht, ist <feColorMatrix> die beste Option. Dabei handelt es sich um eine Art Farbfilter, der mithilfe einer Matrix die Farbwerte für jeden RGBA-Kanal beeinflusst. Der <feComponentTransfer> ist eines der leistungsstärksten SVG-Filterprimitive. Es gibt die Kontrolle über die einzelnen RGBA-Kanäle des Bildes und ermöglicht Ihnen die Erstellung von Photoshop-ähnlichen SVG-Effekten; Beispielsweise kann es zum Posterisieren von Bildern verwendet werden.

Betrachten Sie die wichtigsten Farbfilter – <feColorMatrix> und <feComponentTransfer>.

Filterprimitiv <feColorMatrix>

Der Filter <feColorMatrix> wendet eine Matrixtransformation auf die RGBA-Kanäle jedes Pixels im Eingabebild an. Als Ergebnis wird ein neuer Satz von Farb- und Alphawerten erzeugt. Im allgemeinen Fall wird die matrix als Operation des type-Attributs des Filters <feColorMatrix> geschrieben. In den Sonderfällen von Farbmatrizen werden die Hilfsoperationen vom type verwendet: saturate, hueRotate, luminanceToAlpha.

Sehen wir uns Beispiele für die Verwendung der Operation saturate an ( saturation.svg):

<svg width="640" height="480" viewbox="0 0 640 480" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="myFilter">
            <feColorMatrix in="SourceGraphic" type="saturate" values="0"></feColorMatrix>
        </filter>
    </defs>
    <image filter="url(#myFilter)" href="https://docs.aspose.com/svg/images/drawing/park.jpg" width="100%" height="100%" />
</svg>

Die folgende Abbildung ist eine Reihe von Bildern mit den verschiedenen saturate:

Der spezielle Fall von Farbmatrizen ist die Bilddrehung entlang des Farbkreises. Das folgende Beispiel veranschaulicht die Verwendung der Operation hueRotate.

<svg width="640" height="480" viewbox="0 0 640 480" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="hueR">
            <feColorMatrix in="SourceGraphic" type="hueRotate" values="40"></feColorMatrix>
        </filter>
    </defs>
    <image filter="url(#hueR)" href="https://docs.aspose.com/svg/images/drawing/park.jpg" width="100%" height="100%" />
</svg>

Die folgende Abbildung ist eine Reihe von Bildern mit den verschiedenen hueRotate-Werten:

Filterprimitiv <feComponentTransfer>

Mit dem Filter <feComponentTransfer> können Sie lineare, tabellarische und diskrete Operationen mit Bildkanälen durchführen sowie das Gamma jedes Kanals (RGBA) ändern. Es ermöglicht Vorgänge wie Helligkeitsanpassung, Kontrastanpassung und Farbbalance.

Schauen wir uns ein Beispiel an:

<svg width="640" height="480" viewbox="0 0 640 480" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="RGBA">
            <fecomponenttransfer>
                <feFuncR type="linear" slope="2.0" />
                <feFuncG type="linear" slope="1.7" />
                <feFuncB type="linear" slope="0.1" />
                <feFuncA type="identity" />
            </fecomponenttransfer>
        </filter>
    </defs>
    <image filter="url(#RGBA)" href="https://docs.aspose.com/svg/images/drawing/park.jpg" width="100%" height="100%" />
</svg>

Das Element <feComponentTransfer> ermöglicht die Änderung aller in einem Pixel vorhandenen R-, G-, B- und A-Komponenten. Die RGBA-Komponenten werden auch als Übertragungsfunktionselemente bezeichnet: <feFuncR>, <feFuncG>, <feFuncB> und <feFuncA>. Im Attribut type wird der Funktionstyp bestimmt, der die Änderung dieser Komponente ermöglicht. Es gibt fünf Funktionstypen: identity, table, discrete, linear und gamma. Ausführlichere Informationen finden Sie auf der Seite SVG Filter Effects.

Lesen Sie den Artikel Farbfilter, wenn Sie Farbfilter in C# erstellen möchten. Sie erfahren mehr über die Filterprimitive feColorMatrix und feComponentTransfer und sehen sich C#-Codeausschnitte an, die zeigen, wie sie verwendet werden.

SVG-Verläufe

Ein Farbverlauf ist ein sanfter Farbübergang zwischen Punkten auf einer Zeichenoberfläche. Es gibt zwei Arten von Farbverläufen, die durch die folgenden Elemente definiert werden: <linearGradient> und <radialGradient>.

Das Element <linearGradient> oder <radialGradient> muss in ein <defs>-Tag eingebettet werden, um die Wiederverwendbarkeit zu fördern. Das Attribut id gibt einen eindeutigen Namen für den SVG-Verlauf an. Andere Elemente in der Datei können darauf verweisen. Der Farbverlauf kann für die Eigenschaften fill oder stroke für Formen, Text usw. angewendet werden.

SVG linearer Farbverlauf

Wenn wir über den SVG-Gradienten sprechen, müssen wir definieren, was ein Gradientenvektor ist? Der lineare Gradientenvektor verbindet Start- und Endpunkte, auf die die Gradientenstopps abgebildet werden. Die Attribute x1, y1, x2 und y2 legen den linearen Gradientenvektor fest. Ihre Werte können entweder Zahlen oder Prozentsätze sein. Der <linearGradient> verfügt über verschachtelte untergeordnete <stop>-Elemente, die die im Farbverlauf verwendeten Farben steuern. Jede Farbe wird mit dem Tag <stop> angegeben. Ein offset-Attribut des <stop>-Elements gibt an, wo der Farbverlaufsstopp platziert wird. Bei linearen Farbverläufen stellt es eine Position entlang des Farbverlaufsvektors dar ( linear-gradient.svg).

<svg height="250" width="700" xmlns="http://www.w3.org/2000/svg">
	<defs>
		<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
			<stop offset="10%" style="stop-color:LIGHTSALMON" />
			<stop offset="50%" style="stop-color:TEAL" />
			<stop offset="90%" style="stop-color:LIGHTPINK" />
		</linearGradient>
	</defs>
    <ellipse cx="300" cy="170" rx="165" ry="55" fill="url(#grad1)" />
    <text x="10" y="85" font-family="Arial" stroke="grey" stroke-width="1" font-size="90" fill="url(#grad1)" >Linear Gradient</text>
</svg>

Im obigen Beispiel wird der lineare Farbverlauf id="grad1" durch die Elemente <text> und <ellipse> im Attribut fill referenziert. Innerhalb des linearen Farbverlaufs befinden sich drei <stop>-Knoten. In jedem von ihnen legt ein offset-Attribut die Position fest, an der der SVG-Verlauf einen stop-color-Wert erhält.

SVG-Radialverlauf

Ein radialer Gradient ist schwieriger als ein linearer. Die Farben ändern sich darin kreisförmig und nicht linear. Die Attribute cx, cy und r definieren den äußersten Kreis für den radialen Farbverlauf: cx und cy markieren den Mittelpunkt dieses Kreises. Ihre Werte werden als Prozentsätze der Breite und Höhe einer auszufüllenden Form angegeben. Wenn beide Werte weggelassen werden, beträgt der Standardwert 50 %. Die Attribute fx und fy definieren den innersten Kreis für den radialen Farbverlauf. Dies ist der Punkt, an dem der SVG-Gradient „strahlt“.

In diesem Beispiel sind die Mittelpunkte des innersten und äußersten Randes des SVG-Gradienten gleich ( radial-gradient.svg).

<svg height="300" width="600" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <radialGradient id="myRG" cx="0.5" cy="0.5" r="0.9" fx="0.5" fy="0.5" spreadMethod="pad">
            <stop offset="0%"   stop-color="BISQUE" />
            <stop offset="60%" stop-color="CADETBLUE" />
        </radialGradient>
    </defs>
    <ellipse cx="300" cy="170" rx="165" ry="55" fill="url(#myRG)" />
    <text x="10" y="85" font-family="Arial" stroke="grey" stroke-width="1" font-size="85" fill="url(#myRG)" >Radial Gradient</text>
</svg>

Sehen wir uns ein Beispiel des radialen Gradienten an, bei dem sich der Brennpunkt (fx, fy) von der Mitte des Objekts zur Position fx=25 % und fy= bewegt 25 % ( radial-gradient1.svg):

<svg height="300" width="600" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <radialGradient id="myRG" cx="0.5" cy="0.5" r="0.8" fx="25%" fy="25%" spreadMethod="pad">
            <stop offset="0%" stop-color="BISQUE" />
            <stop offset="30%" stop-color="SILVER" />
            <stop offset="60%" stop-color="BISQUE" />
            <stop offset="90%" stop-color="GREY" />
        </radialGradient>
    </defs>
    <ellipse cx="300" cy="170" rx="185" ry="65" fill="url(#myRG)" fill-opacity="1" />
    <text x="10" y="85" font-family="Arial" stroke="grey" stroke-width="1" font-size="85" fill="url(#myRG)">Radial Gradient</text>
</svg>

Hier haben wir mehrere Farbübergänge angewendet und einen interessanten Effekt erzielt, der auf der Ellipse gut zur Geltung kommt.

Im Artikel SVG-Verläufe erfahren Sie, wie Sie lineare und radiale Verläufe in C# erstellen und gehen C#-Beispiele für die Implementierung von SVG-Verläufen mit der Bibliothek Aspose.SVG für .NET durch.

Wenn Sie sich fragen, wie Sie C#-Code schreiben, um SVG-Filter, Gaußsche Unschärfe, Schatteneffekte, Beleuchtung oder Farbeffekte zu erstellen, lesen Sie bitte das Kapitel SVG-Filter – C#-Code.