SVG-Körnung: Rauschen innerhalb deiner Grafik halten

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 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:

Die Begrenzung ist wichtig

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 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.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <defs>
    <filter id="grain" x="-10%" y="-10%" width="120%" height="120%"
            color-interpolation-filters="sRGB">
      <feTurbulence type="fractalNoise" baseFrequency="0.65"
                    numOctaves="2" seed="8" result="noise"/>
      <feColorMatrix in="noise" type="matrix" values="0 0 0 0 0
        0 0 0 0 0
        0 0 0 0 0
        0 0 0 0.28 0" result="ink"/>
      <feComposite in="ink" in2="SourceAlpha" operator="in" result="inside"/>
      <feMerge>
        <feMergeNode in="SourceGraphic"/>
        <feMergeNode in="inside"/>
      </feMerge>
    </filter>
  </defs>
  <path d="M36 142C40 70 104 26 164 30C164 100 120 150 60 156L38 180L28 170L52 146C80 112 112 78 146 46C104 78 74 110 54 140Z" fill="#e76b50" filter="url(#grain)"/>
</svg>

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 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 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. Zum Härten einer vorhandenen transparenten Kante siehe SVG-Alphaschwellenwerte. 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.

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.

baseFrequency akzeptiert einen Wert für beide Achsen oder zwei Werte für horizontale und vertikale Frequenz. Die MDN-Referenz zu 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 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 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, 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 behandelt.

Wann Vektorisierung hilft

Wenn das saubere Motiv nur noch als PNG oder JPG vorliegt, konvertiere diese Vorlage in bearbeitbare SVG-Grafik, 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 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 – Rauscherzeugung und Primitiven-Unterbereich.
2. W3C: Filterprimitivenbaum – SourceGraphic, SourceAlpha und Filterbildverarbeitung.
3. MDN: feColorMatrix – Matrixoperationen für Farbe und Alpha.
4. MDN: feComposite – Begrenzung mit dem in-Operator.
5. MDN: baseFrequency – Frequenzwerte für eine und zwei Achsen.
6. MDN: numOctaves – Rauschdetailebenen.
7. MDN: filter – Attribute des Filterbereichs.

Wenn deine Webillustration eine aus Raster wiederhergestellte saubere Masterdatei braucht, beginne mit der Bild-zu-Vektor-Konvertierung, prüfe die Pfade und füge einer separaten Darstellungskopie Körnung hinzu.