SVG als CSS-Maske: Silhouette und Farbe steuern

Eine SVG-CSS-Maske bestimmt, welche Teile eines Elements sichtbar bleiben. Verwende für ein einfarbiges Icon die Silhouette des SVGs als Maske und färbe das Element mit background-color: currentColor. Das Icon erhält seine sichtbare Farbe dann aus CSS, statt die ursprüngliche Farbpalette des SVGs anzuzeigen.

Beginne mit der Transparenz der Quelle. Ein deckendes Rechteck hinter der Grafik kann aus dem gewünschten Icon einen massiven Block machen. Eine transparente Öffnung muss transparent bleiben, wenn die darunterliegende Seite hindurchscheinen soll.

MDNs Referenz zu mask-image beschreibt, wie Quellbild und Maskierungsmodus die Sichtbarkeit bestimmen. Praktisch geht es darum, eine brauchbare Silhouette vorzubereiten, ihre Interpretation festzulegen und sie in der Größe deiner Benutzeroberfläche zu prüfen.

Verwende eine Maske für eine einheitlich gefärbte Silhouette

Stell dir ein Lesezeichen-Icon mit einer rautenförmigen Öffnung und einem kleinen korallenfarbenen Streifen vor. Als normales SVG-Bild hat es zwei Farben. Als Alphamaske über einem blauen Element lässt die deckende Grafik Blau durch; der korallenfarbene Streifen erscheint nicht mehr als separate Farbe.

Das ist für ein anpassbar gefärbtes Oberflächen-Icon nützlich. Für eine Illustration, deren Farbunterschiede Bedeutung tragen, wäre es eine schlechte Ausgabeentscheidung.

Wenn du einzelne SVG-Füllungen und Konturen bearbeiten musst, nutze den Leitfaden zur SVG-Farbbearbeitung. Maskierung eignet sich, wenn die Silhouette selbst der wiederverwendbare Teil ist. Für eine harte geometrische Grenze kannst du einen eigenen SVG-Clip an sein Ziel anpassen und zwischen gestreckter Silhouette und erhaltenen Proportionen wählen.

Bereite eine kleine Quelle mit echter Öffnung vor

Speichere dieses eigene Beispiel als bookmark.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path fill="#087f8c" fill-rule="evenodd"
    d="M5 3H19V21L12 17L5 21Z M12 6L15 9L12 12L9 9Z"/>
  <rect x="9" y="13" width="6" height="2" fill="#e76f51"/>
</svg>

Der erste Pfad enthält das äußere Lesezeichen und seine Rautenöffnung. Es gibt kein Hintergrundrechteck in voller Größe. Das kleine zweite Rechteck ist der korallenfarbene Streifen.

Öffne das SVG über einem kontrastierenden Hintergrund, bevor du es als Maske verwendest. Prüfe, dass du durch die Raute und um die äußere Begrenzung hindurchsehen kannst. Eine weiße Raute über einem deckenden Lesezeichen sähe auf einer weißen Seite ähnlich aus, wäre in einer Alphamaske aber weiterhin deckend.

Prüfe bei einem bestehenden Asset sowohl Hintergrundformen als auch das sichtbare Motiv. Der Leitfaden zum transparenten SVG-Hintergrund erklärt den Unterschied zwischen leerem Raum und einem weißen Rechteck.

Färbe das Icon-Element mit CSS

Lege icon.css neben das SVG und verwende diese Regeln:

.bookmark-icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: currentColor;
  mask-image: url("./bookmark.svg");
  mask-mode: alpha;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.save-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #175cd3;
}

Verwende eine sichtbare Beschriftung auf dem Button:

<button class="save-button" type="button">
  <span class="bookmark-icon" aria-hidden="true"></span>
  Save article
</button>

Hier begleitet das Icon „Save article“ („Artikel speichern“). Daher wird es aus dem Accessibility Tree ausgeblendet, statt diese Beschriftung zu wiederholen. Das Beispiel zeigt nur die Darstellung; verbinde den Button separat mit der Speicheraktion deiner Anwendung.

Das Element benötigt eine Fläche zum Färben. Deshalb setzt das CSS Breite, Höhe und Darstellungsart. currentColor verwendet seine Textfarbe. Wenn du color des Buttons änderst, ändert sich die Iconfarbe, ohne bookmark.svg neu zu schreiben.

Die Referenz zu mask-size definiert contain als Einpassen des gesamten Maskenbildes unter Erhalt seiner Proportionen. Zusammen mit Zentrierung und deaktivierter Wiederholung belegt die Quelle damit eine vorhersehbare Iconfläche. Der Maskierungsleitfaden von web.dev behandelt diese Größen- und Wiederholungssteuerungen.

Stelle das Beispiel über HTTP bereit, auch bei lokalen Tests. MDNs Beschreibung von mask-image warnt, dass lokale Bildquellen über file:// für diese Verwendung nicht akzeptiert werden. Ein fehlendes oder nicht geladenes Maskenbild kann das maskierte Element unsichtbar lassen.

Unterscheide SVG-Bild und SVG-Maskenelement

Eine als Bild verwendete SVG-Datei und eine Referenz auf ein SVG-<mask>-Element sind unterschiedliche Eingaben. Wähle den Modus nicht allein deshalb, weil der Dateiname auf .svg endet.

Die Referenz zu mask-mode legt diesen quellenabhängigen Standard fest. Bei Alpha-Interpretation lassen deckendes Schwarz und deckendes Weiß das Element gleichermaßen sichtbar werden. Bei Luminanz-Interpretation macht deckendes Weiß es sichtbar und Schwarz verbirgt es; Zwischenwerte können teilweise Sichtbarkeit erzeugen.

