SVG feMorphology: Konturen ohne neue Pfade

Um die gesamte Silhouette eines mehrfarbigen SVGs zu umranden, erweitere dessen SourceAlpha, entferne das ursprüngliche Alpha aus diesem größeren Ergebnis, färbe den verbleibenden Ring und lege die Originalgrafik darüber. Der Filter verändert die Darstellung, während die ursprünglichen Pfaddaten erhalten bleiben.

Verwende operator="erode", wenn du stattdessen eine kleinere Alpha-Silhouette möchtest. Keine der beiden Operationen erzeugt einen bearbeitbaren Offset-Pfad. Löcher, schmale Zwischenräume und spitze Ecken solltest du visuell prüfen, weil die Morphologie eine rechteckige Umgebung statt eines kreisförmigen Konturversatzes verwendet.

Beginne mit der Silhouette statt mit den Farbkanälen

Die W3C-Spezifikation für Filtereffekte definiert Dilatation als komponentenweises Maximum innerhalb einer rechteckigen Umgebung und Erosion als Minimum. Bei SourceAlpha dient der Alphakanal der Grafik als Eingabe. So können wir eine Silhouette ableiten, ohne die blaugrünen und korallenfarbenen Farbkanäle getrennt zu erweitern.

Dieses Beispiel wendet den Filter auf die gesamte Grafik aus zwei Pfaden an. Ihr transparentes quadratisches Loch gehört zur Alpha-Silhouette. Der korallenfarbene Einsatz liegt bereits innerhalb einer deckenden blaugrünen Fläche und erzeugt deshalb keine separate äußere Begrenzung.

Wir haben das SVG von Hand erstellt und fünf eigenständige Varianten im Browser geöffnet. Jede Datei behält dieselben beiden ursprünglichen Pfaddefinitionen. Der folgende Vergleich zeigt die tatsächliche Darstellung dieser Dateien, ohne nachgezeichnete Grafik oder generierte Effektvorschau.

Bei Radius 10 wächst die Kontur über die sichtbare Silhouette hinaus und in das Loch hinein. Bei 22 füllt das Gold die quadratische Öffnung dieses Testmotivs. Die Variante 18 4 wächst horizontal stärker als vertikal. Die Erosion verkleinert die deckende Außenfläche und vergrößert die transparente Öffnung; auch die untere Spitze verändert sich.

Diese Beobachtungen gelten für diese Grafik und diese Einstellungen. Sie liefern keine allgemeine Regel für sichere Radien bei anderen Logos oder Icons.

Erzeuge den äußeren Alpha-Ring

Speichere dieses vollständige Beispiel als outline.svg und öffne es im Browser. Es ist genau das SVG mit Radius 10 aus der Aufnahme:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="220" viewBox="0 0 300 220">
<defs>
<g id="artwork">
  <path fill="#173b40" fill-rule="evenodd"
    d="M50 60H250V170H170L150 195L130 170H50Z M105 90H145V130H105Z"/>
  <path fill="#f28567" d="M175 90H220V140H175Z"/>
</g>
<filter id="outline" filterUnits="userSpaceOnUse"
  primitiveUnits="userSpaceOnUse" x="0" y="0" width="300" height="220">
  <feMorphology in="SourceAlpha" operator="dilate" radius="10" result="grown"/>
  <feComposite in="grown" in2="SourceAlpha" operator="out" result="ring"/>
  <feFlood flood-color="#e4b84c" result="paint"/>
  <feComposite in="paint" in2="ring" operator="in" result="coloredRing"/>
  <feMerge>
    <feMergeNode in="coloredRing"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>
</defs>
<use href="#artwork" filter="url(#outline)"/>
</svg>

Der Filter arbeitet in vier Schritten:

1. feMorphology erweitert SourceAlpha zu grown.
2. feComposite behält den Teil von grown außerhalb des ursprünglichen Alphas und erzeugt damit ring.
3. feFlood liefert die goldene Farbe; eine weitere Komposition begrenzt sie auf den Ring.
4. feMerge legt das ursprüngliche SourceGraphic über den gefärbten Ring.

Bei der Subtraktion ist die Reihenfolge der Eingaben entscheidend. Der Abschnitt zur Komposition in der Spezifikation weist in die Rolle der Quelle und in2 die des Ziels zu. Hier entfernen in="grown", in2="SourceAlpha" und operator="out" die ursprüngliche deckende Fläche aus dem erweiterten Alpha. Wenn du diese Eingaben vertauschst, entsteht dieser äußere Ring nicht.

