> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Mapy przemieszczeń SVG: zniekształć podgląd logo > Użyj feDisplacementMap do deformacji podglądu logo, kontroluj kanały i neutralną szarość w sRGB, sprawdź dwa rozmiary i zachowaj oryginalne ścieżki do przekazania. Source: https://perfectvector.com/pl/blog/svg-fedisplacementmap-artwork Language: pl Author: Irene Kim Published: 2026-10-01T08:00:00+09:00 Updated: 2026-10-01T08:00:00+09:00 Filtr SVG `feDisplacementMap` zniekształca obraz wyświetlany przez renderer, używając innego obrazu jako mapy próbkowania. Pozostawia dane ścieżek źródłowych bez zmian. Użyj go do odwracalnego podglądu logo lub ilustracji internetowej, a do edycji i przekazania zachowaj niefiltrowaną wersję wzorcową. Aby pierwszy przykład był przewidywalny, ustaw `in="SourceGraphic"`, wybierz nazwaną mapę dla `in2`, określ kanały poziomy i pionowy oraz ustaw `color-interpolation-filters="sRGB"`. [Opis przemieszczenia MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDisplacementMap) wyjaśnia dwa wejścia i wzór próbkowania. Kształt, który wygląda na wygięty na ekranie, nie jest automatycznie nowym edytowalnym konturem. ## Ustal, jakiego pliku potrzebujesz | Cel | Odpowiednie podejście | Co zachować | | -------------------------------------------- | -------------------------------------------------------- | -------------------------------------------------------- | | Statyczna zdeformowana grafika na stronie | Filtrowana kopia do wyświetlania | Oryginalny wzorzec ścieżek SVG | | Edytowalne logo z trwale wygiętymi konturami | Świadoma edycja lub przebudowa geometrii | Zweryfikowana nowa geometria ścieżek | | Rastrowy podgląd o stałym wyglądzie | Renderowanie kopii do wyświetlania w wymaganym rozmiarze | Czysty wzorzec i sprawdzony eksport rastrowy | | Geometria produkcyjna do druku lub cięcia | Rozpoczęcie od niefiltrowanego wzorca | Wymiary, otwory i ścieżki sprawdzone w miejscu docelowym | Przykład poniżej wykorzystuje naszą oryginalną kwadratową odznakę z otwartym środkiem. Jej proste krawędzie ułatwiają porównywanie deformacji. To motyw demonstracyjny, a nie logo klienta ani wynik wektoryzatora. **Podgląd i źródło są oddzielne** ![Ilustracja trzech podglądów koralowej odznaki o rosnącej deformacji konturu nad identycznymi prostymi konturami ścieżek źródłowych](https://perfectvector.com/blog/svg-fedisplacementmap-artwork/displacement-states.webp) *Ilustracja: widoczna odznaka może się deformować, podczas gdy kontur źródłowy pozostaje bez zmian. Schemat koncepcyjny nie jest zrzutem przeglądarki, eksportem z natywnego edytora ani wynikiem konwersji.* Do zmiany wyłącznie koloru w podglądzie użyj [zmiany kolorów przez feColorMatrix](https://perfectvector.com/pl/blog/svg-fecolormatrix). Przemieszczenie rozwiązuje problem przestrzenny: skąd próbkowany jest renderowany obraz. ## Skopiuj kontrolowany statyczny przykład SVG Zapisz ten kod jako SVG i otwórz w przeglądarce. Zawiera jedną ścieżkę, jedno stałe źródło szumu, macierz utrzymującą zmienny kanał poziomy i neutralny pionowy oraz skalę przemieszczenia `36`. ```xml ``` `feTurbulence` dostarcza proceduralną zmienność. [Opis szumu MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) dokumentuje ustawienia częstotliwości, oktaw, ziarna i typu. Tutaj pozostawiamy je stałe, aby zmiana `scale` porównywała siłę na tej samej mapie. Macierz zachowuje czerwony kanał szumu, ustawia zielony na `0.5`, niebieski na zero, a alfa na jeden. Jej wynik jest mapą sterującą, a nie nową paletą kolorów koralowej odznaki. [Opis macierzy MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) wyjaśnia przekształcanie kanałów. Czerwony steruje następnie próbkowaniem poziomym, a zielony wnosi neutralne przesunięcie pionowe. Aby porównać siłę, zmień tylko `scale="36"` na `scale="12"`, a następnie `scale="0"`. Zachowaj ścieżkę, ziarno, macierz mapy, przestrzeń kolorów i viewBox bez zmian. To izoluje podejmowaną decyzję. ## Odczytuj skalę jako przesunięcie próbkowania Dla wybranych kanałów mapy pozycje próbkowania źródła wynoszą: ```text sampleX = x + scale × (horizontalChannel - 0.5) sampleY = y + scale × (verticalChannel - 0.5) ``` [Specyfikacja przemieszczenia W3C](https://drafts.csswg.org/filter-effects/#feDisplacementMapElement) definiuje to odwrotne mapowanie: każda pozycja wyjściowa pyta, skąd pobrać próbkę źródła. Dodatnie przesunięcie próbkowania nie jest poleceniem przesunięcia węzła ścieżki w tym kierunku. Przy skali `36` kanał poziomy daje takie przesunięcia próbkowania: | Wartość kanału w roboczej przestrzeni kolorów filtra | Poziome przesunięcie próbkowania | | ---------------------------------------------------- | -------------------------------- | | `0` | `-18` | | `0.5` | `0` | | `1` | `+18` | Przykład używa `primitiveUnits="userSpaceOnUse"`, więc wartości odnoszą się do układu współrzędnych użytkownika SVG. Nie są gwarantowanymi odległościami w pikselach CSS po przeskalowaniu viewBox. Specyfikacja definiuje też skalę `0` jako brak efektu przemieszczenia. Stała wartość zielonego utrzymuje w tym przykładzie neutralne próbkowanie pionowe. Aby później zbadać deformację w dwóch osiach, świadomie wprowadź zmienność także w zielonym. Nie zmieniaj jednocześnie kanałów i mapy podczas diagnozowania nieoczekiwanego wyniku. ## Jawnie określ przestrzeń kolorów neutralnej szarości Neutralność oznacza wartość wybranego kanału **0.5 w przestrzeni roboczej używanej przez mapę**. Nie oznacza, że każda wizualnie średnioszara próbka jest neutralna przy każdym ustawieniu filtra. Domyślna przestrzeń robocza filtra to `linearRGB`, a ten przykład jawnie używa `sRGB`. Kolor zapisany jako `rgb(50%,50%,50%)` po konwersji do liniowego RGB nie ma liczbowej wartości 0.5. [Opis color-interpolation-filters MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation-filters) dokumentuje ustawienie domyślne i jawne wybory. Aby utworzyć stałą mapę diagnostyczną, zastąp prymityw szumu i macierz tym elementem: ```xml ``` Zachowaj prymityw przemieszczenia, selektory i jawne `sRGB` w filtrze. [Opis feFlood MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feFlood) dokumentuje użyty tu obraz o stałym kolorze. Ta kontrola pomaga odróżnić zmienność mapy od przesunięcia wynikającego z przestrzeni kolorów. W naszym pliku testowym w Chrome odznaka ze stałą mapą sRGB wyglądała na wyrównaną z odznaką bez filtra. Usunięcie jawnego ustawienia przestrzeni kolorów powodowało widoczne przesunięcie tej samej odznaki z szarą mapą. To obserwacja w przeglądarce, a nie twierdzenie o identycznym pikselowo renderowaniu między silnikami. Zachowaj ustawienie przestrzeni kolorów, gdy przenosisz ten przepis do własnej grafiki; sprawdź reguły CSS, które mogą je nadpisywać. ## Sprawdź tę samą odznakę w dwóch rozmiarach Wyrenderowaliśmy oryginalną odznakę w Chrome w rozmiarach **120 × 120** i **300 × 300 pikseli CSS**. Każdy rozmiar pokazywał tę samą stałą mapę przy skalach `0`, `12` i `36`, z tym samym viewBox `0 0 200 200`. | Siła | Obserwacja oryginalnego pliku testowego | Jaką decyzję wspiera | | ---- | ---------------------------------------------------------- | ----------------------------------------------- | | `0` | Proste krawędzie zewnętrzne i kwadratowy otwór | Punkt odniesienia do porównań | | `12` | Łagodna pozioma zmienność konturu; otwór pozostał widoczny | Powściągliwy efekt do wyświetlania | | `36` | Silniejsza deformacja krawędzi zewnętrznej i otworu | Sprawdzenie rozpoznawalności przed przekazaniem | Efekt był widoczny w obu rozmiarach; większy podgląd ułatwiał ocenę otworu i krawędzi. DOM przeglądarki nadal zawierał jedną ścieżkę w każdym z sześciu przykładów, z identycznymi wartościami `d`. Trzy dodatkowe kontrole o rozmiarze 200 pikseli porównywały odznakę niefiltrowaną ze stałymi szarymi mapami w jawnym sRGB i domyślnym linearRGB. To niezależnie utworzone przykłady SVG. Pokazują działanie tego pliku w badanej przeglądarce oraz fakt, że geometria źródłowa nie uległa zmianie. Nie są testami natywnego edytora, wynikami PerfectVector ani przeglądem zgodności. Własne logo sprawdź najpierw w najmniejszym rzeczywistym rozmiarze wyświetlania. Zdeformowany otwór lub narożnik może zmienić odczyt znaku, mimo że czysty wzorzec pozostaje nienaruszony. ## Diagnozuj przesunięcie, słaby efekt lub uciętą krawędź **Cała odznaka przesuwa się zamiast wyginać.** Przetestuj kontrolę ze stałą mapą i jawnym sRGB. Sprawdź wybrane kanały i to, czy mapa rzeczywiście się w nich zmienia. Stała nieneutralna wybrana wartość tworzy jednolite przesunięcie próbkowania. **Efekt pozostaje słaby.** Potwierdź, że `in2="map"` odpowiada nazwanemu `result` macierzy. Stopniowo zwiększaj skalę przy tym samym ziarnie i częstotliwości. Potem w razie potrzeby wypróbuj inną mapę. Nowe ziarno zmienia wzór przestrzenny, więc stanowi osobne porównanie. **Pionowa krawędź zachowuje się nieoczekiwanie.** Ten przykład jest przeznaczony do przemieszczenia poziomego: `xChannelSelector="R"` i `yChannelSelector="G"`, z G ustawionym na 0.5. Sprawdź wiersz macierzy i pisownię kanałów, zanim dodasz zmienność w dwóch osiach. **Wygięty kontur zostaje ucięty.** Sprawdź obszar filtra przed edycją źródłowej ścieżki. Przykład daje dodatkowe miejsce przez `x="-25%"`, `y="-25%"` oraz szerokość i wysokość `150%`. [Opis filter MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) dokumentuje te atrybuty obszaru. Silniejsze efekty mogą wymagać innego obszaru, a otaczający viewport może narzucać oddzielną granicę. Skorzystaj z [kontroli przycinania filtrów i viewportu SVG](https://perfectvector.com/pl/blog/svg-shadow-clipped), jeśli powiększenie obszaru nie przywraca brakującego wyniku. **SVG traci efekt w innym miejscu docelowym.** Otwórz dokładnie przekazany plik w tym miejscu. Podgląd w przeglądarce nie ustala zachowania edytora, eksportera PDF ani plotera tnącego. Zachowaj dostępny czysty wzorzec, zamiast obiecywać, że filtr przeniesie się bez zmian. ## Przekaż czysty wzorzec oddzielnie Aby uzyskać wersję bez filtra, usuń `filter="url(#warp)"` ze ścieżki i nieużywaną definicję filtra. Zachowaj oryginalne `d`, `fill-rule="evenodd"`, wypełnienie i viewBox. Otwórz wynikowy plik i potwierdź, że kwadratowy otwór i proste krawędzie odpowiadają czystej wersji bazowej. Użyj osobnych nazw plików dla czystego wzorca i efektu do wyświetlania. Jeśli powtarzasz filtrowany SVG inline na jednej stronie, nadaj każdemu filtrowi unikalny identyfikator i zaktualizuj jego odwołanie `url(#...)`. Sprawdź końcowy sposób osadzenia i przeglądarki, które zamierzasz obsługiwać. Jeśli sam końcowy zdeformowany kontur musi być edytowalny, przygotuj tę geometrię jako oddzielne zadanie graficzne. Ten filtr nie utrwala podglądu w nowych poleceniach ścieżek. Obrysowanie zrasteryzowanego podglądu także jest nową konwersją z własnymi kontrolami dokładności i czyszczenia; nie odzyskuje oryginalnego, matematycznie niezmienionego wzorca. PNG umieszczony w SVG to jeszcze inna kwestia. Zobacz [pliki SVG zawierające obrazy rastrowe](https://perfectvector.com/pl/blog/svg-contains-raster-image), zanim uznasz nazwę pliku za gwarancję edytowalnych ścieżek logo. ## Kiedy pomaga wektoryzacja logo Jeśli oryginalne czyste logo przetrwało tylko jako PNG lub JPG, [zwektoryzuj to źródłowe logo](https://perfectvector.com/pl/vectorize-logo), a potem sprawdź jego sylwetkę, otwory i edytowalne obszary kolorów przed dodaniem filtra do wyświetlania. PerfectVector obsługuje konwersję rastra na wektor; graf przemieszczenia w tym poradniku to osobny efekt SVG. Nie zamienia zdeformowanego podglądu w gwarantowany kontur produkcyjny. Jeśli masz już czysty wzorzec ścieżek, użyj go bezpośrednio. W zakresie przygotowania źródła i czyszczenia logo [poradnik wektoryzacji logo](https://perfectvector.com/pl/blog/how-to-vectorize-a-logo) opisuje odzyskiwanie, a nie deformację w przeglądarce. ## Najczęstsze pytania **Czy feDisplacementMap zmienia moje ścieżki SVG?** Filtr zmienia renderowany obraz przez próbkowanie sterowane mapą. W oryginalnym pliku testowym w przeglądarce sześć wariantów siły zachowało jedną ścieżkę o identycznych wartościach d. **Dlaczego szara mapa przemieszczeń nadal przesuwa grafikę?** Neutralność to wartość kanału 0.5 w roboczej przestrzeni kolorów mapy. Szarość 50% sRGB po konwersji do domyślnej przestrzeni linearRGB nie ma liczbowej wartości 0.5. Użyj jawnego ustawienia przestrzeni kolorów i kontrolowanej próby ze stałą mapą. **Co oznacza skala 36 w tym przykładzie?** Przy jednostkach prymitywów userSpaceOnUse wybrane wartości kanału od 0 do 1 dają przesunięcia próbkowania od -18 do +18 jednostek użytkownika SVG. Wyświetlana odległość zależy od skalowania viewBox SVG. **Czy mogę przekazać zdeformowany SVG bezpośrednio do urządzenia tnącego?** Wyświetlana deformacja nie jest nową edytowalną geometrią cięcia. Zachowaj niefiltrowany wzorzec ścieżek i sprawdź faktyczne miejsce docelowe; przygotuj trwałe wygięte kontury osobno, jeśli zadanie ich wymaga. ## Źródła 1. [MDN: feDisplacementMap](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDisplacementMap) — Wejścia źródła i mapy, kanały oraz zachowanie próbkowania. 2. [W3C: Filtr przemieszczenia](https://drafts.csswg.org/filter-effects/#feDisplacementMapElement) — Odwrotne mapowanie, skala i współrzędne prymitywów. 3. [MDN: feTurbulence](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) — Ustawienia stałej mapy proceduralnej. 4. [MDN: feColorMatrix](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) — Jawne wartości kanałów mapy sterującej. 5. [MDN: color-interpolation-filters](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation-filters) — Domyślne linearRGB i jawne sRGB. 6. [MDN: feFlood](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feFlood) — Kontrola mapy o stałym kolorze. 7. [MDN: filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) — Atrybuty obszaru filtra. Jeśli czysty oryginał istnieje tylko jako raster, [przekonwertuj własne logo na SVG](https://perfectvector.com/pl/vectorize-logo), sprawdź sylwetkę i otwory, a następnie zapisz wzorzec przed utworzeniem osobnej zdeformowanej kopii do wyświetlania. ## Explore - [Read the HTML article](https://perfectvector.com/pl/blog/svg-fedisplacementmap-artwork) - [Wyszarzony Image Trace w Illustratorze: sprawdź obiekt](https://perfectvector.com/pl/blog/illustrator-image-trace-greyed-out.md) - [Obrazy SVG w fpdf2: zachowaj ścieżki w pliku PDF tworzonym w Pythonie](https://perfectvector.com/pl/blog/fpdf2-svg-image.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)