mask-type gilt für ein SVG-<mask>-Element und verwendet standardmäßig Luminanz, wie die Referenz zu mask-type erklärt. Diese Eigenschaft am normalen Icon-Span zu setzen, ändert nicht die Interpretation einer Bildmaske. Verwende mask-mode am maskierten Element, wenn du dieses Verhalten festlegen musst.

Das Lesezeichenbeispiel verwendet ein normales externes SVG-Bild und wählt ausdrücklich Alpha. Teste die verwendeten Eigenschaften in deinen unterstützten Browsern; Unterstützung für Maskierung im Allgemeinen belegt nicht die Unterstützung jeder Kombination aus Modus und Quelle.

Diagnostiziere Quadrat, fehlendes Icon oder gefüllte Öffnung

Ein sinnvoller Negativtest besteht darin, hinter eine Kopie von bookmark.svg ein deckendes weißes Rechteck in voller Größe zu setzen. Bei Alpha-Interpretation lässt diese Kopie die gesamte Maskenfläche sichtbar werden. Das Rechteck von Weiß auf Schwarz umzustellen, stellt die Silhouette nicht wieder her, weil beide Farben deckend bleiben.

Entferne den unerwünschten Hintergrund aus der Quelle, statt die Elementfarbe anzupassen. Behalte die Originaldatei, damit du die korrigierte Kopie vergleichen kannst.

Halte diese Prüfungen auseinander. Eine erfolgreiche Bildanfrage beweist nicht die richtige Transparenz der Quelle. Richtige Transparenz wiederum gibt einem Element keine fehlende Breite oder Höhe.

Beurteile das Ergebnis in Komponentengröße

Vergrößere das Lesezeichen, um seine Konturen zu prüfen, und kehre dann zur tatsächlichen Oberflächengröße zurück. Prüfe die Rautenöffnung, die untere Einkerbung und den Abstand zwischen Icon und Beschriftung. Die vergrößerte Version hilft bei der Fehlersuche; die kleine zeigt, ob das Design brauchbar ist.

Probiere zwei kontrastierende Seitenhintergründe und zwei Iconfarben aus. Die Öffnung sollte jeweils die Seitenfarbe zeigen. Bleibt sie weiß, prüfe erneut die Quellstruktur.

Vergleiche bei einer Iconfamilie benachbarte Symbole in derselben CSS-Größe. Ihre viewBoxes können unterschiedlich viel Leerraum enthalten, wodurch gleich große Flächen uneinheitlich wirken. Der Leitfaden zur Iconvorbereitung für UI-Kits behandelt diese Abstimmung.

Stelle eine Rastersilhouette nur bei Bedarf wieder her

Ein transparentes PNG kann bereits eine CSS-Maske sein; SVG-Konvertierung ist keine Voraussetzung für Maskierung. Behalte eine vorhandene saubere Vektorquelle, wenn du eine hast.

Wenn ein nützliches Icon nur als grobes Rasterbild erhalten ist, kann PerfectVectors PNG-zu-SVG-Workflow helfen, einen bearbeitbaren Kandidaten vorzubereiten. Schneide auf das Motiv zu, prüfe die Vektorvorschau auf Hintergrundflächen und verlorene Öffnungen und lade dann das SVG herunter. Verwende diese Datei in der Maske und wiederhole die Prüfungen in Komponentengröße.

Beurteile beim Lesezeichen die äußere Einkerbung und die Rautenöffnung, bevor du dich um den ursprünglichen korallenfarbenen Streifen kümmerst. Die einheitliche Maskenfarbe übernimmt ohnehin auch diesen Streifen. Eine komplexe mehrfarbige Illustration benötigt möglicherweise eine andere Behandlung; wähle die Silhouette bewusst, statt jedes Detail nachzuzeichnen.

Die Übersicht zur Bildvektorisierung erklärt die Quellenwiederherstellung allgemeiner. Eine Vektordatei braucht für diesen CSS-Workflow weiterhin eine brauchbare Form und passende Transparenz.

FAQ

Erhält eine SVG-Maske die ursprünglichen Farben? Eine Maske steuert Sichtbarkeit. Im Beispiel mit einheitlichem Hintergrund liefert das Element eine Farbe, daher bleiben die separaten Quellfarben nicht erhalten.

Warum wird mein Icon zu einem ausgefüllten Quadrat? Prüfe die Maskenquelle auf einen deckenden Hintergrund in voller Größe. Bei Alpha-Interpretation lassen deckendes Weiß und Schwarz das Element gleichermaßen sichtbar werden.

Sind SVG-Masken immer Luminanzmasken? Nein. Ein normales SVG-Bild verwendet unter match-source üblicherweise Alpha. Ein SVG-Maskenelement verwendet standardmäßig Luminanz, sofern seine Interpretation nicht geändert wird.

Muss ich ein transparentes PNG in SVG umwandeln? Nein. Ein PNG kann als Maskenbild dienen. Vektorisierung ist optional, wenn du eine passende Silhouette aus einer Rasterquelle wiederherstellen oder bearbeiten musst.

Quellen

1. MDN — mask-image — Bildquellen, fehlgeschlagenes Laden, Anforderungen an lokale Server und Sichtbarkeit.
2. MDN — mask-mode — Alpha, Luminanz und quellenabhängige Standards.
3. MDN — mask-type — Interpretation eines SVG-Maskenelements.
4. MDN — mask-size — Einpassen mit contain und Bildproportionen.
5. web.dev — Effekte mit CSS mask-image auf Bilder anwenden — Bildmasken, Größen und Wiederholung.

Beginne mit einem Icon und prüfe Silhouette, Öffnung und endgültige UI-Größe. Wenn eine Rasterquelle wiederhergestellt werden muss, bereite einen SVG-Kandidaten vor, prüfe seine Transparenz und teste ihn mit der CSS-Farbe deiner Oberfläche.