Oświetlenie SVG: cieniuj znak i zachowaj jego otwór

Aby logo SVG wyglądało na wytłoczone, zmiękcz SourceAlpha, przekaż to alfa do feDiffuseLighting lub feSpecularLighting, połącz światło z kolorem źródła i zakończ kompozycją in względem oryginalnego SourceAlpha. Ostatni krok utrzymuje efekt wewnątrz znaku i zachowuje otwór. Zapisz niefiltrowaną kopię ścieżki jako płaski wzorzec.

Efekt zmienia renderowany wygląd. Nie tworzy wypukłej bryły, nowego konturu ani pliku produkcyjnego. Ten poradnik używa naszego oryginalnego znaku pierścienia w kształcie rombu, utworzonego bezpośrednio jako SVG, aby porównać etapy oświetlenia i ich alfa.

Użyj alfa jako powierzchni oświetlenia

feDiffuseLighting używa wejściowego alfa jako mapy wypukłości i tworzy nieprzezroczystą mapę światła. Wygląd zależy od światła i powierzchni wejściowej. Opis oświetlenia rozproszonego MDN wyjaśnia to zachowanie. W tym przykładzie nieprzezroczyste części pierścienia tworzą obszar wysoki, a otwór obszar niski.

Rozmywamy tylko SourceAlpha, zachowując oryginalną kolorową ścieżkę jako SourceGraphic. Zmiękczone alfa daje obliczeniom oświetlenia stopniowe przejście na krawędziach wewnętrznych i zewnętrznych. feGaussianBlur steruje zmiękczeniem przez stdDeviation; przykład używa 2.5 w jawnym filtrze przestrzeni użytkownika.

Surowa mapa światła rozproszonego maluje cały obszar filtra, także miejsca, gdzie oryginalna ścieżka była przezroczysta. Pomaga to badać obliczenia światła, ale jest niewłaściwą końcową sylwetką naszego pustego znaku. Zachowaj oryginalne alfa do ostatniego etapu ograniczania.

Skopiuj kompletny przykład cieniowanego znaku

Zapisz go jako emblem-lighting.svg i otwórz w przeglądarce. Ma jedną ścieżkę złożoną i nie zależy od zewnętrznego obrazu.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <defs>
    <filter id="relief" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse" x="0" y="0" width="200" height="200" color-interpolation-filters="linearRGB">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2.5" result="bump"/>
      <feDiffuseLighting in="bump" surfaceScale="4" diffuseConstant="1" lighting-color="#ffffff" result="diffuse">
      <feDistantLight azimuth="225" elevation="45"/>
      </feDiffuseLighting>
      <feComposite in="SourceGraphic" in2="diffuse" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" result="lit"/>
      <feSpecularLighting in="bump" surfaceScale="4" specularConstant=".7" specularExponent="18" lighting-color="#ffffff" result="shine">
      <feDistantLight azimuth="225" elevation="45"/>
      </feSpecularLighting>
      <feComposite in="lit" in2="shine" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="paint"/>
      <feComposite in="paint" in2="SourceAlpha" operator="in"/>
    </filter>
  </defs>
  <path d="M100 20 L180 100 L100 180 L20 100 Z M100 58 L142 100 L100 142 L58 100 Z" fill="#dc795f" fill-rule="evenodd" filter="url(#relief)"/>
</svg>

Filtr nazywa każdy wynik pośredni, aby można było sprawdzić jego rolę:

Mnożenie arytmetyczne używa k1="1", a pozostałe współczynniki są zerowe. Dodawanie używa k2="1" k3="1", a pozostałe są zerowe. feComposite definiuje te operacje pikselowe i operator in. Zachowaj drugie wejście końcowej kompozycji jako SourceAlpha, nie rozmyte bump, gdy chcesz otrzymać pierwotną granicę.

Filtr jawnie używa color-interpolation-filters="linearRGB", domyślnej wartości dla operacji filtrów SVG. To odrębna kwestia od zwykłej interpolacji malowania. Opis color-interpolation-filters MDN dokumentuje różnicę. Wszystkie mierzone tutaj warianty oświetlenia używają tego samego ustawienia.

