SVG-Alpha-Schwellenwert: Transparenz hart begrenzen

Für eine Alpha-Grenze bei 0.5 verwendest du feComponentTransfer mit <feFuncA type="discrete" tableValues="0 1"/>. Eingabe-Alpha unter 0.5 wird transparent; ab 0.5 wird es vollständig deckend. Lass die RGB-Funktionen weg, wenn deren Übertragungsfunktionen unverändert bleiben sollen.

Der Filter ändert das gerenderte Alpha, nicht die Struktur der zugrunde liegenden Grafik. Einen deckenden weißen Hintergrund kann er nicht entfernen, denn weiße Pixel mit Alpha 1 passieren dieselbe Grenze wie deckende farbige Pixel. Ein im SVG eingebettetes PNG bleibt außerdem ein Rasterbild.

Vergleiche bekannte Quellpixel, bevor du einen Schwellenwert wählst

Wir haben ein kleines 8-Bit-RGBA-PNG mit einem allmählichen Alpha-Verlauf, einem transparenten quadratischen Loch, einer deckenden weißen Fläche und sechs kontrollierten Farbfeldern erstellt. Jedes SVG in diesem Test bettet dieselben PNG-Bytes in ein einzelnes Bildelement ein. Die ungefilterte Variante und die Varianten mit discrete sowie interpolierter table unterscheiden sich nur durch ihre Filterkonfiguration.

Das Schachbrettmuster unten gehört zur umgebenden Seite und liegt außerhalb des SVG. Es macht Transparenz sichtbar, ohne vorzutäuschen, Teil des Alpha-Kanals des Bildes zu sein.

Unsere Seite lud die tatsächlichen SVG-Varianten, zeichnete sie auf ein Browser-Canvas und erfasste Proben im Inneren der sechs Farbfelder. Die Alpha-Bytes der Ausgabe waren:

Die normalisierten Alpha-Werte ergeben sich aus diesen Bytes geteilt durch 255. 127/255 liegt also knapp unter 0.5, während 128/255 knapp darüber liegt. Die Proben liegen auf beiden Seiten der mathematischen Grenze; ein 8-Bit-PNG-Byte kann nicht exakt 0.5 darstellen.

Das Loch in der Quelle hatte in jeder Variante Alpha 0. Die weiße Fläche hatte in jeder Variante 255. Das sind Beobachtungen an dieser kontrollierten Testdatei, keine Behauptung, dass eine beliebige Grafik nach dem Anwenden eines Schwellenwerts jedes gewünschte Detail behält.

Wende die Übertragungsfunktion auf Alpha an

Der wesentliche Filter ist kurz:

<filter id="alpha" filterUnits="userSpaceOnUse"
  x="0" y="0" width="320" height="240">
  <feComponentTransfer in="SourceGraphic">
    <feFuncA type="discrete" tableValues="0 1"/>
  </feComponentTransfer>
</filter>

Wende ihn mit filter="url(#alpha)" auf das Bild an. Der Filterbereich dieses Beispiels deckt seine vollständige Quelle und den Viewport von 320 mal 240 ab. Verwende Grenzen, die zu deiner eigenen Grafik passen, statt diese Abmessungen in eine andere Datei zu übernehmen.

Die MDN-Referenz zu feFuncA beschreibt es als Alpha-Übertragungsfunktion innerhalb von feComponentTransfer. Die Referenz zu component-transfer beschreibt die kanalweise Neuzuordnung und Berechnungen mit nicht vormultiplizierten Farbwerten.

Die aktuelle Filter-Effects-Spezifikation weist nicht angegebenen Kanalfunktionen eine Identitätsabbildung zu. Unser Markup lässt feFuncR, feFuncG und feFuncB weg; es ändert nur die Alpha-Übertragungsfunktion. Das bedeutet nicht, dass die sichtbaren Farben vor einem Hintergrund gleich aussehen: Eine Alpha-Änderung ändert ihr zusammengesetztes Erscheinungsbild.

<svg xmlns="http://www.w3.org/2000/svg" width="320" height="240" viewBox="0 0 320 240">
<defs><filter id="alpha" filterUnits="userSpaceOnUse"
  x="0" y="0" width="320" height="240">
  <feComponentTransfer in="SourceGraphic">
    <feFuncA type="discrete" tableValues="0 1"/>
  </feComponentTransfer>
