Ako použiť transparentnosť na SVG

Grafika SVG z Adobe Illustrator CC sa zriedka odovzdáva digitálnym dizajnérom s pozadím. Normálne sa grafika vznáša nad akýmkoľvek pozadím, ktoré existuje na webovej lokalite, v aplikácii, animácii alebo v interaktívnom kontexte.

Pred diskusiou o tom, čo zahŕňa odstránenie pozadia za kresbou SVG, sa zamerajte na použitie priehľadnosti na grafiku SVG. Nepriehľadnosť kresby musíte definovať pomocou panela Priehľadnosť. Napríklad na žltý tvar na obrázku bola použitá 50-percentná priehľadnosť a môžete vidieť, že priehľadnosť funguje. A áno, tento obrázok je súbor SVG so všetkými ľahkými, rýchlo sa načítajúcimi a nekonečne škálovateľnými funkciami zabudovanými do SVG.

Polonepriehľadný tvar SVG na farebnom pozadí.

Ako vytlačiť SVG s priehľadným pozadím

Dizajnéri sú zvyknutí myslieť na pozadia, ktoré sú buď priehľadné, alebo zostávajú viditeľné. Premýšľame o vyrazení pozadia. Obrázky PNG a obrázky GIF fungujú takto – buď vytvoríte s pozadím, alebo si vyberiete priehľadné pozadie v programe, ako je Illustrator alebo Photoshop, aby ste toto pozadie odstránili.

S GIF a PNG môžete mať jednu priehľadnú farbu, ktorá umožní, aby sa farby pozadia alebo obrázky zobrazovali na webových stránkach. Ale logika vyradenia pozadia je v súbore SVG iná ako pri PNG a GIF. V podstate neexistuje nič také ako grafika SVG, ktorá má nepriehľadné pozadie, pretože tam nie je žiadne pozadie. Inými slovami: v predvolenom nastavení sa grafika SVG ukladá a exportuje bez pozadia.

Takže, v čom je problém? Pri ukladaní alebo exportovaní súborov SVG je ľahké náhodne skončiť s priehľadným pozadím! Nasledujúci obrázok môže mať biele pozadie alebo môže mať priehľadné pozadie. Nedá sa to zistiť len pohľadom na obrazovku aplikácie Illustrator; musíte vybrať Zobraziť → Zobraziť mriežku priehľadnosti.

Táto grafika môže mať biele pozadie alebo nemusí mať žiadne pozadie.

Keď je povolená mriežka priehľadnosti, ako je znázornené, môžete vidieť, že vták má za sebou biely obdĺžnik a že biele pozadie bude „ladiť“ s grafikou, ak súbor uložíte ako SVG alebo ho exportujete ako SVG.

Pri pohľade na mriežku priehľadnosti sa za grafikou objaví biely obdĺžnik.

Dovoľte mi zdôrazniť a osvetliť to z iného uhla. Keď idem exportovať tento obrázok ako SVG, zobrazené dialógové okno Export for Screens nemá možnosť výberu farby priehľadnosti.

V SVG si nemôžete vybrať farbu priehľadnosti, pretože neexistuje žiadna farba pozadia.

Často sa stretávam s dizajnérmi, ktorí trvajú na umiestnení obdĺžnika na pozadí za ich predlohu určenú pre SVG, aby videli, ako bude grafika vyzerať, keď bude mať pozadie v cieľovom médiu (ako je webová stránka alebo aplikácia). To je v poriadku, varujem ich, pokiaľ si nezabudnete pri ukladaní alebo exportovaní SVG odstrániť tento obdĺžnik na pozadí. A kto potrebuje v dnešnom svete pod vysokým tlakom, vysokou produktivitou a rýchlym obratom ešte jednu vec?

Lepším riešením je definovať priehľadnú „mriežku“ s jednou farbou, ktorá zodpovedá prostrediu, do ktorého bude grafika umiestnená. Prečo dávam mriežku do úvodzoviek? Pretože táto technika podvádza: Pomocou nej definujete obe farby mriežky ako rovnakú farbu, čím efektívne simulujete farbu pozadia webovej stránky alebo aplikácie.

Ak chcete použiť túto techniku ​​na vytvorenie vlastného pozadia počas vývoja kresby SVG, postupujte takto:

Vyberte Súbor → Nastavenie dokumentu.

Na karte Všeobecné nájdite časť Možnosti priehľadnosti a pretlače.
V tejto časti dialógového okna sa ovládajú požadované zmeny.
Nerobte si starosti s definovaním veľkosti mriežky, pretože efektívne ušetríte mriežku.

V časti Priehľadná mriežka dialógového okna kliknite na prvý z dvoch panelov farieb mriežky a vyberte farbu pozadia pomocou jednej z rôznych farebných paliet vo vyskakovacom okne Farby znázornenom na nasledujúcom obrázku.
Mimochodom, žiadna z týchto farebných paliet nie je obzvlášť digitálna. Neexistuje žiadna paleta pre RGBA, hexadecimálne alebo iné štandardné webové formáty farieb, ale kvapkadlo na výber farieb vám môže pomôcť získať farbu pozadia, ktorú chcete zladiť.

Definovanie farby pozadia náhľadu pomocou mriežky priehľadnosti.

Vyberte druhý z dvoch panelov farieb mriežky a priraďte mu rovnakú farbu.
Nezabudnite, že na uchopenie tejto farby môžete použiť kvapkadlo na výber farby.

Kliknite na tlačidlo OK v dialógovom okne Nastavenie dokumentu.

Všetko, čo som urobil v predchádzajúcej sade krokov, bolo definovať, ako sa mriežka priehľadnosti zobrazí, keď je povolená . Ak teda vaša mriežka priehľadnosti nie je povolená, vyberte Zobraziť→ Mriežka priehľadnosti.

Na tomto obrázku som vybral kresliacu plochu s grafikou a zobrazujem ukážku projektu na simulovanej farbe pozadia.

Zobrazenie ukážky farby pozadia výstupu pomocou vlastnej mriežky priehľadnosti.

Použite efekty priehľadnosti na SVG

Keď sa na grafiku SVG použije priehľadnosť (napríklad 50-percentná nepriehľadnosť) alebo efekty priehľadnosti, ako je vypálenie, stmavenie alebo znásobenie farieb, tieto efekty si zachovajú škálovateľnosť SVG.

Tento obrázok zobrazuje rovnakú grafiku – tri polopriehľadné oranžové obdĺžniky – exportovanú ako súbor PNG (hore) a SVG. Môžete vidieť, ako klesá kvalita súboru PNG, keď si ho priblížim v prehliadači. Čo nevidíte je, že súbor PNG je takmer dvakrát väčší ako SVG.

Porovnanie výstupu PNG (hore) s SVG pri použití priehľadnosti

Tu je súhrn výhod používania SVG pre efekty priehľadnosti:

• Veľkosť súboru je kvalitatívne menšia.
• Vývojár webu alebo aplikácie môže vyladiť alebo upraviť hodnoty priehľadnosti a priradiť interaktivitu.
• Obrázok a priehľadnosť sa nezhoršia bez ohľadu na to, ako veľmi sa súbor priblíži.

Mimochodom, ak ste zvedaví, ako vyzerá vygenerovaný SVG kód pre túto sadu obdĺžnikov a ako ľahko s ním pracuje vývojár webu alebo aplikácie, tu je kód pre prvé z troch políčok SVG s aplikovanou 60-percentnou nepriehľadnosťou:

<="" code="">