> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # SVG-Körnung: Rauschen innerhalb deiner Grafik halten > Erzeuge SVG-Körnung mit feTurbulence, begrenze monochromes Rauschen auf SourceAlpha, prüfe zwei Größen und behalte eine saubere Pfad-Masterdatei für andere Ziele. Source: https://perfectvector.com/de/blog/svg-feturbulence-grain Language: de Author: Irene Kim Published: 2026-10-01T08:00:00+09:00 Updated: 2026-10-01T08:00:00+09:00 Um einer SVG-Illustration Körnung hinzuzufügen, erzeuge Rauschen mit `feTurbulence`, wandle es in eine schwache monochrome Überlagerung um und begrenze diese mit einer Komposition innerhalb von `SourceAlpha`. Lege sie über `SourceGraphic`, damit die ursprüngliche Füllung sichtbar bleibt. So entsteht eine gerenderte Textur, während die Pfadgeometrie der Grafik unverändert bleibt. Eine Rauschprimitive allein liefert ein anderes Ergebnis: Sie füllt ihren Filterprimitiven-Unterbereich, statt dem Umriss der Form zu folgen. Deshalb kann aus einem Blatt ein rechteckiger Rauschfleck werden. Die [MDN-Referenz zu feTurbulence](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) dokumentiert dieses Verhalten. Für eine Webillustration sind eine texturierte Darstellungsversion und eine saubere Masterdatei nützliche Ausgaben. Die von diesem Filter erzeugte Körnung ist keine Sammlung bearbeitbarer Punkte oder Schnittkonturen. ## Trenne Form und Oberflächengestaltung Beginne mit einem einfachen gefüllten Pfad, der ohne Körnung bereits richtig aussieht. Korrigiere Umriss, Lücken und Farbe, bevor du den Effekt hinzufügst. Ein Filter repariert diese Geometrie nicht. Die folgenden drei Zustände erklären das Begrenzungsproblem: | Version | Was der Filter ausgibt | Wann du sie verwendest | | ----------------- | ------------------------------------------------------------------------- | --------------------------------------------------------- | | Einfache Form | Den ursprünglichen gefüllten Pfad | Bearbeitung und saubere Masterdatei | | Rauschen allein | Ein rechteckiges erzeugtes Bild im Filterbereich | Zur Prüfung der Rauschquelle statt zur Ausgabe des Motivs | | Begrenzte Körnung | Ursprüngliche Grafik plus durch ihr Alpha begrenztes monochromes Rauschen | Texturierte Darstellungsversion im Browser | **Die Begrenzung ist wichtig** ![Illustration eines sauberen korallfarbenen Blatts, über ein Blatt hinausreichender Körnung und innerhalb einer klaren Blattsilhouette begrenzter Körnung](https://perfectvector.com/blog/svg-feturbulence-grain/grain-boundary.webp) *Illustration: Die Form bleibt sauber, während das Rauschen auf ihre Silhouette begrenzt wird. Diese schematische Darstellung ist weder ein Screenshot eines SVG-Renderers noch ein Vektorisierungsergebnis.* `SourceGraphic` liefert das Element, auf das der Filter angewendet wird. `SourceAlpha` liefert dessen Alphakanal. Der Filter arbeitet auf einem Bild der Grafik und schreibt die Pfadbefehle nicht um. Diese Eingaben und der Filtergraph sind in der [W3C-Spezifikation zu Filtereffekten](https://drafts.csswg.org/filter-effects/#FilterPrimitiveTree) definiert. Wenn deine Ausgangsgrafik bereits transparente Bereiche enthält, beeinflussen diese auch die Begrenzung. SourceAlpha folgt der tatsächlich gerenderten Deckkraft, nicht einem geschätzten äußeren Begrenzungsrahmen. ## Kopiere ein vollständiges Beispiel für SVG-Körnung Speichere dies als `.svg`-Datei und öffne sie im Browser. Sie enthält einen selbst erstellten Blattpfad, einen deterministischen Rauschstartwert, eine dunkle Überlagerung und den ausdrücklichen Begrenzungsschritt. Die diagonale Öffnung gehört zum Pfad und bleibt deshalb auch in der texturierten Version transparent. ```xml ``` Der Filter erledigt vier Aufgaben: 1. `feTurbulence` erzeugt das Rauschen und benennt es `noise`. 2. Die Matrix setzt Rot, Grün und Blau auf null. Ihre letzte Zeile multipliziert das Alpha des Rauschens mit `0.28` und erzeugt eine schwache schwarze Überlagerung namens `ink`. 3. `feComposite` mit `operator="in"` behält diese Überlagerung dort, wo `SourceAlpha` vorhanden ist. 4. `feMerge` zeichnet zuerst die ursprüngliche Grafik und darüber die begrenzte Überlagerung. Die [MDN-Referenz zu feColorMatrix](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) erklärt, wie die fünfspaltige Matrix Farbe und Alpha umwandelt. Hier verändert sie das Rauschbild, nicht die Blattfüllung. Die [MDN-Referenz zu feComposite](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite) erklärt die Operation `in`, mit der die Überlagerung auf die zweite Eingabe beschränkt wird. Der Wert `0.28` ist ein Ausgangspunkt für dieses korallfarbene Blatt, keine universelle Körnungseinstellung. Senke ihn, wenn die Textur die Grafik stumpf wirken lässt, und erhöhe ihn, wenn die Körnung bei der vorgesehenen Darstellungsgröße verschwindet. Schwarze Überlagerungskörnung dunkelt die Füllung ab. Sie erzeugt keine sichtbaren hellen Sprenkel auf einem schwarzen Motiv. Die Farb- und Alphaoperationen zum Umfärben vorhandener Grafiken findest du im separaten [Leitfaden zu feColorMatrix](https://perfectvector.com/de/blog/svg-fecolormatrix). Zum Härten einer vorhandenen transparenten Kante siehe [SVG-Alphaschwellenwerte](https://perfectvector.com/de/blog/svg-alpha-threshold). Keine dieser Operationen liefert die hier verwendete erzeugte Rauschquelle. ## Prüfe das Ergebnis in der tatsächlichen Darstellungsgröße Wir haben drei Versionen dieses ursprünglichen Pfads erstellt: ohne Filter, mit einem Filter nur aus der Rauschprimitive und mit dem oben gezeigten vollständigen Graphen für begrenzte Körnung. Wir prüften die gerenderten Versionen in Chrome bei **120 × 120** und **360 × 360 CSS-Pixeln** mit derselben viewBox `0 0 200 200`. | Prüfung | 120-Pixel-Version | 360-Pixel-Version | | -------------------- | -------------------------------------------------- | ------------------------------------------------------------------- | | Einfache Masterdatei | Glattes korallfarbenes Blatt, transparente Öffnung | Gleicher Umriss und gleiche Öffnung | | Rauschen allein | Rechteckiges Rauschen ersetzt das sichtbare Motiv | Rechteckiges Rauschen bleibt außerhalb der Blattsilhouette sichtbar | | Begrenzte Körnung | Schwache Textur innerhalb des Blatts | Deutlichere Textur, während Öffnung und Umgebung frei bleiben | Das Browser-DOM enthielt in jedem Beispiel einen Pfad. Alle sechs `d`-Attribute waren identisch. Das zeigt die Grenze dieses Beispiels: Die gerenderte Oberfläche änderte sich, und es kamen keine Sprenkelpfade hinzu. Es ist eine selbst erstellte Browser-Testdatei, keine Ausgabe von PerfectVector oder einem nativen Vektoreditor. Eine größere Vorschau erleichtert die Prüfung des Effekts. Die kleinere Version entscheidet aber darüber, ob die Grafik noch klar erkennbar ist. Berücksichtige beide Größen bei deiner Prüfung. Eine größere Darstellung mit derselben viewBox verändert auch die scheinbare Texturgröße. Nimm nicht an, eine Vorschau stehe für jede Verwendung. ## Passe die Körnung jeweils mit einem Regler an Beginne für eine kleine Illustration auf einer Webkarte mit den Werten des Beispiels. Ändere dann einen Parameter, vergleiche dieselben zwei Darstellungsgrößen und behalte eine Kopie der bevorzugten Version. | Einstellung | Was du entscheidest | Praktische Prüfung | | ------------------------------ | --------------------------------------------------------- | ------------------------------------------------------------------------------------------- | | `baseFrequency` | Gröbere oder feinere Variation in SVG-Koordinaten | Vergleiche `0.25` mit `0.65` und prüfe die tatsächliche Darstellungsgröße | | `numOctaves` | Wie viele Rauschdetailebenen kombiniert werden | Vergleiche `1` und `2`, bevor du mehr Details hinzufügst | | `seed` | Welche Rauschrealisierung verwendet wird | Beim Vergleich anderer Einstellungen festhalten | | Alpha-Multiplikator der Matrix | Wie stark die schwarze Überlagerung die Füllung abdunkelt | Vergleiche `0.15` und `0.28` an derselben Grafik | | Filterbereich | Das für den Filtergraphen verfügbare Rechteck | Fehlende Ausgabe reparieren, ohne das Rechteck als Ersatz für Alpha-Begrenzung zu verwenden | `baseFrequency` akzeptiert einen Wert für beide Achsen oder zwei Werte für horizontale und vertikale Frequenz. Die [MDN-Referenz zu baseFrequency](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/baseFrequency) dokumentiert diesen Unterschied. Beginne bei diesem Blatt mit einem Wert. Ungleiche Werte sind eine gezielte Wahl für eine gerichtete Textur. `numOctaves` steuert die Zahl der Rauschoktaven, wie die [MDN-Referenz zu numOctaves](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/numOctaves) beschreibt. Zusätzliche Oktaven sind keine zusätzlichen Vektorpfade. Nutze sie nur, wenn sie die sichtbare Oberfläche in der benötigten Größe verbessern. Das Beispiel setzt `color-interpolation-filters="sRGB"` ausdrücklich. Behalte diese Einstellung beim Vergleich deiner Kandidaten bei, damit eine Änderung der Farbverarbeitung den Körnungsvergleich nicht verfälscht. ## Behebe ein Rechteck, fehlende Füllung oder unsaubere Kanten **Die Textur bildet einen rechteckigen Fleck.** Prüfe die letzte Filterausgabe. Endet der Filter mit `feTurbulence`, gibt er das Rauschbild zurück. Stelle Matrix, `SourceAlpha`-Komposition und Zusammenführung wieder her. Ein größeres Filterrechteck gibt unbegrenztem Rauschen lediglich mehr Platz. **Die Blattfarbe verschwindet.** Prüfe, dass der erste Zusammenführungsknoten `SourceGraphic` verwendet. Ein abschließendes `inside`-Ergebnis allein enthält die dunkle Überlagerung, nicht die ursprüngliche korallfarbene Füllung. Prüfe auch Schreibweise und Groß-/Kleinschreibung jedes benannten `result` und jedes `in`-Verweises. **In einer transparenten Öffnung bleibt Rauschen sichtbar.** Bestätige, dass die zweite Kompositionseingabe `SourceAlpha` ist, nicht das rechteckige Rauschen oder ein undurchsichtiger Hintergrund. Wende den Filter auf die Grafik an, die du texturieren möchtest. Ein undurchsichtiger Hintergrund in der gefilterten Gruppe verändert die Alpha-Eingabe. **Ein Teil der Ausgabe wird abgeschnitten.** Prüfe `x`, `y`, `width` und `height` am Filter. Sie legen den verfügbaren Filterbereich fest, wie die [MDN-Filterreferenz](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) beschreibt. Das Beispiel gibt etwas zusätzlichen Platz. Ein größerer Bereich repariert keinen fehlenden Begrenzungsschritt und behebt kein Abschneiden durch einen separaten Container. **Die kleine Grafik wirkt matschig.** Verringere zuerst das Überlagerungsalpha und vergleiche dann Frequenz und Oktavenzahl. Wenn die Textur die Silhouette weiterhin beeinträchtigt, liefere in dieser Größe die saubere Version. ## Behalte eine saubere Masterdatei für die Ausgabe Entferne für die ungefilterte Masterdatei `filter="url(#grain)"` vom Pfad und die nun ungenutzte Filterdefinition. Bewahre `d`, Füllung und viewBox des Pfads. Öffne die Datei separat und bestätige, dass Blatt und Öffnung der ursprünglichen sauberen Version entsprechen. Prüfe bei einer Web-App die texturierte Version in den Browsern und mit genau der Einbettungsmethode, die du ausliefern wirst. Wenn du dieses Inline-SVG auf einer Seite wiederholst, gib jedem Filter eine eindeutige ID und aktualisiere seinen Verweis `url(#...)`. Das eigenständige Beispiel nutzt eine ID, weil es eine Instanz enthält. Exportiere für ein Ziel mit fest vorgegebenem Rasteraussehen eine Rastervorschau in der erforderlichen Größe und prüfe sie dort. Gib für einen Ablauf mit bearbeitbarer oder schneidbarer Geometrie die sauberen Pfade weiter und erkläre, dass die Körnung ein Darstellungseffekt ist. Bezeichne Filterrauschen nicht als Vektorsprenkel und verspreche nicht, dass ein nachgelagerter Editor, PDF-Exporter oder ein Schneidegerät es reproduziert. Teste das tatsächliche Ziel. Wenn du bewusst einzeln bearbeitbare Sprenkel brauchst, ist das eine separate Geometrieaufgabe. Dabei musst du auch über die Bereinigung entscheiden. Lies [warum ein SVG zu viele Knoten hat](https://perfectvector.com/de/blog/svg-too-many-nodes), bevor du Textur in eine Masse winziger Konturen nachzeichnest. Körnung aus einem Rastergemälde zu erhalten ist ein anderes Ausgangsproblem, das [Aquarell zu Vektor](https://perfectvector.com/de/blog/watercolor-to-vector) behandelt. ## Wann Vektorisierung hilft Wenn das saubere Motiv nur noch als PNG oder JPG vorliegt, [konvertiere diese Vorlage in bearbeitbare SVG-Grafik](https://perfectvector.com/de/image-to-vector), bevor du einen Browserfilter hinzufügst. Prüfe zuerst die wiederhergestellte Silhouette und Öffnung in der sauberen Version. PerfectVector liefert den Raster-zu-Vektor-Schritt. Der prozedurale Körnungsgraph in diesem Leitfaden ist eine separate SVG-Gestaltung, die du anschließend ergänzt. Hast du die pfadbasierte Masterdatei bereits? Verwende sie direkt. Für die Filteraufgabe ist keine zweite Konvertierung erforderlich. Der [Leitfaden zur Bildvektorisierung](https://perfectvector.com/de/blog/what-is-image-vectorization) erklärt diesen Wiederherstellungsschritt bei Bedarf. ## Häufige Fragen **Warum erzeugt feTurbulence ein Rechteck, statt meiner Form zu folgen?** Das Rauschen füllt seinen Filterprimitiven-Unterbereich. Begrenze es durch eine Komposition innerhalb von SourceAlpha und lege es über SourceGraphic, um die Überlagerung auf die Grafik zu beschränken und deren Füllung zu erhalten. **Fügt SVG-Körnung meinem Pfad Knoten hinzu?** Dieser Filter fügt keine Sprenkelpfade hinzu. In der ursprünglichen Browser-Testdatei behielten alle sechs Beispiele einen Pfad mit identischen d-Daten. Der Filter änderte die gerenderte Oberfläche. **Mit welchen Körnungseinstellungen sollte ich beginnen?** Beginne beim ursprünglichen Blattbeispiel mit fractalNoise, baseFrequency 0.65, zwei Oktaven, Startwert 8 und einem Alpha-Multiplikator von 0.28 für die schwarze Überlagerung. Vergleiche bei der tatsächlichen Darstellungsgröße und ändere jeweils eine Einstellung. **Kann ich den Körnungseffekt als Schnittdatei verwenden?** Die erzeugte Textur ist keine bearbeitbare Schnittgeometrie. Bewahre eine separate ungefilterte Pfad-Masterdatei auf und prüfe die Geometrie im tatsächlichen Schneideablauf. ## Quellen 1. [MDN: feTurbulence](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) – Rauscherzeugung und Primitiven-Unterbereich. 2. [W3C: Filterprimitivenbaum](https://drafts.csswg.org/filter-effects/#FilterPrimitiveTree) – SourceGraphic, SourceAlpha und Filterbildverarbeitung. 3. [MDN: feColorMatrix](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) – Matrixoperationen für Farbe und Alpha. 4. [MDN: feComposite](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite) – Begrenzung mit dem in-Operator. 5. [MDN: baseFrequency](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/baseFrequency) – Frequenzwerte für eine und zwei Achsen. 6. [MDN: numOctaves](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/numOctaves) – Rauschdetailebenen. 7. [MDN: filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) – Attribute des Filterbereichs. Wenn deine Webillustration eine aus Raster wiederhergestellte saubere Masterdatei braucht, [beginne mit der Bild-zu-Vektor-Konvertierung](https://perfectvector.com/de/image-to-vector), prüfe die Pfade und füge einer separaten Darstellungskopie Körnung hinzu. ## Explore - [Read the HTML article](https://perfectvector.com/de/blog/svg-feturbulence-grain) - [SVG in FontForge: Zeichnungen zu Glyphenkonturen](https://perfectvector.com/de/blog/fontforge-import-svg.md) - [Qualität einer Vektornachzeichnung bewerten: Ein Punkteschema](https://perfectvector.com/de/blog/evaluate-vector-trace-quality.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)