Porównaj cieniowanie rozproszone z lustrzanym połyskiem

Oświetlenie rozproszone przyciemnia i rozjaśnia oryginalny kolor zgodnie z mapą światła. Etap lustrzany dodaje składową odbicia. feSpecularLighting dokumentuje zależny od światła wynik i parametry. Przykład używa umiarkowanej stałej .7 i wykładnika 18; dostosuj je po uzyskaniu użytecznego efektu rozproszonego.

Aby obejrzeć samo światło rozproszone, zachowaj etapy rozmycia, światła rozproszonego i mnożenia, a następnie zmień pierwsze wejście końcowej kompozycji z paint na lit. Usuń etapy lustrzany i dodawania.

Aby obejrzeć sam połysk lustrzany na płaskim kolorze, zachowaj rozmycie i etap lustrzany. Zmień pierwsze wejście dodawania z lit na SourceGraphic, usuń etapy rozproszony i mnożenia oraz zachowaj końcową kompozycję paint in SourceAlpha. Oba porównania zachowują tę samą oryginalną ścieżkę i kierunek światła.

Nasze odległe światło używa azimuth="225" elevation="45". feDistantLight jest elementem źródła światła dla obu prymitywów oświetlenia. Kąty są w stopniach, a nie pozycjach pikseli. Zmieniaj kierunek wspólnie w obu etapach podczas porównywania efektu łączonego.

Co pokazały oryginalne kontrole w przeglądarce

Otworzyliśmy sześć utworzonych przykładów SVG w Chrome przy 80 × 80 i 160 × 160 pikselach CSS. Płaski wzorzec oraz efekty rozproszony, lustrzany i łączony pozostały wyraźnie różne. Wyższe rozproszone surfaceScale zwiększyło kontrast krawędzi w tym teście. Surowa kontrola światła rozproszonego pokazała szary prostokąt z wypełnionym otworem zamiast przezroczystej sylwetki.

Oddzielne odczyty pikseli używały źródłowego Canvas 200 × 200. Próbka pasa była w (100, 38), próbka krawędzi w (101, 22), otwór w (100, 100), a próbka zewnętrzna w (10, 10).

Każdy plik zachował tę samą wartość d, jedną ścieżkę i zero elementów obrazu. Efekt ekranowy nie utworzył dodatkowej geometrii źródłowej. To obserwacje tej przeglądarki i źródła, a nie gwarancje dotyczące innego renderera lub importu w edytorze.

Oświetlenie i płaski wzorzec

Dostosuj pole wysokości przed zmianą konturu

surfaceScale ustawia skalę wysokości powierzchni używaną w obliczeniach oświetlenia. Nie rozszerza ścieżki. Nasze rozproszone kontrole 4 i 12 zmieniały tylko tę wartość: próbka płaskiego pasa zachowała kolor, a próbka krawędzi stała się ciemniejsza przy 12.

Użyj kontrolowanej sekwencji:

1. Ustal pierwotną przezroczystą sylwetkę i otwór bez filtra.
2. Wybierz zmiękczenie alfa i kierunek światła.
3. Porównaj małe i większe surfaceScale przy pozostałych ustawieniach stałych.
4. Dodaj lustrzany połysk, a na końcu ogranicz malowanie oryginalnym alfa.
5. Sprawdź przekazaną grafikę w rzeczywistym rozmiarze wyświetlania i na kontrastowym tle.

Aktualna specyfikacja Filter Effects definiuje alfa wyniku rozproszonego jako jeden wszędzie, a alfa wyniku lustrzanego na podstawie jego składowych koloru. Nie należy zakładać, że którykolwiek zachowa pierwotny otwór. Definiuje też obliczenie normalnej z sąsiednich próbek alfa. Ten przykład nie ustawia kernelUnitLength; kontrola dwóch rozmiarów nie potwierdza niezależności próbek oświetlenia od rozmiaru.

