Mapy przemieszczeń SVG: zniekształć podgląd logo

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 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

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

Do zmiany wyłącznie koloru w podglądzie użyj zmiany kolorów przez 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.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <defs>
    <filter id="warp" x="-25%" y="-25%" width="150%" height="150%" primitiveUnits="userSpaceOnUse"
            color-interpolation-filters="sRGB">
      <feTurbulence type="fractalNoise" baseFrequency="0.035"
                    numOctaves="1" seed="8" result="noise"/>
      <feColorMatrix in="noise" type="matrix" values="1 0 0 0 0
        0 0 0 0 0.5
        0 0 0 0 0
        0 0 0 0 1" result="map"/>
      <feDisplacementMap in="SourceGraphic" in2="map" scale="36"
                         xChannelSelector="R" yChannelSelector="G"/>
    </filter>
  </defs>
  <path d="M42 42H158V158H42Z M78 78H122V122H78Z" fill="#e76b50" fill-rule="evenodd" filter="url(#warp)"/>
</svg>

feTurbulence dostarcza proceduralną zmienność. Opis szumu MDN 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 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ą:

sampleX = x + scale × (horizontalChannel - 0.5)
sampleY = y + scale × (verticalChannel - 0.5)

Specyfikacja przemieszczenia W3C 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:

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 dokumentuje ustawienie domyślne i jawne wybory.

Aby utworzyć stałą mapę diagnostyczną, zastąp prymityw szumu i macierz tym elementem:

<feFlood flood-color="rgb(50%,50%,50%)" result="map"/>

Zachowaj prymityw przemieszczenia, selektory i jawne sRGB w filtrze. Opis feFlood MDN 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.

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 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, 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, 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, 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 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 — Wejścia źródła i mapy, kanały oraz zachowanie próbkowania.
2. W3C: Filtr przemieszczenia — Odwrotne mapowanie, skala i współrzędne prymitywów.
3. MDN: feTurbulence — Ustawienia stałej mapy proceduralnej.
4. MDN: feColorMatrix — Jawne wartości kanałów mapy sterującej.
5. MDN: color-interpolation-filters — Domyślne linearRGB i jawne sRGB.
6. MDN: feFlood — Kontrola mapy o stałym kolorze.
7. MDN: filter — Atrybuty obszaru filtra.

Jeśli czysty oryginał istnieje tylko jako raster, przekonwertuj własne logo na SVG, sprawdź sylwetkę i otwory, a następnie zapisz wzorzec przed utworzeniem osobnej zdeformowanej kopii do wyświetlania.