Hur man tillämpar transparens på SVG:er

SVG-grafik från Adobe Illustrator CC lämnas sällan ut till digitala designers med bakgrund. Normalt flyter grafiken över vilken bakgrund som helst i webbplatsen, appen, animationen eller interaktiva sammanhang.

Innan du diskuterar vad som är involverat i att slå ut bakgrunden bakom SVG-grafik, fokusera på att tillämpa transparens på SVG-grafik. Du måste definiera opaciteten för konstverk med hjälp av panelen Transparens. Till exempel har 50 procent genomskinlighet applicerats på den gula formen i figuren, och du kan se genomskinligheten. Och ja, den bilden är en SVG-fil, med alla de lätta, snabbladdade och oändligt skalbara funktionerna inbyggda i SVG.

En halvopak SVG-form ovanpå en färgad bakgrund.

Hur man matar ut SVG:er med transparent bakgrund

Designers är vana vid att tänka i termer av bakgrunder som antingen görs transparenta eller förblir synliga. Vi funderar på att slå ut en bakgrund. PNG-bilder och GIF-bilder fungerar så – antingen skapar du med en bakgrund eller så väljer du en transparent bakgrund i ett program som Illustrator eller Photoshop för att slå ut den bakgrunden.

Med GIF och PNG kan du ha en genomskinlig färg som gör att bakgrundsfärgerna eller bilderna kan visas på webbsidor. Men logiken i att slå ut bakgrunden är annorlunda i en SVG-fil än med PNG och GIF. I grund och botten finns det inget sådant som en SVG-grafik som har en icke-transparent bakgrund eftersom det inte finns någon bakgrund. Med andra ord: som standard sparar och exporterar SVG-grafik utan bakgrund.

Så vad är problemet? Tja, det är lätt att av misstag hamna i en genomskinlig bakgrund när du sparar eller exporterar SVG-filer! Följande figur kan ha en vit bakgrund, eller så kan den ha en genomskinlig bakgrund. Du kan inte se bara genom att titta på Illustrator-skärmen; du måste välja Visa → Visa genomskinlighetsrutnät.

Den här bilden kan ha en vit bakgrund eller så kanske den saknar bakgrund.

Med Transparency Grid aktiverat, som visas, kan du se att fågeln har en vit rektangel bakom sig, och den vita bakgrunden kommer att "gå med" grafiken om du sparar filen som en SVG eller exporterar den som en SVG.

När du tittar på genomskinlighetsrutnätet avslöjas en vit rektangel bakom grafiken.

Låt mig betona och belysa detta från en annan vinkel. När jag går för att exportera den här bilden som en SVG, har dialogrutan Exportera för skärmar, som visas, inget alternativ för att välja en genomskinlig färg.

Du kan inte välja en transparensfärg i SVG eftersom det inte finns någon bakgrundsfärg.

Jag stöter ofta på designers som insisterar på att sätta en bakgrundsrektangel bakom deras SVG-destinerade konstverk så att de kan se hur grafiken kommer att se ut när den är bakgrundsfärgad i målmediet (som en webbsida eller app). Det är okej, jag varnar dem, så länge du kommer ihåg att ta bort bakgrundsrektangeln när du sparar eller exporterar SVG. Och vem behöver en sak till att komma ihåg i dagens högtrycks-, högproduktivitets- och snabba omsättningsvärld?

En bättre lösning är att definiera ett "rutnät" för genomskinlighet med en enda färg som matchar miljön där grafiken ska placeras. Varför sätter jag rutnät inom citattecken? Eftersom den här tekniken fuskar: Med den definierar du båda rutnätsfärgerna som samma färg, vilket effektivt simulerar en webbsida eller en appbakgrundsfärg.

För att använda den tekniken för att skapa en anpassad bakgrund medan du utvecklar SVG-konstverk, följ dessa steg:

Välj Arkiv → Dokumentinställningar.

På fliken Allmänt hittar du avsnittet Transparens och övertrycksalternativ.
De ändringar du vill kontrollera kontrolleras i den här delen av dialogrutan.
Oroa dig inte för att definiera rutnätsstorleken eftersom du effektivt undviker rutnätet.

I avsnittet Transparensrutnät i dialogrutan klickar du på den första av de två rutnätsfärgpanelerna och väljer en bakgrundsfärg genom att använda en av de olika färgpaletterna i popup-fönstret Färger som visas i följande figur.
Ingen av dessa färgpaletter är särskilt digitalvänlig, förresten. Det finns ingen palett för RGBA, hexadecimal eller andra vanliga webbfärgsformat, men färgväljaren pipett kan hjälpa dig att få den bakgrundsfärg du vill matcha.

Definiera en bakgrundsfärg för förhandsgranskning med ett genomskinligt rutnät.

Välj den andra av de två rutnätsfärgpanelerna och tilldela samma färg till den.
Kom ihåg att du kan använda färgväljaren pipett för att ta tag i den färgen.

Klicka på OK i dialogrutan Dokumentinställningar.

Allt jag har gjort i de föregående stegen var att definiera hur Transparency Grid visas när det är aktiverat . Så om ditt genomskinlighetsrutnät inte är aktiverat, välj Visa → Genomskinligt rutnät.

I den här figuren valde jag ritytan med grafiken och jag förhandsgranskar projektet mot en simulerad bakgrundsfärg.

Förhandsgranska utdatabakgrundsfärgen med ett anpassat Transparency Grid.

Tillämpa transparenseffekter på SVG

När transparens (som 50 procent opacitet) eller genomskinlighetseffekter som färgbränning, mörkare eller multiplicera tillämpas på SVG-grafik, behåller dessa effekter skalbarheten för SVG.

Den här bilden visar samma grafik – tre halvtransparenta orangea rektanglar – exporterad som en PNG-fil (överst) och en SVG. Du kan se hur PNG-filen försämras i kvalitet när jag zoomar in på den i en webbläsare. Vad du inte kan se är att PNG-filen är nästan dubbelt så stor som SVG.

Jämför PNG-utdata (överst) med SVG när transparens tillämpas

Här är en sammanfattning av fördelarna med att använda SVG för transparenseffekter:

• Filstorleken är kvalitativt mindre.
• En webb- eller apputvecklare kan justera eller redigera transparensvärdena och tilldela interaktivitet.
• Bilden och genomskinligheten kommer inte att försämras oavsett hur mycket filen zoomas in på.

Förresten, om du är nyfiken på hur den genererade SVG-koden för den här uppsättningen rektanglar ser ut och hur lätt det är för en webb- eller apputvecklare att arbeta med den, här är koden för den första av de tre SVG-rutorna , med 60 procents opacitet tillämpad:

<="" code="">