Jak použít průhlednost na SVG

Grafika SVG z aplikace Adobe Illustrator CC je zřídka předávána digitálním návrhářům s pozadím. Normálně se grafika vznáší nad jakýmkoli pozadím na webu, aplikaci, animaci nebo interaktivním kontextu.

Než začnete diskutovat o tom, co obnáší odstranění pozadí za kresbou SVG, zaměřte se na použití průhlednosti na grafiku SVG. Musíte definovat neprůhlednost kresby pomocí panelu Průhlednost. Například 50procentní průhlednost byla aplikována na žlutý tvar na obrázku a můžete vidět průhlednost v platnosti. A ano, tento obrázek je soubor SVG se všemi lehkými, rychle se načítajícími a nekonečně škálovatelnými funkcemi zabudovanými do SVG.

Poloneprůhledný tvar SVG na barevném pozadí.

Jak vytisknout SVG s průhledným pozadím

Designéři jsou zvyklí uvažovat v pojmech pozadí, která jsou buď průhledná, nebo zůstávají viditelná. Přemýšlíme o vyklepání pozadí. Obrázky PNG a GIF fungují takto – buď vytváříte s pozadím, nebo si vyberete průhledné pozadí v programu, jako je Illustrator nebo Photoshop, abyste toto pozadí vyklepali.

U obrázků GIF a PNG můžete mít jednu průhlednou barvu, která umožní, aby se barvy pozadí nebo obrázky zobrazovaly na webových stránkách. Ale logika vyřazení pozadí je v souboru SVG jiná než u PNG a GIF. V podstatě neexistuje nic takového jako grafika SVG, která má neprůhledné pozadí, protože tam žádné pozadí není. Jinými slovy: ve výchozím nastavení se grafika SVG ukládá a exportuje bez pozadí.

Tak co je za problém? Při ukládání nebo exportu souborů SVG je snadné náhodně skončit s průhledným pozadím! Následující obrázek může mít bílé pozadí nebo může mít průhledné pozadí. Pouhým pohledem na obrazovku aplikace Illustrator to nepoznáte; musíte vybrat Zobrazit → Zobrazit mřížku průhlednosti.

Tato grafika může mít bílé pozadí nebo nemusí mít žádné pozadí.

Když je povolena mřížka průhlednosti, jak je znázorněno, můžete vidět, že pták má za sebou bílý obdélník a že bílé pozadí bude „ladit“ s grafikou, pokud soubor uložíte jako SVG nebo jej exportujete jako SVG.

Zobrazení mřížky průhlednosti odhalí za grafikou bílý obdélník.

Dovolte mi zdůraznit a osvětlit to z jiného úhlu. Když půjdu exportovat tento obrázek jako SVG, zobrazené dialogové okno Export for Screens nemá možnost výběru barvy průhlednosti.

V SVG si nemůžete vybrat barvu průhlednosti, protože tam není žádná barva pozadí.

Často se setkávám s designéry, kteří trvají na tom, že za své kresby určené pro SVG umístí obdélník na pozadí, aby viděli, jak bude grafika vypadat, když ji na pozadí použije barva v cílovém médiu (jako je webová stránka nebo aplikace). To je v pořádku, varuji je, pokud si pamatujete odstranit tento obdélník na pozadí, když uložíte nebo exportujete SVG. A kdo potřebuje v dnešním světě vysokého tlaku, vysoké produktivity a rychlého obratu ještě jednu věc, kterou by si měl pamatovat?

Lepším řešením je definovat průhlednou „mřížku“ s jednou barvou, která odpovídá prostředí, do kterého bude grafika umístěna. Proč dávám mřížku do uvozovek? Protože tato technika podvádí: Pomocí ní definujete obě barvy mřížky jako stejnou barvu, čímž efektivně simulujete barvu pozadí webové stránky nebo aplikace.

Chcete-li použít tuto techniku ​​k vytvoření vlastního pozadí při vývoji kresby SVG, postupujte takto:

Vyberte Soubor → Nastavení dokumentu.

Na kartě Obecné najděte část Možnosti průhlednosti a přetisku.
V této části dialogu se ovládají požadované změny.
Nedělejte si starosti s definováním velikosti mřížky, protože efektivně ušetříte mřížku.

V části Mřížka průhlednosti v dialogovém okně klikněte na první ze dvou panelů barev mřížky a vyberte barvu pozadí pomocí jedné z různých palet barev v rozbalovacím okně Barvy, jak je znázorněno na následujícím obrázku.
Mimochodem, žádná z těchto barevných palet není nijak zvlášť digitální. Neexistuje žádná paleta pro RGBA, hexadecimální nebo jiné standardní formáty webových barev, ale kapátko pro výběr barvy vám může pomoci získat barvu pozadí, ke které se chcete připojit.

Definování barvy pozadí náhledu pomocí mřížky průhlednosti.

Vyberte druhý ze dvou panelů barev mřížky a přiřaďte mu stejnou barvu.
Pamatujte, že k zachycení této barvy můžete použít kapátko pro výběr barvy.

Klepněte na tlačítko OK v dialogovém okně Nastavení dokumentu.

Vše, co jsem udělal v předchozí sadě kroků, bylo definovat, jak se mřížka průhlednosti zobrazí, když je povolena . Pokud tedy vaše mřížka průhlednosti není povolena, vyberte Zobrazit→Mřížka průhlednosti.

Na tomto obrázku jsem vybral kreslicí plátno s grafikou a prohlížím projekt na simulované barvě pozadí.

Náhled barvy pozadí výstupu pomocí vlastní mřížky průhlednosti.

Aplikujte na SVG efekty průhlednosti

Když se na grafiku SVG aplikuje průhlednost (například 50procentní krytí) nebo efekty průhlednosti, jako je vypálení, ztmavení nebo násobení barev, tyto efekty si zachovají škálovatelnost SVG.

Tento obrázek ukazuje stejnou grafiku – tři poloprůhledné oranžové obdélníky – exportovanou jako soubor PNG (nahoře) a SVG. Můžete vidět, jak se snižuje kvalita souboru PNG, když jej přiblížím v prohlížeči. Co nevidíte, je, že soubor PNG je téměř dvakrát větší než SVG.

Porovnání výstupu PNG (nahoře) s SVG při použití průhlednosti

Zde je souhrn výhod použití SVG pro efekty průhlednosti:

• Velikost souboru je kvalitativně menší.
• Vývojář webu nebo aplikace může vyladit nebo upravit hodnoty průhlednosti a přiřadit interaktivitu.
• Obraz a průhlednost se nezhorší bez ohledu na to, jak moc je soubor přiblížen.

Mimochodem, pokud vás zajímá, jak vypadá vygenerovaný SVG kód pro tuto sadu obdélníků a jak snadno s ním může vývojář webu nebo aplikace pracovat, zde je kód pro první ze tří políček SVG s 60procentní neprůhledností:

<="" code="">