Außerhalb bedeutet außerhalb des deckenden Alpha-Bereichs, einschließlich des Raums innerhalb eines transparenten Lochs. Soll eine Kontur innere Öffnungen aussparen, nimmt dieser Filter die Unterscheidung nicht automatisch vor. Du brauchst eine separate Silhouette oder eine andere Konstruktion, die den gewünschten Außenbereich definiert.

Die Quellfarben bleiben sichtbar, weil wir das unveränderte SourceGraphic zuletzt darüberlegen. Das unterscheidet sich von einer gewöhnlichen Pfadkontur. Für mittige, nach innen beschnittene oder nach außen maskierte Konturen lies SVG-Konturausrichtung; Zeichenreihenfolge erklärt den einfacheren Fall mit Kontur und Füllung.

Erodiere das Alpha und behalte die verbleibenden Farben

Ersetze den Konturfilter durch die folgende Definition und ändere das abschließende use-Element auf filter="url(#erode)":

<filter id="erode" filterUnits="userSpaceOnUse"
  primitiveUnits="userSpaceOnUse" x="0" y="0" width="300" height="220">
  <feMorphology in="SourceAlpha" operator="erode" radius="10" result="shrunken"/>
  <feComposite in="SourceGraphic" in2="shrunken" operator="in"/>
</filter>

Diese Komposition behält die ursprüngliche Grafik nur dort, wo das erodierte Alpha verbleibt. Sie legt nicht wieder das gesamte Original darüber, weil das die gewünschte Ausdünnung verdecken würde. In diesem Testmotiv wird die äußere blaugrüne Fläche kleiner, während die korallenfarbene Fläche darin erhalten bleibt.

Gib den Operator in praktischen Beispielen ausdrücklich an. Die Referenz zu operator unterscheidet erode und dilate bei feMorphology von in und out bei feComposite. Derselbe Attributname erfüllt bei den beiden Elementen unterschiedliche Aufgaben. Der Standardoperator der Morphologie ist erode. Wenn du ihn weglässt, erhältst du leicht den gegenteiligen Effekt zur beabsichtigten Dilatation.

Unterscheide Radiuseinheiten und Filterbereich

Die Referenz zu radius erlaubt eine oder zwei Zahlen. Eine Zahl gilt für beide Achsen; bei zwei Zahlen ist die erste der x-Radius und die zweite der y-Radius. Für die beiden zusätzlichen Konturvarianten ändere im vollständigen Beispiel nur radius="10" zu radius="22" oder radius="18 4".

Diese Radien beziehen sich auf das durch primitiveUnits gewählte Koordinatensystem. Sie versprechen keinen Rand mit gleichbleibender Breite in CSS-Pixeln bei jeder Darstellungsgröße. Wir verwenden ausdrücklich primitiveUnits="userSpaceOnUse" mit einer viewBox von 0 0 300 220. Wenn du die angezeigte SVG-Größe änderst, skaliert die Darstellung zusammen mit der Grafik.

Zwei ähnlich benannte Attribute steuern unterschiedliche Dinge:

MDNs Referenz zu primitiveUnits dokumentiert das Koordinatensystem der Primitive. Die Referenz zu filterUnits dokumentiert separat den äußeren Bereich. filterUnits verwendet standardmäßig objectBoundingBox; primitiveUnits verwendet standardmäßig userSpaceOnUse. Wenn du beide ausdrücklich setzt, lässt sich das Beispiel leichter nachvollziehen.

Die Quellgrafik reicht von x=50 bis 250 und von y=60 bis 195. Der größte getestete Radius mit gleichen Achsenwerten ist 22, und der Filterbereich sowie der Viewport von 300 mal 220 lassen dafür genügend Platz. Prüfe beide Begrenzungen erneut, wenn du die Grafik oder den Radius änderst. Die Spezifikation beschreibt den Filterbereich als harte Beschneidung: Ein größerer Radius kann nicht über diesen Bereich hinauszeichnen. Der Leitfaden zur Beschneidung durch SVG-Filter und Viewports demonstriert diese beiden separaten Grenzen.