Jeśli pośredni bufor etapu oświetlenia pojawia się jako wynik końcowy, sprawdź nazwane wejścia i ostatni prymityw. Dla tego pierścienia bezpośrednie zwrócenie mapy światła rozproszonego odtworzyło nieprzezroczysty szary prostokąt. Końcowy krok in SourceAlpha jest celowy, nawet gdy wcześniejsze mnożenie już wydaje się zachowywać przezroczystość.

Jeśli rozmycie lub efekt zostaje przycięty do nieoczekiwanego prostokąta, sprawdź obszar filtra z poradnikiem przycinania SVG. Oddziel ten obszar od końcowego ograniczania źródłowym alfa: jedno ogranicza obszar roboczy efektu, a drugie przywraca zamierzoną sylwetkę.

Przekaż efekt ekranowy wraz z płaskim wzorcem

Usuń atrybut filtra ścieżki, aby sprawdzić płaski wzorzec. Zachowuje ten sam kontur zewnętrzny, wewnętrzny otwór i jednolite koralowe wypełnienie. Przechowuj kopię obok cieniowanej wersji internetowej, aby późniejsze edycje zaczynały się od oryginalnej geometrii.

Do fizycznego wykończenia użyj osobnego procesu przygotowania, na przykład grafiki wektorowej do tłoczenia. Ustawienie oświetlenia ekranowego daje wygląd, a nie geometrię matrycy czy zmierzoną głębokość reliefu. Poradnik konturu przez morfologię SVG wyjaśnia inny efekt granic oparty na filtrze bez traktowania go jak odtworzonych ścieżek.

Jeśli logo istnieje tylko jako PNG lub JPG, zwektoryzuj je w PerfectVector, sprawdź odzyskany kontur zewnętrzny i otwór oraz zachowaj czysty płaski wzorzec przed dodaniem oświetlenia w swoim procesie SVG. Usługa odzyskuje geometrię wektorową; ten potok rozproszony/lustrzany jest osobnym utworzonym efektem wyświetlania. Jeśli masz już wzorzec wektorowy, zastosuj i sprawdź filtr bezpośrednio.

Najczęstsze pytania

Czy filtry oświetlenia SVG mogą sprawić, że logo wygląda na wytłoczone? Mogą symulować cienie i rozbłyski na podstawie pola wysokości opartego na alfa. Renderowany efekt nie tworzy fizycznego reliefu, dodatkowych konturów ścieżek ani pliku matrycy produkcyjnej.

Dlaczego efekt oświetlenia SVG wypełnia przezroczysty otwór? Surowa mapa światła rozproszonego jest nieprzezroczysta w całym obszarze filtra. Połącz światło z kolorem źródła i zakończ kompozycją in z oryginalnym SourceAlpha, aby ograniczyć efekt do pierwotnej sylwetki.

Czym różni się oświetlenie rozproszone i lustrzane SVG? Rozproszone dostarcza szerokiego oświetlenia do cieniowania oryginalnego koloru. Lustrzane dostarcza składowej odbicia dodawanej jako połysk. Oba używają wejściowego alfa jako mapy wypukłości i zależą od wybranego światła oraz ustawień powierzchni.

Czy surfaceScale zmienia ścieżkę mojego logo? Nie. Zmienia skalę wysokości w obliczeniach oświetlenia. W naszych dwóch kontrolach rozproszonych dane ścieżki pozostały identyczne, a renderowany kontrast krawędzi zmienił się.

Źródła

1. MDN feDiffuseLighting — Wejściowa mapa wypukłości alfa i nieprzezroczysty wynik światła rozproszonego.
2. MDN feGaussianBlur — Zmiękczone wejście i kwestie obszaru filtra.
3. MDN feComposite — Arytmetyczne mnożenie/dodawanie i ograniczanie źródłowym alfa.
4. MDN color-interpolation-filters — Domyślne linearRGB operacji filtrów.
5. MDN feSpecularLighting — Składowa odbicia i jej ustawienia.
6. MDN feDistantLight — Źródło światła dla obu prymitywów oświetlenia.
7. MDN surfaceScale — Skala wysokości powierzchni do obliczeń.
8. Specyfikacja oświetlenia Filter Effects — Alfa oświetlenia, jednostki kątów i obliczenia sąsiednich próbek.