> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Wykrywanie krawędzi SVG: podgląd feConvolveMatrix > Zbuduj podgląd krawędzi SVG przez feConvolveMatrix, zbadaj artefakty alfa i brzegów, porównaj wyostrzanie i sprawdź, czy źródło zawiera prawdziwe ścieżki. Source: https://perfectvector.com/pl/blog/svg-convolution-edge-preview Language: pl Author: Irene Kim Published: 2026-10-02T08:00:00+09:00 Updated: 2026-10-02T08:00:00+09:00 Wykrywanie krawędzi SVG przez `feConvolveMatrix` zmienia renderowane piksele wokół granic kolorów. Może tworzyć podgląd krawędzi z PNG wewnątrz SVG, ale nie tworzy edytowalnych konturów ścieżek. Zachowaj to rozróżnienie, gdy kolejnym zadaniem jest edycja logo, przygotowanie grafiki liniowej lub tworzenie grafiki internetowej. Przydatnym pierwszym testem jest mały obraz w skali szarości o znanym kształcie. Zastosuj symetryczne jądro krawędzi, zachowaj alfa i porównaj z niezmienionym źródłem. Następnie sprawdź elementy SVG. Ostrzej wyglądająca granica nie potwierdza, że obraz stał się geometrią wektorową. ## Zacznij od kontrolowanego podglądu krawędzi [Opis `feConvolveMatrix`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feConvolveMatrix) przedstawia splot jako obliczenie obejmujące piksel wejściowy i jego sąsiadów. To jądro 3 × 3 odejmuje ośmiu sąsiadów od ośmiokrotności środka: ```text -1 -1 -1 -1 8 -1 -1 -1 -1 ``` Suma współczynników wynosi zero. W jednolitym obszarze odpowiedź jest zerowa; przy zmianie jasności może być dodatnia lub ujemna. Przy `bias="0"` wyniki ujemne są obcinane do dolnej granicy koloru. Podgląd nie pokazuje więc obu stron każdej granicy jednakowo. Przykład jawnie używa `divisor="1"`. [Opis divisor](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/divisor) dokumentuje normalizację przez tę wartość i domyślne 1 dla jądra o sumie zero. Ustawia też `color-interpolation-filters="sRGB"`, aby korzystać z wartości kanałów sRGB zamiast domyślnego przetwarzania linearRGB prymitywu. Zapisz ten kompletny, samowystarczalny plik jako `edge-preview.svg` i otwórz w przeglądarce. Osadzony PNG to nasz oryginalny romb w skali szarości 48 × 48 na nieprzezroczystym białym papierze. Środek jest biały, a nie przezroczysty. ```xml ``` Definicja filtra działa tylko dlatego, że obraz odwołuje się do niej przez `filter="url(#effect)"`. [Opis filtra SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) wyjaśnia, że sama definicja nie jest rysowana. Jawny obszar obejmuje to źródło 48 × 48; inna grafika wymaga własnej kontroli obszaru. ## Co zmieniło się w teście przeglądarkowym Sprawdziliśmy sześć oryginalnych przykładów w Chrome przy 48 i 192 pikselach CSS. Pięć plików zawiera jeden osadzony obraz PNG i żadnych ścieżek. Szósty jest niezależnie, ręcznie utworzonym odpowiednikiem wektorowym. To kontrola geometrii, a nie wynik zastosowania filtra lub obrysowania PNG. | Przykład | Zaobserwowany wygląd | Odczyt jednolitej próbki | | ------------------------------------- | --------------------------------------------------------------------- | ---------------------------------------------------- | | Oryginalny PNG w SVG | Szary romb z białym środkiem i papierem | Jednolita szarość: RGBA 64, 64, 64, 255 | | Jądro krawędzi, zachowane alfa | Czarne pole z odpowiedzią krawędzi; kontur słaby w większym rozmiarze | Środek i narożnik: RGBA 0, 0, 0, 255 | | Jądro krawędzi, filtrowane także alfa | Przezroczysty wynik w tym teście | Środek, narożnik i jednolita próbka: RGBA 0, 0, 0, 0 | | Kontrola wyostrzania | Zachowany wypełniony romb ze zmienionymi pikselami granicy | Jednolita szarość pozostała RGBA 64, 64, 64, 255 | | Jądro krawędzi, zerowy brzeg | Pojawiła się jasna zewnętrzna ramka | Narożnik: RGBA 255, 255, 255, 255 | | Ręcznie utworzona ścieżka kontrolna | Czysty geometryczny romb i wewnętrzny otwór na białym papierze | Jeden element ścieżki, brak elementów obrazu | Próbki RGBA pochodziły z odczytu Canvas 48 × 48 każdego wyrenderowanego SVG. Wyświetlane przykłady sprawdzano osobno w obu rozmiarach. To obserwacje dla tego źródła i przeglądarki, a nie gwarancja zgodności lub czytelności. Powiększenie rastrowego podglądu nie odzyskało czystszego konturu. **Odpowiedź pikseli i edytowalna geometria** ![Schemat koncepcyjny porównujący szary romb odpowiedzi krawędzi pikseli z niezależnie narysowanym koralowym pierścieniem w kształcie rombu i węzłami edycji](https://perfectvector.com/blog/svg-convolution-edge-preview/pixels-and-paths.webp) *Ilustracja: pikselowy podgląd krawędzi i edytowalna ścieżka mają różne reprezentacje. To nie jest zrzut przeglądarki ani wynik konwersji.* ## Napraw znikający wynik bez usuwania papieru Domyślna wartość `preserveAlpha` to false. Przy tym ustawieniu jądro przetwarza również alfa. Nasze nieprzezroczyste wejście ma wszędzie alfa 1, więc jądro krawędzi o sumie zero kasuje jednolite alfa wraz z jednolitym kolorem. Wynik zniknął w badanym przykładzie. Ustawienie `preserveAlpha="true"` zachowuje alfa źródła podczas przetwarzania koloru. [Opis preserveAlpha](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/preserveAlpha) dokumentuje różnicę. W tym teście przywraca nieprzezroczysty podgląd krawędzi. Zachowuje też nieprzezroczystość papieru i białego środka, mimo że ich przefiltrowany kolor staje się czarny. Zachowanie alfa nie usuwa tła ani nie znajduje otworów w logo. Jeśli podgląd jest głównie czarny, najpierw porównaj znany jednolity obszar ze znaną granicą. Czerń może być poprawną odpowiedzią zerową. Aby sprawdzić zmiany jasności ze znakiem wokół tonu pośredniego, wypróbuj `bias="0.5"`; [opis bias](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/bias) wyjaśnia przesunięcie dodawane po dzieleniu. Zmienia to zakres wyświetlania, a nie geometrię SVG. ## Sprawdzaj brzegi oddzielnie od grafiki Zachowaj `edgeMode="duplicate"` w początkowym porównaniu. Rozszerza wartości pikseli brzegowych, gdy sąsiednie próbki wypadają poza wejściem. `none` używa próbek RGBA o wartości zero; `wrap` pobiera próbki z przeciwległego brzegu. To odrębne reguły w [opisie edgeMode](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/edgeMode). W naszej nieprzezroczystej białej karcie zmiana tylko `duplicate` na `none` utworzyła jasną ramkę na zewnątrz karty. Ta granica należy do prostokąta obrazu, a nie rombu. Porównaj plik bez filtra, zanim potraktujesz ramkę jako kontur grafiki. [Specyfikacja Filter Effects](https://www.w3.org/TR/filter-effects-1/#feConvolveMatrixElement) definiuje cel jądra i zachowanie próbkowania. Tutaj `targetX="1"` i `targetY="1"` centrują jądro 3 × 3. Ten przykład nie ustawia `kernelUnitLength`. Nie zakładaj, że sąsiednia próbka zawsze obejmuje jedną jednostkę użytkownika SVG przy każdym rozmiarze wyświetlania; sprawdź przekazany rendering. ## Użyj wyostrzania jako kontroli, nie odzyskiwania rozmycia Aby zachować wypełnioną grafikę i podkreślić lokalne zmiany, zastąp tylko `kernelMatrix` taką macierzą: ```text 0 -1 0 -1 5 -1 0 -1 0 ``` Suma wynosi 1. Jednolita wartość kanału `c` zwraca `5c - 4c = c` przy divisor 1 i bias 0. W naszym przykładzie jednolita szara próbka pozostała na 64, a piksele granicy zmieniły się. Zachowaj `preserveAlpha="true"` i `edgeMode="duplicate"` w tym porównaniu. Wyostrzanie może podkreślać szum i obwódki razem z przydatnymi granicami. Nie odzyskuje szczegółów źródła utraconych, zanim obraz trafił do filtra. Jeśli powiększony podgląd wygląda źle, wróć do oryginalnego obrazu, zamiast traktować silniejsze jądro jako zamiennik rozdzielczości źródła. ## Sprawdź plik, zanim nazwiesz go obrysem wektorowym Opublikowany przykład zawiera ``, którego `href` zaczyna się od `data:image/png`. [Opis elementu image](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/image) przedstawia zasoby rastrowe i SVG, które element może wyświetlać. Tutaj typ mediów identyfikuje osadzony raster; filtr krawędzi pozostawia ten element na miejscu. Dla porównania niezależnie utworzony wzorzec używa tej ścieżki złożonej na białym prostokącie: ```xml ``` Współrzędne napisano osobno. Nie odzyskano ich z filtrowanego obrazu, a rysunek pikselowy i kontrola geometryczna nie muszą zgadzać się przy każdej próbce granicy. [Poradnik sprawdzania osadzonego rastra](https://perfectvector.com/pl/blog/svg-contains-raster-image) wyjaśnia kontrolę mieszanego SVG bez polegania wyłącznie na powiększaniu. Dla grafiki internetowej zachowaj niefiltrowany wzorzec SVG i użyj filtrowanej kopii do wyświetlania, jeśli efekt służy projektowi. Do edycji lub ścieżek produkcyjnych sprawdź faktyczne kontury źródła i wewnętrzny otwór. [Poradnik zamiany grafiki liniowej na SVG](https://perfectvector.com/pl/blog/line-art-to-svg) opisuje to zadanie geometryczne. PerfectVector pasuje, gdy początkowa grafika jest płaskim PNG lub JPG, a potrzebujesz edytowalnych kształtów źródłowych. [Przekonwertuj oryginalny obraz na SVG](https://perfectvector.com/pl/image-to-vector), sprawdź kontur i otwór wewnętrzny oraz zachowaj czysty wynik jako wzorzec. Udany podgląd krawędzi nie zastępuje tej kontroli. [Poradnik wektoryzacji](https://perfectvector.com/pl/blog/what-is-image-vectorization) wyjaśnia różnicę między odtwarzaniem ścieżek a stosowaniem efektu obrazu. ## Najczęstsze pytania **Czy wykrywanie krawędzi SVG feConvolveMatrix tworzy ścieżki wektorowe?** Nie. Oblicza renderowany efekt pikselowy. Osadzony PNG w tym przykładzie pozostaje elementem obrazu; edytowalne kontury wymagają osobno narysowanej lub obrysowanej geometrii. **Dlaczego mój filtr krawędzi powoduje zniknięcie grafiki?** Sprawdź preserveAlpha. Domyślne false filtruje także alfa. W tym nieprzezroczystym przykładzie jądro o sumie zero uczyniło badany wynik przezroczystym. Zachowanie alfa przywróciło nieprzezroczysty podgląd. **Czy preserveAlpha usuwa białe tło?** Nie. Zachowuje alfa źródła. Nieprzezroczyste białe tło pozostaje nieprzezroczyste, nawet gdy filtrowany kolor staje się czarny. Usuwanie tła i odtwarzanie ścieżek to osobne zadania. **Dlaczego filtr krawędzi rysuje ramkę wokół obrazu?** Sprawdź edgeMode i prostokąt wejściowy. Próbki o wartości zero poza naszą nieprzezroczystą białą kartą utworzyły jasny brzeg zewnętrzny. Powielanie wartości brzegu pozwoliło uniknąć ramki w tym przykładzie. ## Źródła 1. [MDN: feConvolveMatrix](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feConvolveMatrix) — splot otoczenia pikseli i domyślne przetwarzanie kolorów. 2. [MDN: divisor](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/divisor) — normalizacja i domyślna wartość dla sumy zero. 3. [MDN: filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) — definiowanie i stosowanie efektu filtra. 4. [MDN: preserveAlpha](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/preserveAlpha) — przetwarzanie samego koloru lub także alfa. 5. [MDN: bias](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/bias) — przesunięcie odpowiedzi po dzieleniu. 6. [MDN: edgeMode](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/edgeMode) — obsługa brzegu przez powielanie, zawijanie i zero. 7. [W3C: Filter Effects, feConvolveMatrix](https://www.w3.org/TR/filter-effects-1/#feConvolveMatrixElement) — reguły celu i próbkowania. 8. [MDN: image](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/image) — referencyjna zawartość obrazów rastrowych i SVG. ## Explore - [Read the HTML article](https://perfectvector.com/pl/blog/svg-convolution-edge-preview) - [Ikony SVG MapLibre: sprawdź piksele i rozmiar symbolu](https://perfectvector.com/pl/blog/maplibre-svg-symbol-image.md) - [Logo SVG w Satori: zachowaj grafikę na karcie marki](https://perfectvector.com/pl/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)