> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # SVG-Kantenerkennung: Vorschau mit feConvolveMatrix > Erstelle eine SVG-Kantenvorschau mit feConvolveMatrix, prüfe Alpha- und Randartefakte, vergleiche einen Schärfungskern und kontrolliere, ob die Quelle echte Pfade enthält. Source: https://perfectvector.com/de/blog/svg-convolution-edge-preview Language: de Author: Irene Kim Published: 2026-10-02T08:00:00+09:00 Updated: 2026-10-02T08:00:00+09:00 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`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/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: ```text -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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/divisor) 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. ```xml ``` Die Filterdefinition wirkt nur, weil das Bild sie mit `filter="url(#effect)"` referenziert. Die [SVG-Filterreferenz](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) 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. | Beispiel | Beobachtetes Aussehen | Ausgelesener Wert an einer gleichmäßigen Stelle | | ------------------------------------- | ----------------------------------------------------------------------------- | --------------------------------------------------- | | Ursprüngliches PNG in SVG | Graue Raute mit weißer Mitte und weißem Papier | Einheitliches Grau: RGBA 64, 64, 64, 255 | | Kantenkern, Alpha erhalten | Schwarze Fläche mit Kantenantwort; Umriss in der größeren Darstellung schwach | Mitte und Ecke: RGBA 0, 0, 0, 255 | | Kantenkern, Alpha ebenfalls gefiltert | Transparentes Ergebnis in dieser Testdatei | Mitte, Ecke und einheitliche Probe: RGBA 0, 0, 0, 0 | | Schärfungskontrolle | Gefüllte Raute erhalten, mit veränderten Grenzpixeln | Einheitliches Grau blieb RGBA 64, 64, 64, 255 | | Kantenkern, Rand mit Nullwerten | Heller äußerer Rahmen erschien | Ecke: RGBA 255, 255, 255, 255 | | Von Hand erstellte Pfadkontrolle | Saubere geometrische Raute und innere Öffnung auf weißem Papier | Ein Pfadelement, keine Bildelemente | 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** ![Schematische Illustration einer Graustufenraute mit Pixel-Kantenantwort im Vergleich zu einem unabhängig gezeichneten korallfarbenen Rautenring mit Bearbeitungsknoten](https://perfectvector.com/blog/svg-convolution-edge-preview/pixels-and-paths.webp) *Illustration: Eine Pixel-Kantenvorschau und ein bearbeitbarer Pfad haben unterschiedliche Repräsentationen. Dies ist weder ein Browser-Screenshot noch ein Konvertierungsergebnis.* ## 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/preserveAlpha) 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/bias) 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/edgeMode). 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](https://www.w3.org/TR/filter-effects-1/#feConvolveMatrixElement) 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: ```text 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 ``, dessen `href` mit `data:image/png` beginnt. Die [Referenz zum image-Element](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/image) 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: ```xml ``` 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](https://perfectvector.com/de/blog/svg-contains-raster-image) 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](https://perfectvector.com/de/blog/line-art-to-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](https://perfectvector.com/de/image-to-vector), prüfe Kontur und innere Öffnung und behalte das saubere Ergebnis als Masterdatei. Eine gelungene Kantenvorschau ersetzt diese Prüfung nicht. Der [Vektorisierungsleitfaden](https://perfectvector.com/de/blog/what-is-image-vectorization) 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feConvolveMatrix) – Faltung mit Nachbarpixeln und standardmäßige Farbverarbeitung. 2. [MDN: divisor](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/divisor) – Normalisierung und Standard bei Summe null. 3. [MDN: filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) – Definition und Anwendung eines Filtereffekts. 4. [MDN: preserveAlpha](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/preserveAlpha) – Verarbeitung nur der Farbe oder einschließlich Alpha. 5. [MDN: bias](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/bias) – Verschiebung der Antwort nach der Division. 6. [MDN: edgeMode](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/edgeMode) – Randbehandlung mit Duplikaten, gegenüberliegendem Rand und Nullwerten. 7. [W3C: Filter Effects, feConvolveMatrix](https://www.w3.org/TR/filter-effects-1/#feConvolveMatrixElement) – Ziel- und Abtastregeln. 8. [MDN: image](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/image) – Referenzierte Raster- und SVG-Bildinhalte. ## Explore - [Read the HTML article](https://perfectvector.com/de/blog/svg-convolution-edge-preview) - [SVG-Icons in MapLibre: Pixel und Symbolgröße prüfen](https://perfectvector.com/de/blog/maplibre-svg-symbol-image.md) - [SVG-Logos in Satori: Grafik in einer Markenkarte erhalten](https://perfectvector.com/de/blog/satori-svg-logo.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)