SVG-clipPath oder Maske: Harte Kanten oder weiche Übergänge

Verwende einen SVG-<clipPath>, wenn ein Bild an einer definierten Kontur enden soll. Verwende eine SVG-<mask>, wenn das Bild durch teilweise Transparenz ausgeblendet werden soll. Eine Maske kann auch eine harte Begrenzung erzeugen, aber ein Beschneidungspfad drückt die einfachere Absicht einer harten geometrischen Kante aus. Die CSS-Masking-Spezifikation definiert diese als separate Sichtbarkeitsoperationen.

Die Wahl ist wichtig, wenn ein Bild in Logoform in einen anderen Editor übernommen werden soll. Beide Methoden steuern, was du siehst; keine verwandelt verborgene Pixel in gelöschte Geometrie oder konvertiert das Bild in Vektorpfade. Dieser Leitfaden verwendet eine eigene Rasterszene und eine Kontur und ändert dann nur die Sichtbarkeitsregel. Du kannst denselben Test vor dem Export auf deine Grafik anwenden.

Nach der benötigten Kante wählen

Die sichtbare Kante einer Beschneidung kann weiterhin normales Antialiasing der Darstellung aufweisen. Sie kann aber keinen bewusst erzeugten Bereich teilweiser Sichtbarkeit durch einen Graustufen- oder Deckkraftverlauf innerhalb der beschnittenen Form ausdrücken. Das MDN-Tutorial zu Beschneidung und Maskierung zeigt diesen Unterschied anhand kleiner SVG-Beispiele.

Ein Bild unter drei Sichtbarkeitsregeln vergleichen

Für diesen Test habe ich eine kleine Landschaft gezeichnet, als 400 × 240 großes PNG gerastert und in jedem Feld dieselben Pixel unter derselben blattähnlichen Kontur platziert. Das linke Feld beschneidet auf diese Kontur. Das mittlere verwendet eine Weiß-zu-Schwarz-Luminanzmaske; das rechte eine Alpha-Maske von deckend zu transparent. Beide Verläufe wurden so gewählt, dass sie dieselbe Ausblendung von links nach rechts erzeugen. Jedes Ergebnis erscheint auf hellen und dunklen Hintergründen, wodurch sich die verschwindende Kante leichter beurteilen lässt.

Die beiden Maskenspalten sehen hier aus einem bestimmten Grund ähnlich aus: Der Weiß-zu-Schwarz-Luminanzverlauf und der weiße Deckkraftverlauf kodieren vergleichbare Maskenwerte. Sie sind keine austauschbaren Eingaben. Deckendes Schwarz verbirgt bei einer Luminanzmaske, während es bei einer Alpha-Maske sichtbar bleibt. Im Alpha-Modus bestimmt die Deckkraft des Pixels das Ergebnis, nicht seine schwarze oder weiße Farbe. Die Definition der Maskenverarbeitung in CSS Masking legt beide Berechnungen fest.

Beschneidung und Maske aus einer Kontur erstellen

Speichere Folgendes als clip-or-mask.svg, lege dein eigenes photo.png daneben und stelle beide Dateien aus demselben Ordner über HTTP bereit. Die zwei Bilder verwenden ein Koordinatensystem von 400 × 240. Sie unterscheiden sich nur durch clip-path gegenüber mask.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 840 280">
  <defs>
    <path id="motif"
      d="M30 175 C65 82 140 28 232 41 C290 44 304 75 374 39
         C361 122 310 196 236 219 C139 246 75 217 30 175 Z" />
 
    <clipPath id="hard" clipPathUnits="userSpaceOnUse">
      <use href="#motif" />
    </clipPath>
 
    <linearGradient id="fade" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="white" stop-opacity="1" />
      <stop offset=".45" stop-color="white" stop-opacity="1" />
      <stop offset="1" stop-color="white" stop-opacity="0" />
    </linearGradient>
    <mask id="soft" mask-type="alpha" maskUnits="userSpaceOnUse"
      maskContentUnits="userSpaceOnUse" x="0" y="0" width="400" height="240">
      <use href="#motif" fill="url(#fade)" />
    </mask>
  </defs>
 
  <g transform="translate(20 20)">
    <image href="photo.png" width="400" height="240"
      clip-path="url(#hard)" />
  </g>
  <g transform="translate(440 20)">
    <image href="photo.png" width="400" height="240"
      mask="url(#soft)" />
  </g>
</svg>

Die Referenz-IDs müssen innerhalb des SVG eindeutig sein. Beschneidung und Maske verwenden beide userSpaceOnUse, damit die Motivkoordinaten zum lokalen 400 × 240 großen Bereich jedes Bilds passen. Die MDN-Referenz zu <clipPath> beschreibt die Beschneidung als Einschränkung der Darstellung, ohne die eigentliche Geometrie des Ziels zu verändern. Die MDN-Referenz zu <mask> unterscheidet maskUnits, das den Maskenbereich positioniert, von maskContentUnits, das ihre Grafik positioniert.

Um stattdessen Luminanz zu testen, dupliziere die Maske mit einer anderen ID, setze mask-type="luminance" und ändere die Verlaufsstopps zu deckendem Weiß am Anfang und deckendem Schwarz am Ende. Halte die mask-Referenz mit dieser neuen ID synchron. Standardmäßig verwendet eine SVG-<mask> Luminanz; dieses Beispiel benennt den Modus, damit eine spätere Änderung die Bedeutung von Schwarz nicht unbemerkt verändert. Siehe MDNs mask-type-Referenz.