Wenn der Filter scheinbar nicht wirkt, prüfe auch radius. Sein Standardwert ist 0. Laut Referenz deaktiviert ein negativer Wert oder null den Effekt des Primitivs. Die obigen Beispiele verwenden ausdrücklich positive Werte für beide Achsen.

Prüfe Löcher und Ecken vor der Weitergabe

Durch die rechteckige Umgebung sieht Morphologie anders aus als eine herkömmliche abgerundete Kontur. Gleiche x- und y-Radien machen diese Umgebung nicht kreisförmig. Die abgestufte untere Spitze im Vergleich eignet sich gut, um den Unterschied zu prüfen.

Wir haben geprüft, dass alle fünf Dateien weiterhin zwei Quellpfade mit identischen d-Attributen enthalten. Ihre Filterdefinitionen unterscheiden sich, ihre Quellgeometrie nicht. Prüfe die tatsächlichen SVG-Objekte, wenn dein Ziel Pfade benötigt, die du bearbeiten, versetzen oder für die Produktion verwenden kannst. Nutze dafür die Geometrieoperation eines Editors und prüfe anschließend die entstandenen Konturen. Das alleinige Ändern oder Entfernen dieses Filters erzeugt sie nicht.

Behalte ein ungefiltertes Original und eine separate Ausgabekopie. Öffne die gelieferte Datei in ihrem tatsächlichen Ziel und vergleiche Ecken, innere Öffnungen, Farben und Begrenzungen. Dieses Browserbeispiel belegt keine Unterstützung in einer bestimmten Design-App, einem Exporter oder einem Schneideprogramm.

Bereite die Quelle vor, bevor du den Effekt hinzufügst

PerfectVector kann helfen, wenn deine Ausgangsgrafik nur als PNG oder JPG vorhanden ist. Bereite einen SVG-Kandidaten vor und prüfe anschließend die rekonstruierte Quellsilhouette, kleine Löcher und Farbgrenzen, bevor du den Filter anwendest. Eine Morphologiekontur verstärkt Probleme in dieser Silhouette, statt die beabsichtigte Geometrie für dich zu reparieren.

Verwende ein vorhandenes Vektororiginal direkt. Bei einem einfachen Symbol lässt sich eine manuelle Neuzeichnung möglicherweise leichter kontrollieren. Das Nachzeichnen eines flachen Bilds mit eingebrannter Kontur stellt die ursprünglichen Filtereinstellungen nicht wieder her und klärt nicht, welcher Teil die ungefilterte Form war. Der Überblick zur Bildvektorisierung erklärt diese Grenze der Rekonstruktion.

FAQ

Erzeugt feMorphology einen bearbeitbaren Konturpfad? Nein. Es verändert das gerenderte Filterergebnis. Dieses Beispiel behält dieselben beiden Quellpfade. Wenn das Ziel eine separate Kontur benötigt, brauchst du eine Geometrieoperation und eine Importprüfung.

Warum füllt die goldene Kontur das Loch meines SVGs? Der Ring wächst außerhalb des deckenden Alphas, auch in transparente Öffnungen hinein. Bei diesem Testmotiv füllt Radius 22 das quadratische Loch. Für andere Grafiken musst du Zwischenräume und Radius separat prüfen.

Warum SourceAlpha statt SourceGraphic verwenden? Mit SourceAlpha arbeitet der Filter auf der Silhouette, ohne jeden ursprünglichen Farbkanal zu erweitern. Das Beispiel färbt diesen Alpha-Ring separat und legt SourceGraphic zuletzt darüber, um die Originalfarben zu zeigen.

Quellen

1. W3C — Filter Effects Level 1 — Definiert die rechteckige Umgebung der Morphologie, die Kompositionseingaben und die Beschneidung durch den Filterbereich.
2. MDN — radius — Definiert die Syntax mit einem und zwei Radiuswerten, Einheiten und Werte, die den Effekt deaktivieren.
3. MDN — operator — Unterscheidet Morphologieoperationen von Kompositionsoperationen.
4. MDN — primitiveUnits — Definiert das Koordinatensystem für den Morphologieradius.
5. MDN — filterUnits — Definiert das Koordinatensystem des äußeren Filterbereichs.

Wenn deine Quelle nur als Rasterbild vorliegt, bereite mit PerfectVector eine Vektorgrafik vor, prüfe die ungefilterte Silhouette und Öffnungen, füge dann die Kontur hinzu und vergleiche die fertige Datei im empfangenden Viewer.