Slik bruker du åpenhet på SVG-er

SVG-grafikk fra Adobe Illustrator CC blir sjelden overlevert til digitale designere med bakgrunn. Normalt flyter grafikken over den bakgrunnen som finnes i nettstedet, appen, animasjonen eller den interaktive konteksten.

Før du diskuterer hva som er involvert i å slå ut bakgrunnen bak SVG-grafikk, fokuserer du på å bruke åpenhet til SVG-grafikk. Du må definere opasiteten til kunstverk ved hjelp av Transparency-panelet. For eksempel har 50 prosent gjennomsiktighet blitt brukt på den gule formen i figuren, og du kan se gjennomsiktigheten i kraft. Og ja, det bildet er en SVG-fil, med alle de lette, hurtiglastende og uendelig skalerbare funksjonene innebygd i SVG.

En semi-ugjennomsiktig SVG-form på toppen av en farget bakgrunn.

Hvordan sende ut SVG-er med gjennomsiktig bakgrunn

Designere er vant til å tenke i form av bakgrunner som enten gjøres transparente eller forblir synlige. Vi tenker på å slå ut en bakgrunn. PNG-bilder og GIF-bilder fungerer slik – enten lager du med bakgrunn eller velger en gjennomsiktig bakgrunn i et program som Illustrator eller Photoshop for å slå ut bakgrunnen.

Med GIF-er og PNG-er kan du ha én gjennomsiktig farge som lar bakgrunnsfargene eller bildene vises på nettsider. Men logikken med å slå ut bakgrunnen er annerledes i en SVG-fil enn med PNG-er og GIF-er. I hovedsak er det ikke noe slikt som en SVG-grafikk som har en ugjennomsiktig bakgrunn fordi det ikke er noen bakgrunn. Med andre ord: som standard lagrer og eksporterer SVG-grafikk uten bakgrunn.

Så hva er problemet? Vel, det er lett å tilfeldigvis ende opp med en gjennomsiktig bakgrunn når du lagrer eller eksporterer SVG-filer! Følgende figur kan ha en hvit bakgrunn, eller den kan ha en gjennomsiktig bakgrunn. Du kan ikke se bare ved å se på Illustrator-skjermen; du må velge Vis → Vis gjennomsiktighetsnett.

Denne grafikken kan ha en hvit bakgrunn, eller den har kanskje ingen bakgrunn.

Med Transparency Grid aktivert, som vist, kan du se at fuglen har et hvitt rektangel bak seg, og den hvite bakgrunnen vil "gå med" grafikken hvis du lagrer filen som en SVG eller eksporterer den som en SVG.

Når du ser på gjennomsiktighetsnettet, avsløres et hvitt rektangel bak grafikken.

La meg understreke og kaste lys over dette fra en annen vinkel. Når jeg går for å eksportere dette bildet som en SVG, har ikke dialogboksen Eksporter for skjermer, vist, et alternativ for å velge en gjennomsiktighetsfarge.

Du kan ikke velge en gjennomsiktighetsfarge i SVG fordi det ikke er noen bakgrunnsfarge.

Jeg møter ofte designere som insisterer på å sette et bakgrunnsrektangel bak deres SVG-bestemte kunstverk slik at de kan se hvordan grafikken vil se ut når bakgrunnen er av en farge i målmediet (som en nettside eller app). Det er greit, jeg advarer dem, så lenge du husker å fjerne bakgrunnsrektangelet når du lagrer eller eksporterer SVG. Og i dagens høytrykks-, høyproduktivitets- og raske omløpsverden, hvem trenger en ting til å huske?

En bedre løsning er å definere et "rutenett" for gjennomsiktighet med en enkelt farge som passer til miljøet som grafikken skal plasseres i. Hvorfor setter jeg rutenett i anførselstegn? Fordi denne teknikken jukser: Med den definerer du begge rutenettfargene som samme farge, og simulerer effektivt en nettside eller en appbakgrunnsfarge.

For å bruke denne teknikken til å lage en tilpasset bakgrunn mens du utvikler SVG-grafikk, følg disse trinnene:

Velg Fil → Dokumentoppsett.

I kategorien Generelt finner du delen Alternativer for gjennomsiktighet og overtrykk.
Endringene du ønsker kontrolleres i denne delen av dialogboksen.
Ikke bekymre deg for å definere rutenettstørrelsen, fordi du slipper rutenettet effektivt.

I Transparency Grid-delen av dialogen klikker du på det første av de to rutenettfargepanelene og velger en bakgrunnsfarge ved å bruke en av de forskjellige fargepalettene i Farger-popup-vinduet vist i følgende figur.
Ingen av disse fargepalettene er spesielt digitalvennlige, forresten. Det er ingen palett for RGBA, heksadesimale eller andre standard nettfargeformater, men fargevelgeren pipette kan hjelpe deg med å få bakgrunnsfargen du ønsker å matche.

Definere en forhåndsvisningsbakgrunnsfarge med et Transparency Grid.

Velg det andre av de to rutenettfargepanelene, og tilordne samme farge til det.
Husk at du kan bruke pipettepen for fargevelger for å ta tak i den fargen.

Klikk OK i dialogboksen Dokumentoppsett.

Alt jeg har gjort i det forrige settet med trinn var å definere hvordan Transparency Grid vises når det er aktivert . Så hvis Transparency Grid ikke er aktivert, velg View → Transparency Grid.

I denne figuren valgte jeg tegnebrettet med grafikken, og jeg forhåndsviser prosjektet mot en simulert bakgrunnsfarge.

Forhåndsvisning av utdatabakgrunnsfargen med et tilpasset Transparency Grid.

Bruk gjennomsiktighetseffekter på SVG

Når gjennomsiktighet (som 50 prosent opasitet) eller gjennomsiktighetseffekter som fargebrenning, mørkere eller multiplisere brukes på SVG-grafikk, beholder disse effektene skalerbarheten til SVG.

Denne figuren viser den samme grafikken – tre halvtransparente oransje rektangler – eksportert som en PNG-fil (øverst) og en SVG. Du kan se hvordan PNG-filen forringes i kvalitet når jeg zoomer inn på den i en nettleser. Det du ikke kan se er at PNG-filen er nesten dobbelt så stor som SVG.

Sammenligner PNG-utdata (øverst) med SVG når åpenhet er brukt

Her er en oppsummering av fordelene ved å bruke SVG for gjennomsiktighetseffekter:

• Filstørrelsen er kvalitativt mindre.
• En nett- eller apputvikler kan justere eller redigere gjennomsiktighetsverdiene og tilordne interaktivitet.
• Bildet og gjennomsiktigheten vil ikke forringes uansett hvor mye filen zoomes inn på.

Forresten, hvis du er nysgjerrig på hvordan den genererte SVG-koden for dette settet med rektangler ser ut, og hvor enkelt det er for en nett- eller apputvikler å jobbe med den, her er koden for den første av de tre SVG-boksene , med 60 prosent opasitet brukt:

<="" code="">