Das Ergebnis vor dem Export prüfen

1. Rendere das SVG sowohl auf einem hellen als auch auf einem dunklen Hintergrund. Eine auf Weiß scheinbar unsichtbare Ausblendung kann auf Dunkel deutlich erkennbar sein.
2. Bestätige, dass Bild und Motiv dieselben Koordinaten verwenden. Wenn du nur das Bild skalierst, stimmt die Kontur möglicherweise nicht mehr. Für wiederverwendbare Beschneidungen unterschiedlich großer Ziele erklärt der Leitfaden zu clipPath-Einheiten die Koordinatenoptionen.
3. Wenn eine weiche Kante abrupt endet, prüfe neben dem Verlauf auch x, y, width und height der Maske. Der Maskenbereich kann Grafik außerhalb seiner Grenzen abschneiden; den Verlauf allein zu verbreitern behebt keinen zu schmalen Bereich. MDN nennt die Standardwerte des Maskenbereichs, aber ausdrückliche Begrenzungen sind in einer Übergabedatei leichter zu prüfen.
4. Öffne das gespeicherte SVG erneut in der Anwendung, die es verwenden soll. Eine korrekte Browserdarstellung belegt nicht, dass ein anderer Importer die benötigte Beschneidung, Maske, verknüpfte Bilddatei oder Bearbeitbarkeit erhält.
5. Prüfe die Dateistruktur. Enthält sie weiterhin <image>, enthält sie weiterhin Rasterpixel, auch wenn die Beschneidungskontur ein Vektor ist. Die Prüfung eingebetteter Rasterbilder zeigt, wie du diesen Unterschied erkennst.

Das Bild in diesem Beispiel bleibt ein PNG. Beschneidung und Maskierung zeichnen es nicht nach. Wenn dein Auftrag echte Schneidgeometrie oder eine dauerhafte transparente Aussparung erfordert, erstelle die entsprechenden Pfade in deinem Editor und prüfe den Export. Der Leitfaden zu unerwünscht gefüllten Aussparungen hilft, eine echte Aussparung von einem weißen Fleck zu unterscheiden, der auf einer weißen Zeichenfläche nur leer aussieht.

Wo PerfectVector hilft

Wenn die benötigte Kontur nur in einem PNG- oder JPG-Logo erhalten ist, kann PerfectVectors Bild-zu-Vektor-Ablauf einen bearbeitbaren SVG-Kandidaten liefern. Prüfe seinen äußeren Pfad, kleine Zwischenräume und unerwünschte Hintergrundformen, bevor du eine Kontur in einen <clipPath> oder eine <mask> kopierst. Du wählst weiterhin selbst die Sichtbarkeitsmethode und baust den Effekt in einem SVG-Editor auf. Behalte eine vorhandene saubere Vektorvorlage, wenn eine verfügbar ist.

Du musst ein Foto nicht vektorisieren, nur um es hinter eine Maske zu setzen. Behalte fotografische Pixel als Bild, wenn ihre Details wichtig sind. Für ein einfarbiges, durch CSS gesteuertes Icon statt eines Bilds innerhalb eines SVG behandelt der Leitfaden zu SVG-CSS-Masken diesen separaten Ablauf.

FAQ

Kann ein SVG-clipPath eine allmähliche Ausblendung erzeugen? Nein. Ein Beschneidungspfad definiert, welche Teile des Ziels sichtbar sind, abgesehen vom normalen Antialiasing an seiner Grenze. Verwende für eine beabsichtigte Ausblendung eine Maske mit Zwischenwerten bei Deckkraft oder Luminanz.

Verbirgt Schwarz in jeder SVG-Maske ein Bild? Nein. Deckendes Schwarz verbirgt das Bild bei Luminanzmaskierung, macht es bei Alpha-Maskierung aber sichtbar, weil das Pixel weiterhin deckend ist. Vollständig transparente Maskengrafik verbirgt das Bild in beiden Modi.

Machen Beschneidung oder Maskierung aus einem PNG eine Vektorgrafik? Nein. Beide verändern die Sichtbarkeit zur Darstellungszeit. Ein SVG kann weiterhin ein Raster-<image> enthalten und für eine reine Vektorübergabe separates Nachzeichnen oder Pfadbearbeiten benötigen.

Quellen

1. W3C — CSS Masking Module Level 1 — Definitionen von Beschneidung, Maskierung sowie Alpha- gegenüber Luminanzmaskenwerten.
2. MDN — Beschneidung und Maskierung — Beispiele für harte Beschneidung und weiche Masken.
3. MDN — <clipPath> — Beschneidungsverhalten, Koordinatenwahl und unveränderte zugrunde liegende Geometrie.
4. MDN — <mask> — Maskenbereich, Inhaltskoordinatensystem und Referenzverhalten.
5. MDN — mask-type — Alpha- und Luminanzinterpretation von SVG-Maskengrafik.

Wenn ein Rasterlogo zuerst bearbeitbare Konturen benötigt, erstelle einen SVG-Kandidaten mit PerfectVector, prüfe den rekonstruierten Pfad, wende dann eine Beschneidung oder Maske an und öffne die exportierte Datei erneut in ihrer Zielanwendung.