Sådan anvender du gennemsigtighed på SVGer

SVG-grafik fra Adobe Illustrator CC afleveres sjældent til digitale designere med baggrunde. Normalt svæver grafikken over den baggrund, der findes i webstedet, appen, animationen eller den interaktive kontekst.

Før du diskuterer, hvad der er involveret i at slå baggrunden bag SVG-grafik ud, skal du fokusere på at anvende gennemsigtighed til SVG-grafik. Du skal definere illustrationens uigennemsigtighed ved hjælp af panelet Gennemsigtighed. For eksempel er der påført 50 procent gennemsigtighed på den gule form i figuren, og du kan se gennemsigtigheden i kraft. Og ja, det billede er en SVG-fil med alle de lette, hurtig-indlæsende og uendeligt skalerbare funktioner indbygget i SVG.

En semi-ugennemsigtig SVG-form oven på en farvet baggrund.

Sådan udsender du SVG'er med gennemsigtige baggrunde

Designere er vant til at tænke i baggrunde, der enten gøres gennemsigtige eller forbliver synlige. Vi tænker på at slå en baggrund ud. PNG-billeder og GIF-billeder fungerer sådan - enten opretter du med en baggrund, eller du vælger en gennemsigtig baggrund i et program som Illustrator eller Photoshop for at slå den baggrund ud.

Med GIF'er og PNG'er kan du have én gennemsigtig farve, der tillader baggrundsfarverne eller billederne at blive vist på websider. Men logikken i at slå baggrunden ud er anderledes i en SVG-fil end med PNG'er og GIF'er. Grundlæggende er der ikke sådan noget som en SVG-grafik, der har en ikke-gennemsigtig baggrund, fordi der ikke er nogen baggrund. Med andre ord: SVG-grafik gemmer og eksporterer som standard uden baggrund.

Så hvad er problemet? Nå, det er nemt ved et uheld at ende med en gennemsigtig baggrund, når du gemmer eller eksporterer SVG-filer! Følgende figur kan have en hvid baggrund, eller den kan have en gennemsigtig baggrund. Du kan ikke se bare ved at se på Illustrator-skærmen; du skal vælge Vis → Vis gennemsigtighedsgitter.

Denne grafik kan have en hvid baggrund, eller den har muligvis ingen baggrund.

Med Transparency Grid aktiveret, som vist, kan du se, at fuglen har et hvidt rektangel bag sig, og den hvide baggrund vil "gå med" grafikken, hvis du gemmer filen som en SVG eller eksporterer den som en SVG.

Ved at se gennemsigtighedsgitteret afsløres et hvidt rektangel bag grafikken.

Lad mig understrege og kaste lys over dette fra en anden vinkel. Når jeg går for at eksportere dette billede som en SVG, har dialogboksen Eksport til skærme, vist, ikke en mulighed for at vælge en gennemsigtighedsfarve.

Du kan ikke vælge en gennemsigtighedsfarve i SVG, fordi der ikke er nogen baggrundsfarve.

Jeg støder ofte på designere, der insisterer på at sætte et baggrundsrektangel bag deres SVG-bestemte illustrationer, så de kan se, hvordan grafikken vil se ud, når den er baggrund af en farve i målmediet (såsom en webside eller app). Det er okay, jeg advarer dem, så længe du husker at fjerne det baggrundsrektangel, når du gemmer eller eksporterer SVG. Og hvem har brug for en ting mere at huske i nutidens højtrykte, højproduktive og hurtige omsætningsverden?

En bedre løsning er at definere et gennemsigtigt "gitter" med en enkelt farve, der matcher det miljø, som grafikken skal placeres i. Hvorfor sætter jeg gitter i anførselstegn? Fordi denne teknik snyder: Med den definerer du begge gitterfarver som den samme farve, hvilket effektivt simulerer en webside eller en app-baggrundsfarve.

For at bruge denne teknik til at skabe en tilpasset baggrund, mens du udvikler SVG-illustrationer, skal du følge disse trin:

Vælg Filer → Dokumentopsætning.

Find afsnittet Indstillinger for gennemsigtighed og overtryk på fanen Generelt.
De ændringer, du ønsker, styres i denne sektion af dialogboksen.
Du skal ikke bekymre dig om at definere gitterstørrelsen, fordi du effektivt undværer gitteret.

I sektionen Transparency Grid i dialogen skal du klikke på det første af de to gitterfarvepaneler og vælge en baggrundsfarve ved at bruge en af ​​de forskellige farvepaletter i Farver-pop-op-vinduet vist i følgende figur.
Ingen af ​​disse farvepaletter er i øvrigt særligt digitalvenlige. Der er ingen palette til RGBA, hexadecimal eller andre standard webfarveformater, men farvevælgeren pipette kan hjælpe dig med at få den baggrundsfarve, du sigter efter at matche.

Definering af en forhåndsvisningsbaggrundsfarve med et gennemsigtighedsgitter.

Vælg det andet af de to gitterfarvepaneler, og tildel den samme farve.
Husk, du kan bruge farvevælgeren pipette til at få fat i den farve.

Klik på OK i dialogboksen Dokumentopsætning.

Alt, hvad jeg har gjort i det foregående sæt af trin, var at definere, hvordan gennemsigtighedsgitteret vises, når det er aktiveret . Så hvis dit Transparency Grid ikke er aktiveret, skal du vælge Vis → Transparency Grid.

I denne figur valgte jeg tegnebrættet med grafikken, og jeg forhåndsviser projektet mod en simuleret baggrundsfarve.

Forhåndsvisning af outputbaggrundsfarven med et brugerdefineret gennemsigtighedsgitter.

Anvend gennemsigtighedseffekter på SVG

Når gennemsigtighed (såsom 50 procent opacitet) eller gennemsigtighedseffekter såsom farvebrænding, mørkere eller multiplicering anvendes på SVG-grafik, bevarer disse effekter skalerbarheden af ​​SVG.

Denne figur viser den samme grafik – tre semitransparente orange rektangler – eksporteret som en PNG-fil (øverst) og en SVG. Du kan se, hvordan PNG-filen forringes i kvalitet, når jeg zoomer ind på den i en browser. Hvad du ikke kan se er, at PNG-filen er næsten dobbelt så stor som SVG.

Sammenligning af PNG-output (øverst) med SVG, når der anvendes gennemsigtighed

Her er en oversigt over fordelene ved at bruge SVG til gennemsigtighedseffekter:

• Filstørrelsen er kvalitativt mindre.
• En web- eller appudvikler kan justere eller redigere gennemsigtighedsværdierne og tildele interaktivitet.
• Billedet og gennemsigtigheden forringes ikke, uanset hvor meget filen er zoomet ind på.

Hvis du i øvrigt er nysgerrig efter, hvordan den genererede SVG-kode til dette sæt rektangler ser ud, og hvor nemt det er for en web- eller appudvikler at arbejde med det, er her koden til den første af de tre SVG-bokse , med 60 procent opacitet anvendt:

<="" code="">