> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # SVG-Lichtfilter: Ein Emblem schattieren und Öffnung erhalten > Erzeuge diffuse und spiegelnde SVG-Beleuchtung aus dem Alpha eines hohlen Emblems, begrenze das Ergebnis auf seine Silhouette und behalte eine separate flache Vektor-Masterdatei. Source: https://perfectvector.com/de/blog/svg-lighting-relief Language: de Author: Irene Kim Published: 2026-10-02T08:00:00+09:00 Updated: 2026-10-02T08:00:00+09:00 Für ein geprägtes Aussehen eines SVG-Logos weichst du `SourceAlpha` auf, gibst dieses Alpha an `feDiffuseLighting` oder `feSpecularLighting` weiter, kombinierst das Licht mit der Quellfarbe und schließt mit einer `in`-Komposition gegen das ursprüngliche `SourceAlpha` ab. Dieser letzte Schritt hält die Gestaltung innerhalb des Emblems und erhält seine Öffnung. Speichere eine ungefilterte Kopie des Pfads als flache Masterdatei. Der Effekt verändert das gerenderte Aussehen. Er erzeugt weder einen erhabenen Körper noch eine neue Kontur oder Fertigungsdatei. Diese Anleitung verwendet ein selbst erstelltes Rautenring-Emblem, das direkt als SVG geschrieben wurde, um die Beleuchtungsstufen und ihr Alpha zu vergleichen. ## Verwende Alpha als Beleuchtungsoberfläche `feDiffuseLighting` verwendet das Eingabealpha als Höhenkarte und erzeugt eine undurchsichtige Lichtmap. Ihr Aussehen hängt von Licht und Eingabeoberfläche ab. [MDNs Referenz zur diffusen Beleuchtung](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDiffuseLighting) erklärt dieses Verhalten. In diesem Beispiel bilden die undurchsichtigen Ringteile den hohen und die Öffnung den niedrigen Bereich. Wir zeichnen nur `SourceAlpha` weich und halten den ursprünglichen farbigen Pfad als `SourceGraphic` verfügbar. Das geglättete Alpha gibt der Lichtberechnung einen allmählichen Übergang an inneren und äußeren Kanten. [`feGaussianBlur`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feGaussianBlur) steuert diese Glättung über `stdDeviation`. Die Vorlage verwendet `2.5` in einem Filter mit ausdrücklich festgelegtem Benutzerkoordinatenraum. Die unverarbeitete diffuse Map zeichnet über den gesamten Filterbereich, auch dort, wo der ursprüngliche Pfad transparent war. Das ist nützlich zur Prüfung der Lichtberechnung, aber die falsche endgültige Silhouette für unser hohles Emblem. Halte das ursprüngliche Alpha für den abschließenden Begrenzungsschritt verfügbar. ## Kopiere die vollständige Vorlage für das schattierte Emblem Speichere dies als `emblem-lighting.svg` und öffne es im Browser. Es besitzt einen zusammengesetzten Pfad und keine externe Bildabhängigkeit. ```svg ``` Der Filter benennt jedes Zwischenergebnis, damit du seine Rolle prüfen kannst: | Stufe | Eingabe und Ergebnis | Zweck | | -------------- | ----------------------------- | ----------------------------------------------------- | | Weichzeichnung | SourceAlpha → bump | Höhenübergang glätten | | Diffus | bump → diffuse | Flächige Beleuchtung berechnen | | Multiplizieren | SourceGraphic × diffuse → lit | Ursprüngliche Farbe schattieren | | Spiegelnd | bump → shine | Reflexionsanteil berechnen | | Addieren | lit + shine → paint | Schattierung und Glanzlicht kombinieren | | Begrenzen | paint in SourceAlpha | Ursprüngliche Silhouette und Öffnung wiederherstellen | Die arithmetische Multiplikation verwendet `k1="1"`, während die anderen Koeffizienten null sind. Die Addition verwendet `k2="1" k3="1"`, während die anderen null sind. [`feComposite`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite) definiert diese Pixeloperationen und den Operator `in`. Behalte als zweite Eingabe der letzten Komposition `SourceAlpha`, nicht das weichgezeichnete `bump`, wenn du die ursprüngliche Grenze möchtest. Der Filter verwendet ausdrücklich `color-interpolation-filters="linearRGB"`, den Standard für SVG-Filteroperationen. Das ist von gewöhnlicher Farbinterpolation getrennt. [MDNs Referenz zu color-interpolation-filters](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation-filters) dokumentiert den Unterschied. Alle hier gemessenen Beleuchtungsvarianten verwenden dieselbe Einstellung. ## Vergleiche diffuse Schattierung und spiegelnden Glanz Diffuse Beleuchtung dunkelt die ursprüngliche Farbe entsprechend der Lichtmap ab oder hellt sie auf. Die spiegelnde Stufe ergänzt einen Reflexionsanteil. [`feSpecularLighting`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feSpecularLighting) dokumentiert die lichtabhängige Ausgabe und ihre Parameter. Die Vorlage verwendet eine zurückhaltende Konstante von `.7` und den Exponenten `18`. Passe sie an, nachdem du eine brauchbare diffuse Gestaltung erreicht hast. Um nur diffuse Beleuchtung zu prüfen, behalte Weichzeichnung, diffuse Stufe und Multiplikation. Ändere dann die erste Eingabe der letzten Komposition von `paint` zu `lit`. Entferne die spiegelnde und die Additionsstufe. Um nur spiegelnden Glanz über der flachen Farbe zu prüfen, behalte Weichzeichnung und spiegelnde Stufe. Ändere die erste Eingabe der Addition von `lit` zu `SourceGraphic`, entferne diffuse Stufe und Multiplikation und behalte die letzte Komposition `paint in SourceAlpha`. Beide Vergleiche behalten denselben ursprünglichen Pfad und dieselbe Lichtrichtung. Unser entferntes Licht verwendet `azimuth="225" elevation="45"`. [`feDistantLight`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDistantLight) ist ein Lichtquellenelement für beide Beleuchtungsprimitive. Diese Winkel sind Gradangaben, keine Pixelpositionen. Ändere beim Vergleich einer kombinierten Gestaltung die Richtung in beiden Beleuchtungsstufen gemeinsam. ## Was die ursprünglichen Browserkontrollen zeigten Wir öffneten sechs selbst erstellte SVG-Beispiele in Chrome bei `80 × 80` und `160 × 160` CSS-Pixeln. Flache Masterdatei, diffuse, spiegelnde und kombinierte Gestaltung blieben sichtbar unterscheidbar. Ein höherer diffuser `surfaceScale` verstärkte den Kantenkontrast in dieser Testdatei. Der unverarbeitete diffuse Kontrollfall zeigte ein graues Rechteck mit gefüllter Öffnung statt einer transparenten Silhouette. Separate Pixelauslesungen verwendeten die Quell-Canvas-Größe `200 × 200`. Die Bandprobe lag bei `(100, 38)`, die Kantenprobe bei `(101, 22)`, die Öffnung bei `(100, 100)` und die Außenprobe bei `(10, 10)`. | Beispiel | Band-RGB | Kanten-RGB | Alpha Öffnung / außen | | --------------------------------------------------------- | ------------- | ------------- | --------------------- | | Flache Masterdatei | 220, 121, 95 | 220, 121, 95 | 0 / 0 | | Unverarbeitete diffuse Lichtmap, Maßstab 4 | 219, 219, 219 | 214, 214, 214 | 255 / 255 | | Diffuse Farbe, Maßstab 4, begrenzt | 189, 102, 81 | 185, 101, 79 | 0 / 0 | | Diffuse Farbe, Maßstab 12, begrenzt | 189, 102, 81 | 155, 83, 64 | 0 / 0 | | Spiegelnder Glanz über flacher Farbe, Maßstab 4, begrenzt | 242, 162, 145 | 221, 122, 96 | 0 / 0 | | Kombinierte Gestaltung, Maßstab 4, begrenzt | 214, 149, 137 | 185, 102, 81 | 0 / 0 | Jede Datei behielt denselben `d`-Wert, einen Pfad und null Bildelemente. Der Bildschirmeffekt erzeugte keine zusätzliche Quellgeometrie. Das sind Beobachtungen aus diesem Browser und dieser Quelle, keine Garantien für einen anderen Renderer oder das Importverhalten eines Editors. **Beleuchtung und flache Masterdatei** ![Schematische Illustration gleicher hohler Rautenembleme mit flacher Farbe, flächiger Schattierung und konzentriertem Glanzlicht.](https://perfectvector.com/blog/svg-lighting-relief/lighting-and-master.webp) *Illustration: Diffuse Schattierung und spiegelnder Glanz können dieselbe Kontur gestalten, während ihre Öffnung frei bleibt. Dies ist weder das Browserbeispiel noch ein Nachzeichnerergebnis oder ein physisches Relief.* ## Passe das Höhenfeld an, bevor du die Kontur änderst [`surfaceScale`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/surfaceScale) legt den Oberflächenhöhenmaßstab für die Beleuchtungsberechnung fest. Es erweitert den Pfad nicht. Unsere diffusen Kontrollfälle `4` und `12` änderten nur diesen Wert. Das abgetastete flache Band behielt dieselbe Farbe, während die Kantenprobe bei `12` dunkler wurde. Gehe kontrolliert vor: 1. Stelle die ursprüngliche transparente Silhouette und Öffnung ohne Filter her. 2. Wähle Alpha-Glättung und Lichtrichtung. 3. Vergleiche einen kleinen und größeren `surfaceScale`, während alles andere fest bleibt. 4. Ergänze spiegelnden Glanz und begrenze die Farbe dann als letzten Schritt mit dem ursprünglichen Alpha. 5. Prüfe die ausgelieferte Grafik in ihrer tatsächlichen Darstellungsgröße und vor einem kontrastierenden Hintergrund. Die aktuelle [Filter-Effects-Spezifikation](https://www.w3.org/TR/filter-effects-1/#feDiffuseLightingElement) definiert das diffuse Ausgabealpha überall als eins und das spiegelnde Ausgabealpha aus seinen Farbkomponenten. Bei keiner Ausgabe solltest du annehmen, sie behalte die ursprüngliche Öffnung. Die Spezifikation definiert auch die Normalenberechnung aus benachbarten Alphaproben. Diese Vorlage lässt `kernelUnitLength` ungesetzt. Unsere Prüfung in zwei Größen belegt keine größenunabhängigen Beleuchtungsproben. Erscheint der Zwischenpuffer einer Beleuchtungsstufe als Endergebnis, prüfe die benannten Eingaben und die letzte Primitive. Bei diesem Ring reproduzierten wir das undurchsichtige graue Rechteck, indem wir die diffuse Lichtmap direkt zurückgaben. Der abschließende Schritt `in SourceAlpha` ist beabsichtigt, auch wenn eine frühere Multiplikation die Transparenz bereits zu erhalten scheint. Wird eine Weichzeichnung oder ein Effekt an einem unerwarteten Rechteck abgeschnitten, prüfe den Filterbereich mit dem [SVG-Clipping-Leitfaden](https://perfectvector.com/de/blog/svg-shadow-clipped). Halte diesen Bereich von der abschließenden Quellalpha-Begrenzung getrennt: Der eine begrenzt die Arbeitsfläche des Effekts, die andere stellt unsere gewünschte Silhouette wieder her. ## Liefere die Bildschirmgestaltung mit einer flachen Masterdatei Entferne das Filterattribut des Pfads, um die flache Masterdatei zu prüfen. Sie behält dieselbe Außenkontur, innere Öffnung und einfarbige korallfarbene Füllung. Behalte diese Kopie zusammen mit der schattierten Webversion, damit spätere Bearbeitungen von der ursprünglichen Geometrie ausgehen können. Verwende für eine physische Veredelung einen separaten Vorbereitungsablauf wie [Vektorgrafik für Prägungen](https://perfectvector.com/de/blog/vector-artwork-for-embossing). Eine Bildschirmbeleuchtungsvorgabe liefert Aussehen statt Werkzeuggeometrie oder gemessener Reliefhöhe. Der [Leitfaden zu SVG-Morphologiekonturen](https://perfectvector.com/de/blog/svg-femorphology-outline) erklärt eine weitere filterbasierte Kantengestaltung, ohne sie als rekonstruierte Pfade zu behandeln. Existiert dein Logo nur als PNG oder JPG, [vektorisiere es mit PerfectVector](https://perfectvector.com/de/vectorize-logo), prüfe die wiederhergestellte Außenkontur und Öffnung und behalte eine saubere flache Masterdatei, bevor du im SVG-Ablauf Beleuchtung hinzufügst. Der Dienst stellt Vektorgeometrie wieder her. Diese Pipeline für diffuse und spiegelnde Beleuchtung ist ein separater, eigens erstellter Darstellungseffekt. Hast du bereits die Vektor-Masterdatei, wende den Filter direkt an und prüfe ihn. ## Häufige Fragen **Können SVG-Lichtfilter ein Logo geprägt aussehen lassen?** Sie können Schattierung und Glanzlichter aus einem alphabasierten Höhenfeld simulieren. Die gerenderte Gestaltung erzeugt weder physisches Relief noch zusätzliche Pfadkonturen oder eine Produktionsdatei für ein Prägewerkzeug. **Warum füllt mein SVG-Lichteffekt die transparente Öffnung?** Eine unverarbeitete diffuse Lichtmap ist über ihren gesamten Filterbereich undurchsichtig. Kombiniere das Licht mit der Quellfarbe und schließe mit einer in-Komposition gegen das ursprüngliche SourceAlpha ab, um die Gestaltung auf die ursprüngliche Silhouette zu begrenzen. **Was unterscheidet diffuse und spiegelnde SVG-Beleuchtung?** Diffuse Beleuchtung liefert flächige Beleuchtung zum Schattieren der ursprünglichen Farbe. Spiegelnde Beleuchtung liefert einen Reflexionsanteil, der als Glanz ergänzt wird. Beide verwenden Eingabealpha als Höhenkarte und hängen vom ausgewählten Licht und den Oberflächeneinstellungen ab. **Ändert surfaceScale den Pfad meines Logos?** Nein. Es ändert den Höhenmaßstab der Beleuchtungsberechnung. In unseren beiden diffusen Kontrollfällen blieben die Pfaddaten identisch, während sich der gerenderte Kantenkontrast änderte. ## Quellen 1. [MDN feDiffuseLighting](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDiffuseLighting) – Alpha-Höhenkarteneingabe und undurchsichtige diffuse Lichtausgabe. 2. [MDN feGaussianBlur](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feGaussianBlur) – Geglättete Eingabe und Überlegungen zum Filterbereich. 3. [MDN feComposite](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite) – Arithmetische Multiplikation/Addition und Quellalpha-Begrenzung. 4. [MDN color-interpolation-filters](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation-filters) – linearRGB als Standard für Filteroperationen. 5. [MDN feSpecularLighting](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feSpecularLighting) – Reflexionsanteil und seine Einstellungen. 6. [MDN feDistantLight](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDistantLight) – Lichtquelle für beide Beleuchtungsprimitive. 7. [MDN surfaceScale](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/surfaceScale) – Oberflächenhöhenmaßstab für die Berechnung. 8. [Filter-Effects-Beleuchtungsspezifikation](https://www.w3.org/TR/filter-effects-1/#feDiffuseLightingElement) – Beleuchtungsalpha, Winkeleinheiten und Berechnungen benachbarter Proben. ## Explore - [Read the HTML article](https://perfectvector.com/de/blog/svg-lighting-relief) - [SVG-Verschiebungsmaps: Verzerrte Logo-Vorschauen erstellen](https://perfectvector.com/de/blog/svg-fedisplacementmap-artwork.md) - [SVG-Konturausrichtung: Umrisse innen oder außen](https://perfectvector.com/de/blog/svg-stroke-alignment.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)