SVG-Kantenerkennung: Vorschau mit feConvolveMatrix

SVG-Kantenerkennung mit feConvolveMatrix verändert die gerenderten Pixel an Farbgrenzen. Sie kann aus einem PNG innerhalb eines SVGs eine Kantenvorschau erzeugen, erstellt aber keine bearbeitbaren Pfadkonturen. Halte diesen Unterschied klar, wenn du anschließend ein Logo bearbeiten, Liniengrafik vorbereiten oder Webgrafik erstellen möchtest.

Ein sinnvoller erster Test ist ein kleines Graustufenbild mit bekannter Form. Wende einen symmetrischen Kantenkern an, erhalte sein Alpha und vergleiche es mit der unveränderten Quelle. Prüfe danach die SVG-Elemente. Eine schärfer aussehende Grenze belegt nicht, dass aus dem Bild Vektorgeometrie geworden ist.

Beginne mit einer kontrollierten Kantenvorschau

Die Referenz zu feConvolveMatrix beschreibt Faltung als Berechnung mit einem Eingabepixel und seinen Nachbarn. Dieser 3 × 3 große Kern zieht die acht Nachbarn vom Achtfachen der Mitte ab:

-1 -1 -1
-1  8 -1
-1 -1 -1

Seine Koeffizienten ergeben zusammen null. In einem gleichmäßigen Bereich ist die Antwort null; bei einem Helligkeitswechsel kann sie positiv oder negativ sein. Mit bias="0" werden negative Ergebnisse an der unteren Farbgrenze abgeschnitten. Die Vorschau zeigt daher nicht beide Seiten jeder Grenze gleich stark.

Das Beispiel verwendet ausdrücklich divisor="1". Die divisor-Referenz dokumentiert die Normalisierung durch diesen Wert und den Standardwert 1 für einen Kern mit Summe null. Außerdem setzt es color-interpolation-filters="sRGB", damit das Beispiel sRGB-Kanalwerte statt der standardmäßigen linearRGB-Verarbeitung der Primitive nutzt.

