Jak zastosować przezroczystość do SVG

Grafiki SVG z programu Adobe Illustrator CC rzadko są przekazywane projektantom cyfrowym z tłem. Zwykle grafika unosi się nad tłem istniejącym w witrynie, aplikacji, animacji lub w kontekście interaktywnym.

Przed omówieniem tego, co wiąże się z wybijaniem tła grafiki SVG, skup się na zastosowaniu przezroczystości do grafiki SVG. Musisz zdefiniować krycie kompozycji za pomocą panelu Przezroczystość. Na przykład do żółtego kształtu na rysunku zastosowano 50-procentową przezroczystość i widać efekt przezroczystości. I tak, ten obraz jest plikiem SVG, ze wszystkimi lekkimi, szybko ładującymi się i nieskończenie skalowalnymi funkcjami wbudowanymi w SVG.

Półprzezroczysty kształt SVG na kolorowym tle.

Jak wyprowadzać pliki SVG z przezroczystym tłem

Projektanci są przyzwyczajeni do myślenia w kategoriach tła, które jest albo przezroczyste, albo pozostaje widoczne. Myślimy o wyrwaniu tła. Obrazy PNG i obrazy GIF działają w ten sposób — albo tworzysz z tłem, albo wybierasz przezroczyste tło w programie, takim jak Illustrator lub Photoshop, aby usunąć to tło.

W przypadku plików GIF i PNG można mieć jeden przezroczysty kolor, który umożliwia wyświetlanie kolorów tła lub obrazów na stronach internetowych. Ale logika wycinania tła jest inna w pliku SVG niż w przypadku PNG i GIF. Zasadniczo nie ma czegoś takiego jak grafika SVG, która ma nieprzezroczyste tło, ponieważ nie ma tła. Innymi słowy: domyślnie grafiki SVG zapisują i eksportują bez tła.

Więc w czym problem? Cóż, łatwo przypadkowo otrzymać przezroczyste tło podczas zapisywania lub eksportowania plików SVG! Poniższy rysunek może mieć białe tło lub może mieć przezroczyste tło. Nie można tego stwierdzić po prostu patrząc na ekran programu Illustrator; musisz wybrać Widok → Pokaż siatkę przezroczystości.

Ta grafika może mieć białe tło lub może nie mieć tła.

Po włączeniu siatki przezroczystości, jak pokazano, możesz zobaczyć, że ptak ma za sobą biały prostokąt, a białe tło „będzie pasować” do grafiki, jeśli zapiszesz plik jako SVG lub wyeksportujesz go jako SVG.

Przeglądając siatkę przezroczystości, za grafiką pojawia się biały prostokąt.

Pozwólcie, że podkreślę i rzucę światło na to z innej strony. Kiedy przechodzę do eksportowania tego obrazu jako SVG, pokazane okno dialogowe Eksportuj dla ekranów nie ma opcji wyboru koloru przezroczystości.

Nie możesz wybrać koloru przezroczystości w SVG, ponieważ nie ma koloru tła.

Często spotykam projektantów, którzy nalegają na umieszczenie prostokąta tła za grafiką przeznaczoną do SVG, aby mogli zobaczyć, jak grafika będzie wyglądać po tle koloru w docelowym medium (takim jak strona internetowa lub aplikacja). W porządku, ostrzegam ich, o ile pamiętasz o usunięciu tego prostokąta tła podczas zapisywania lub eksportowania SVG. A w dzisiejszym świecie wysokiego ciśnienia, wysokiej produktywności i szybkich zmian, kto potrzebuje jeszcze jednej rzeczy do zapamiętania?

Lepszym rozwiązaniem jest zdefiniowanie „siatki” przezroczystości za pomocą jednego koloru, który pasuje do otoczenia, w którym zostanie umieszczona grafika. Dlaczego umieszczam siatkę w cudzysłowie? Ponieważ ta technika oszukuje: za jej pomocą definiujesz oba kolory siatki jako ten sam kolor, skutecznie symulując kolor strony internetowej lub tła aplikacji.

Aby użyć tej techniki do utworzenia niestandardowego tła podczas tworzenia grafiki SVG, wykonaj następujące kroki:

Wybierz Plik→Ustawienia dokumentu.

Na karcie Ogólne znajdź sekcję Opcje przezroczystości i nadruku.
Żądane zmiany są kontrolowane w tej sekcji okna dialogowego.
Nie martw się o zdefiniowanie rozmiaru siatki, ponieważ skutecznie rezygnujesz z siatki.

W sekcji Siatka przezroczystości okna dialogowego kliknij pierwszy z dwóch paneli kolorów siatki i wybierz kolor tła, używając jednej z różnych palet kolorów w wyskakującym okienku Kolory przedstawionym na poniższym rysunku.
Nawiasem mówiąc, żadna z tych palet kolorów nie jest szczególnie przyjazna cyfrowo. Nie ma palety dla RGBA, szesnastkowych lub innych standardowych formatów kolorów internetowych, ale zakraplacz kolorów może pomóc w uzyskaniu odpowiedniego koloru tła.

Definiowanie koloru tła podglądu za pomocą siatki przezroczystości.

Wybierz drugi z dwóch paneli kolorów siatki i przypisz do niego ten sam kolor.
Pamiętaj, że możesz użyć zakraplacza do selektora kolorów, aby pobrać ten kolor.

Kliknij OK w oknie dialogowym Ustawienia dokumentu.

Wszystko, co zrobiłem w poprzednim zestawie kroków, to zdefiniowanie sposobu wyświetlania siatki przezroczystości, gdy jest ona włączona . Jeśli więc siatka przezroczystości nie jest włączona, wybierz Widok → Siatka przezroczystości.

Na tym rysunku wybrałem obszar roboczy z grafiką i wyświetlam podgląd projektu na symulowanym kolorze tła.

Podgląd wyjściowego koloru tła za pomocą niestandardowej siatki przezroczystości.

Zastosuj efekty przezroczystości do SVG

Po zastosowaniu do grafiki SVG przezroczystości (takiej jak krycie 50 procent) lub efektów przezroczystości, takich jak wypalanie koloru, przyciemnianie lub mnożenie, efekty te zachowują skalowalność SVG.

Ten rysunek przedstawia tę samą grafikę — trzy półprzezroczyste pomarańczowe prostokąty — wyeksportowaną jako plik PNG (u góry) i SVG. Możesz zobaczyć, jak pogarsza się jakość pliku PNG, gdy powiększam go w przeglądarce. To, czego nie widać, to to, że plik PNG jest prawie dwa razy większy niż SVG.

Porównanie wyjścia PNG (u góry) z SVG przy zastosowaniu przezroczystości

Oto podsumowanie korzyści płynących z używania SVG do efektów przezroczystości:

• Rozmiar pliku jest jakościowo mniejszy.
• Twórca stron internetowych lub aplikacji może dostosować lub edytować wartości przezroczystości i przypisać interaktywność.
• Obraz i przezroczystość nie ulegną pogorszeniu bez względu na to, jak bardzo plik zostanie powiększony.

Nawiasem mówiąc, jeśli jesteś ciekawy, jak wygląda wygenerowany kod SVG dla tego zestawu prostokątów i jak łatwo może z nim pracować programista WWW lub aplikacja, oto kod dla pierwszego z trzech pól SVG , z zastosowanym kryciem 60 procent:

<="" kod="">