</filter></defs>
<image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAADwCAYAAABxLb1rAAAJ6ElEQVR4nO3UVexsZxXG4eLBnRXcIVD3tKey66krENwhuEPQHjTFneAOwR2CM2hw6ql7m3rx4If3kgsCf+ierpk9z5c89+/6Ln4b1bphI4BV1D4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPWKOrxdXjGnHNuFZcO64T143rxfXjBnHDuFHcOG4SN42bxc3jFnHLuFVU3DpuE7eN28Xt4w5xx7hT3DnuEneNu8Xd4x5xz7hX3Ds2jk1i09gsNo8tYsvYKraObWLb2C62jx1ix1gXO8XOsUvsGkPsFrvHHrFn7BV7xz6xb+wX+8cBcWAcFAfHIXFoHBaHxxFxn7hv3C/uHw+IB8aD4sHxkHhoPCweHo+IR8aj4tHxmHhsPC4eH0+IJ8aT4snxlHhqPC2eHs+IZ8az4tnxnHhuPC+eHy+IF8aL4shYHy+Ol8RL42Xx8nhFHBWvjFfFq+M18dp4Xbw+3hBvjDfFm+Mt8dZ4W7w93hHvjHfFu+M98d54X7w/PhAfjA/Fh+Mj8dH4WHw8PhGfjE/Fp+Mz8dn4XHw+vhBfjC/Fl+Mr8dX4Wnw9vhHfjG/Ft+M7MYvvxvfi+/GD+GH8KH4cP4mfxs/i5/GL+GX8Ko6OY+LYOC6OjxPixDgpTo5T4tQ4LU6PM+LMOCvOjnPi3Dgvzo8L4sK4KC6OS+LSuCwujyvi1/Gb+G38Ln4ff4g/xp/iz/GX+Gv8Lf4e/4gN1d8OASwBFEABFEABFMASQAEUQAEsARRAARTA7gFrJIACKIACKIAlgAIogAIogAJYAiiAAiiAJYACKIACKIACWAIogAIogCWAAiiAAiiAAlgCKIACKIAlgAIogAIogAJYAiiAAiiAJYACKIACuOAEUAAFUAAFsARQAAVQAAVQAEsABVAABbAEUAAFUAAFUABLAAVQAAWwBFAABVAABVAASwAnEcANTa8EsJ0ACqAACqAAlgAKoAAKoAAKYAmgAAqgAJYACqAACqAACmAJoAAKoACWAAqgAAqgAApgCaAACqAAlgAKoAAKoAAKYAmgAAqgAJYACqAACuCCE0ABFEABFMASQAEUQAEUQAEsARRAARTAEkABFEABFEABLAEUQAEUwBJAARRAARRAASwBFEABFMASQAEUQAEUQAEsARRAARTAuvIB7P6b/0YABVAABVAASwAFUAAFsARQAAVQAAVQAEsABVAAF54ACqAACqAAlgAKoAAKoAAK4BoJoAAKoAAKYAmgAAqgAJYACqAACqAACmAJoAAK4MITQAFc+QDG0XFMHBvHxfFxQpwYJ8XJcUqcGqfF6XFGnBlnxdlxTpwb58X5cUFcGBfFxXFJXBqXxeVxRQlgOwEUQAEUQAEsARRAARRAARTANRJAARRAARTAEkABFEABLAEUQAEUQAEUwBJAARTAhSeAAiiAAiiAJYACKIACKIACuEYCKIACKIACWAIogAIogCWAAiiAAiiAAlgCKIACuPAEUAAFUAAFsARQAAVQAAVQANdIAAVQAAVQAEsABVAABbAEUAAFUAAFUABLAAVQABeeAAqgAAqgAJYACqAACqAACuAaCaAACqAACmAJoAAKoACWAAqgAAqgAApgCaAACuDCE0ABFEABFMASQAEUQAEUQAFcIwEUQAEUQAEsARRAARTAEkABFEABFMBRArhxbBKbxmaxeWwRW8ZWsXVsE9vGdrF97BA7xrrYKXaOXWLXGGK32D32iD1jr9g79ol9Y7/YPw6IA+OgODgOiUPjsDg8jigBFEABFMASQAEUQAEUQAEsARRAARTAEkABFEABXAICKIACKIACWAIogAIogAIogCWAAiiAAlgCKIACKIACKIAlgAIogAJYAiiAAiiAAiiAJYACKIACWAIogAIogAIogCWAAiiAAlgCKIACKIALTgAFUAAFUABLAAVQAAVQAAWwBFAABVAASwAFUAAFUAAFsARQAAVQAEsABVAABVAABbAEUAAFUABLAAVQAAVQAAWwBFAABVAASwAFUAAFcMEJoAAKoAAKYAmgAAqgAAqgAJYACqAACmAJoAAKoAAKoACWAAqgAApgCaAACqAACqAAlgAKoAAKYAmgAAqgAAqgAJYACqAACmAJoAAKoAAuOAEUQAEUQAEsARRAARRAARTAEkABFEABLAEUQAEUQAEUwBJAARRAASwBFEABFMCJBJDFssgB7P4blkj7AJaSADIJ7QNYWosYwO4/Ycm0D2CpLVIAu/+CJdQ+gKUmgCy19gEsvUUIYPcfsKTaBzAJnQHsvp0l1j6ASRBAllL7ACajI4DdN7Pk2gcwKVdlALtvZQLaBzApAshSaR/A5FwVAey+kYloH8AkzTOA3bcxIe0DmCQBZCm0D2Cy5hHA7puYmPYBTNqYAey+hQlqH8CkCSALrX0AkzdGALtvYKLaB7ASrkwAu7czYe0DWAkCyEJqH8DK+H8C2L2ZiWsfwEr5XwLYvZUV0D6AlSKALJT2AayctQSweyMron0AK+k/BbB7GyukfQArSQBZCO0DWFn/LoDdm1gx7QNYaf8awO4trKD2Aaw0AaRV+wBW3voF2MCKah8A0KV9AECX9gEAXdoHAHRpHwDQpX0AQJf2AQBd2gcAdGkfANClfQBAl/YBC2xoMvYdRzYZ+471Tca+Y9Zk7Ds2NBn1jrE/ZUqGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEcOKGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEcOKGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEEGCZtQ8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKDLPwG8PYVZS9xMPAAAAABJRU5ErkJggg==" width="320" height="240" filter="url(#alpha)"/>
</svg>

Die vollständige Testdatei erhält die PNG-Bytes. Der Filter färbt die gespeicherte Quelldatei nicht um und ersetzt sie nicht durch Pfade. Die Diagnose eingebetteter Rasterbilder erklärt, warum die äußere Dateiendung .svg keine Vektorgeometrie belegt.

Unterscheide eine Stufe von einer interpolierten Tabelle

Beide Übertragungstypen verwenden tableValues, interpretieren die Einträge aber unterschiedlich. Die type-Referenz listet die verfügbaren Übertragungsfunktionen auf; die tableValues-Referenz beschreibt die Nachschlageliste.

Bei discrete belegt jeder Eintrag ein gleich großes Eingabeintervall. Mit den beiden Einträgen 0 1 lautet das erste Intervall 0 ≤ A < 0.5, das zweite 0.5 ≤ A ≤ 1. Die Ausgabe springt zwischen den beiden Werten.

Bei table bilden die Einträge die Endpunkte linearer Interpolationsbereiche. Mit 0 1 bildet die Interpolation jedes Eingabe-Alpha wieder auf sich selbst ab. Es handelt sich um eine Identitätsabbildung; deshalb stimmt unsere gemessene table-Spalte mit der ungefilterten Spalte überein.

Die Intervallformeln der Spezifikation erklären auch diese dokumentierten Alternativen:

Unser Screenshot prüft die Fälle discrete und table mit jeweils zwei Einträgen. Die Zeilen mit vier Einträgen beschreiben die Abbildungen der Spezifikation; sie sind keine zusätzlich gemessenen Grafikvarianten. Wähle type bewusst, statt anzunehmen, eine Liste aus Nullen und Einsen müsse einen binären Schwellenwert erzeugen.

Halte das Eingabe-Alpha von späterer Deckkraft getrennt

Gib dem Filter das tatsächliche Alpha der Quelle. In unserer Testdatei ist dieses Alpha in den PNG-Pixeln gespeichert. Für einen Vektortest verwendest du vor dem Filter das Alpha einer Füllung oder fill-opacity.

Das Kompositionsmodell von Filter Effects wendet Filter vor der Deckkraft an. Eine allgemeine Deckkraft auf dem Element oder einer umgebenden Gruppe kann deshalb das gerenderte Ergebnis nach dem Filter abschwächen. Wenn du die Quelle mit einem Schwellenwert bearbeitest und das Ergebnis anschließend mit geringerer Deckkraft zusammensetzt, kann es wieder durchscheinend wirken. Lass diese spätere Deckkraft bei einem kontrollierten Schwellenwerttest weg.

Eine harte Grenze verwirft außerdem den halbtransparenten Übergang der Quelle. Blasse Pixel verschwinden, erhaltene durchscheinende Pixel werden vollständig deckend. Das kann ein weiches Leuchten oder eine dünne Kante entfernen, die du behalten wolltest. Prüfe das Ergebnis in der vorgesehenen Größe und vor mehreren Hintergründen. Binäres Ausgabe-Alpha garantiert nicht, dass die endgültig dargestellte Kante frei von Abtastungs- oder Kompositionseffekten ist.

Wenn Durchscheinbarkeit zum Design gehört, behalte sie oder verwende eine allmähliche Übertragung statt einer erzwungenen Grenze. Für eine bewusst monochrome Sichtbarkeitsmaske behandelt der Leitfaden zu SVG-CSS-Masken einen anderen Darstellungsablauf.

Deckendes Weiß braucht eine andere Diagnose

Die weiße Fläche bleibt erhalten, weil ihr Alpha vollständig deckend ist. Diese Operation wählt nach Alpha aus, nicht danach, ob ein Pixel weiß aussieht. Vollständig deckende Hintergrundpixel werden unter dieser diskreten 0 1-Abbildung nicht transparent.

Wenn die Datei einen unerwünschten weißen Hintergrund enthält, kläre zuerst, ob er eine separate SVG-Form oder Teil eines Rasterbildes ist. Lösche oder bearbeite eine unerwünschte Vektor-Hintergrundform direkt. Bei einem PNG, dessen Pixel bereits Weiß enthalten, bereinigst du die Rasterquelle vor der Rekonstruktion oder verwendest einen geeigneten Ablauf zur Hintergrundentfernung. Der Leitfaden zu SVG mit transparentem Hintergrund erklärt diese Fälle.

Denke an tatsächlich weiße Teile des Motivs, bevor du einen Hintergrund anhand seiner Farbe entfernst. Dieser Alpha-Filter kann nicht erkennen, welcher weiße Bereich Hintergrund ist und welcher zur Grafik gehört. Ebenso wenig kann er Farbinformationen wiederherstellen, die beim Reduzieren der Quelle verloren gingen.

Bereite vor der Vektorrekonstruktion ein transparentes Rasterbild vor

PerfectVector kann helfen, wenn das fertige Design nur als Rasterbild vorliegt und du SVG-Geometrie brauchst. Bereite zuerst ein PNG mit echter Transparenz vor und konvertiere das PNG dann in SVG. Vergleiche die Vorschau vor einem kontrastierenden Hintergrund, prüfe Silhouette und Öffnungen und kontrolliere die heruntergeladene Datei auf unerwünschte Hintergrundgeometrie.

Unser Filterbeispiel ist ein Darstellungsexperiment. Es reicht kein gefiltertes SVG zur Vektorisierung ein und zeigt kein neues nachgezeichnetes Ergebnis. Wenn du das Erscheinungsbild eines Rasterbildes mit Schwellenwert erhalten musst, erstelle und prüfe in deinem Editor eine tatsächliche Raster-Ausgabekopie, bevor du eine Vektorrekonstruktion erwägst. Prüfe das Alpha dieser Kopie, statt dich auf die Browser-Vorschau zu verlassen.

Verwende eine vorhandene Vektor-Masterdatei direkt. Behalte Halbtransparenz, wenn sie nützliche Designinformationen trägt, und zeichne ein einfaches Symbol neu, wenn es sich so leichter pflegen lässt. Der Überblick zur Bildvektorisierung unterscheidet die Rasterrekonstruktion vom Ändern der Darstellung eines vorhandenen SVG.

FAQ

Welche Alpha-Grenze verwendet discrete tableValues 0 1? Eingabe-Alpha unter 0.5 wird auf 0 abgebildet; ab 0.5 wird es auf 1 abgebildet. Bei den getesteten 8-Bit-PNG-Farbfeldern wird Byte 127 transparent und Byte 128 deckend.

Warum lässt tableValues 0 1 meine Transparenz unverändert? Mit type table definieren diese Einträge eine lineare Interpolation von 0 bis 1, also eine Identitätsabbildung. Verwende type discrete für die hier gezeigte Abbildung mit zwei Stufen.

Entfernt das Weiß oder verwandelt es ein PNG in Vektorpfade? Nein. Vollständig deckendes Weiß passiert diese Alpha-Grenze. Unsere SVG-Varianten enthalten weiterhin dasselbe PNG in einem einzelnen Bildelement und keinen einzigen Pfad; Hintergrundbereinigung und Vektorrekonstruktion sind separate Aufgaben.

Quellen

1. W3C — Filter Effects Level 1 — Definiert Identitätsabbildungen als Standard, die Übertragung nicht vormultiplizierter Kanäle und Intervallformeln für table/discrete.
2. MDN — feComponentTransfer — Erklärt die Kanalneuzuordnung durch das Filterprimitiv.
3. MDN — feFuncA — Beschreibt die Übertragungsfunktion des Alpha-Kanals.
4. MDN — type — Listet die Typen der component-transfer-Funktionen und ihren Attributkontext auf.
5. MDN — tableValues — Beschreibt die Nachschlageeinträge der Übertragung mit table und discrete.

Brauchst du Vektorgeometrie aus einem Rasterdesign? Bereite ein transparentes PNG vor und konvertiere es. Prüfe dann Silhouette und Löcher in der Vorschau und kontrolliere das heruntergeladene SVG vor einem farbigen Hintergrund.