Speichere diese vollständige, eigenständige Datei als edge-preview.svg und öffne sie im Browser. Ihr eingebettetes PNG ist eine selbst erstellte Graustufenraute von 48 × 48 auf undurchsichtigem weißem Papier. Die Mitte ist weiß, nicht transparent.

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
  <defs>
    <filter id="effect" filterUnits="userSpaceOnUse" x="0" y="0" width="48" height="48" color-interpolation-filters="sRGB">
      <feConvolveMatrix in="SourceGraphic" order="3" kernelMatrix="-1 -1 -1 -1 8 -1 -1 -1 -1" divisor="1" bias="0" targetX="1" targetY="1" edgeMode="duplicate" preserveAlpha="true"/>
    </filter>
  </defs>
  <image width="48" height="48" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABOklEQVR4nNWZQQ7EIAwDU7+seTlPo1ppTyvRhcQGxYeeGuNpEZT06r13KyxYccGKC1ZcsOKCFRfUA7h7XQD/hldCQGX8G1oFAYXpKKwCAmzDfyHZEGCazYZjQoBltBqKBQGGSTSMEyDSANkQnqxPAbCmgSd8wgDs1cSDflAP1lqT+IYBIuGVENj15FUQUJiOwiogwDSbCcmGAMNkNRwTApniaKjV+/0lB06Ej9T5IA9Ord+rdW2Q53UKKSFYbxiZ4mgo5vQEw0R1ImsT405vZAwIxcKAacckhGpVw/SdAfNIX6gtLslX9P+AokXSAvtJ+EAT3bzYfjgxKNMHJwdn1FPaKju+heSNLeXX6LbWouI8sL25yzyRHWuvM87Ex39wZLoSS+pi3fct9b8+FyssWHHBigtWXDgdIKsHsU1cbk4FPAgAAAAASUVORK5CYII=" filter="url(#effect)"/>
</svg>

Die Filterdefinition wirkt nur, weil das Bild sie mit filter="url(#effect)" referenziert. Die SVG-Filterreferenz erklärt, dass die Definition selbst nicht gezeichnet wird. Der ausdrückliche Bereich deckt diese Quelle von 48 × 48 ab. Andere Grafiken brauchen eine eigene Bereichsprüfung.

Was sich im Browsertest änderte

Wir prüften sechs selbst erstellte Beispiele in Chrome bei 48 und 192 CSS-Pixeln. Fünf Dateien enthalten ein eingebettetes PNG-Bild und keine Pfade. Die sechste ist ein unabhängig von Hand erstelltes Vektorgegenstück. Sie dient als Geometriekontrolle und ist nicht das Ergebnis einer Filteranwendung oder des Nachzeichnens des PNGs.

Die RGBA-Proben wurden aus einer 48 × 48 großen Canvas-Darstellung jedes gerenderten SVGs ausgelesen. Die angezeigten Beispiele wurden separat in beiden Größen geprüft. Das sind Beobachtungen für diese Quelle und diesen Browser, keine Garantie für Kompatibilität oder Erkennbarkeit. Das Vergrößern der rasterbasierten Vorschau stellte keine sauberere Kontur wieder her.

Pixelantwort und bearbeitbare Geometrie

Stelle ein verschwundenes Ergebnis wieder her, ohne das Papier zu löschen

preserveAlpha ist standardmäßig false. Damit verarbeitet der Kern auch Alpha. Unsere undurchsichtige Eingabe hat überall Alpha 1. Der Kantenkern mit Summe null hebt deshalb ihr gleichmäßiges Alpha zusammen mit der gleichmäßigen Farbe auf. In der geprüften Testdatei verschwand das Ergebnis.

Mit preserveAlpha="true" bleibt das Quellalpha erhalten, während Farbe verarbeitet wird. Die preserveAlpha-Referenz dokumentiert diesen Unterschied. Für diesen Test stellt es eine undurchsichtige Kantenvorschau wieder her. Auch das undurchsichtige Papier und die weiße Mitte bleiben undurchsichtig, obwohl ihre gefilterte Farbe schwarz wird. Alpha zu erhalten entfernt keinen Hintergrund und findet keine Löcher in einem Logo.

Ist die Vorschau überwiegend schwarz, vergleiche zunächst einen bekannten gleichmäßigen Bereich mit einer bekannten Grenze. Schwarz kann eine gültige Nullantwort sein. Um Helligkeitsänderungen mit Vorzeichen um einen Mittelton zu betrachten, probiere bias="0.5". Die bias-Referenz erklärt den nach der Division addierten Versatz. Das verändert den Darstellungsbereich, nicht die SVG-Geometrie.

Prüfe Bildränder getrennt von der Grafik

Behalte edgeMode="duplicate" für den ersten Vergleich. Es erweitert die Randpixelwerte, wenn benachbarte Proben außerhalb der Eingabe liegen. none verwendet RGBA-Proben mit Nullwerten; wrap nimmt Proben vom gegenüberliegenden Rand. Das sind unterschiedliche Regeln in der edgeMode-Referenz.

Bei unserer undurchsichtigen weißen Karte erzeugte allein die Änderung von duplicate zu none einen hellen Rahmen außen an der Karte. Diese Grenze gehört zum Bildrechteck, nicht zur Raute. Vergleiche die ungefilterte Datei, bevor du einen Rahmen als Grafikkontur deutest.

Die Filter-Effects-Spezifikation definiert das Kernziel und das Abtastverhalten. Hier zentrieren targetX="1" und targetY="1" den 3 × 3 großen Kern. Diese Vorlage lässt kernelUnitLength ungesetzt. Nimm nicht an, dass eine Nachbarprobe bei jeder Darstellungsgröße genau eine SVG-Benutzereinheit überspannt. Prüfe die ausgelieferte Darstellung.

Verwende Schärfung als Kontrolle, nicht zur Wiederherstellung verlorener Schärfe

Um die gefüllte Grafik zu erhalten und gleichzeitig lokale Änderungen zu betonen, ersetze nur kernelMatrix durch:

0 -1  0
-1 5 -1
0 -1  0

Die Summe beträgt 1. Ein gleichmäßiger Kanalwert c ergibt bei Divisor 1 und Bias 0 wieder 5c - 4c = c. In unserer Testdatei blieb die einheitliche graue Probe bei 64, während sich Grenzpixel änderten. Behalte für diesen Vergleich preserveAlpha="true" und edgeMode="duplicate" bei.

Schärfen kann neben nützlichen Grenzen auch Rauschen und Lichthöfe betonen. Es stellt keine Quelldetails wieder her, die verloren gingen, bevor das Bild den Filter erreichte. Sieht eine vergrößerte Vorschau schlecht aus, kehre zum Originalbild zurück, statt einen stärkeren Kern als Ersatz für Quellauflösung zu betrachten.

Prüfe die Datei, bevor du sie Vektornachzeichnung nennst

Die veröffentlichte Vorlage enthält ein <image>, dessen href mit data:image/png beginnt. Die Referenz zum image-Element beschreibt die Raster- und SVG-Ressourcen, die dieses Element anzeigen kann. Hier kennzeichnet der Medientyp das eingebettete Rasterbild. Der Kantenfilter lässt dieses Element bestehen.

Zum Vergleich verwendet die unabhängig erstellte Masterdatei diesen zusammengesetzten Pfad über einem weißen Rechteck:

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
  <rect width="48" height="48" fill="white"/>
  <path d="M24 6 L42 24 L24 42 L6 24 Z M24 17 L31 24 L24 31 L17 24 Z"
        fill="#404040" fill-rule="evenodd"/>
</svg>

Diese Koordinaten wurden separat geschrieben. Sie wurden nicht aus dem gefilterten Bild gewonnen. Pixelzeichnung und Geometriekontrolle müssen nicht an jeder Grenzprobe übereinstimmen. Der Leitfaden zur Prüfung eingebetteter Rasterbilder erklärt, wie du ein gemischtes SVG prüfst, ohne dich allein auf Zoom zu verlassen.

Behalte für Webgrafiken die ungefilterte SVG-Masterdatei und verwende eine gefilterte Darstellungskopie, wenn der Effekt zum Entwurf passt. Prüfe für Bearbeitungs- oder Produktionspfade die tatsächlichen Quellkonturen und die innere Öffnung. Der Leitfaden zu Liniengrafik als SVG behandelt diese Geometrieaufgabe.

PerfectVector passt, wenn deine Ausgangsgrafik ein flaches PNG oder JPG ist und du bearbeitbare Quellformen brauchst. Konvertiere das ursprüngliche Bild in SVG, prüfe Kontur und innere Öffnung und behalte das saubere Ergebnis als Masterdatei. Eine gelungene Kantenvorschau ersetzt diese Prüfung nicht. Der Vektorisierungsleitfaden erklärt, wie sich das Rekonstruieren von Pfaden vom Anwenden eines Bildeffekts unterscheidet.

Häufige Fragen

Erzeugt SVG-Kantenerkennung mit feConvolveMatrix Vektorpfade? Nein. Sie berechnet einen gerenderten Pixeleffekt. Das eingebettete PNG in diesem Beispiel bleibt ein Bildelement. Bearbeitbare Konturen benötigen separat gezeichnete oder nachgezeichnete Geometrie.

Warum lässt mein Kantenfilter die Grafik verschwinden? Prüfe preserveAlpha. Der Standardwert false filtert auch Alpha. In dieser undurchsichtigen Testdatei machte der Kern mit Summe null das geprüfte Ergebnis transparent. Alpha zu erhalten stellte eine undurchsichtige Vorschau wieder her.

Entfernt preserveAlpha den weißen Hintergrund? Nein. Es behält das Quellalpha. Ein undurchsichtiger weißer Hintergrund bleibt undurchsichtig, selbst wenn seine gefilterte Farbe schwarz wird. Hintergrundentfernung und Pfadrekonstruktion sind separate Aufgaben.

Warum zeichnet ein Kantenfilter einen Rahmen um das Bild? Prüfe edgeMode und das Eingaberechteck. Nullwertige Proben außerhalb unserer undurchsichtigen weißen Karte erzeugten einen hellen äußeren Rand. Die Randbehandlung duplicate vermied diesen Rahmen in dieser Testdatei.

Quellen

1. MDN: feConvolveMatrix – Faltung mit Nachbarpixeln und standardmäßige Farbverarbeitung.
2. MDN: divisor – Normalisierung und Standard bei Summe null.
3. MDN: filter – Definition und Anwendung eines Filtereffekts.
4. MDN: preserveAlpha – Verarbeitung nur der Farbe oder einschließlich Alpha.
5. MDN: bias – Verschiebung der Antwort nach der Division.
6. MDN: edgeMode – Randbehandlung mit Duplikaten, gegenüberliegendem Rand und Nullwerten.
7. W3C: Filter Effects, feConvolveMatrix – Ziel- und Abtastregeln.
8. MDN: image – Referenzierte Raster- und SVG-Bildinhalte.