Kuidas SVG-dele läbipaistvust rakendada

Adobe Illustrator CC SVG-graafikat antakse harva üle taustaga digitaalkujundajatele. Tavaliselt hõljub graafika veebisaidil, rakenduses, animatsioonis või interaktiivses kontekstis olemasoleva tausta kohal.

Enne kui arutlete selle üle, mis on seotud SVG kunstiteose tausta kaotamisega, keskenduge SVG-graafika läbipaistvuse rakendamisele. Läbipaistvuse paneeli abil peate määratlema kunstiteose läbipaistmatuse. Näiteks joonisel olevale kollasele kujule on rakendatud 50 protsenti läbipaistvust ja näete läbipaistvuse mõju. Ja jah, see pilt on SVG-fail, millel on kõik SVG-sse sisseehitatud kerged, kiiresti laaditavad ja lõputult skaleeritavad funktsioonid.

Poolläbipaistmatu SVG kujund värvilise tausta peal.

Kuidas väljastada läbipaistva taustaga SVG-sid

Disainerid on harjunud mõtlema taustale, mis tehakse läbipaistvaks või jääb nähtavaks. Mõtleme tausta välja löömisele. PNG-pildid ja GIF-pildid töötavad nii – loote taustaga või valite tausta eemaldamiseks läbipaistva tausta mõnes programmis (nt Illustrator või Photoshop).

GIF-ide ja PNG-de puhul saate kasutada ühte läbipaistvat värvi, mis võimaldab taustavärvidel või piltidel veebilehtedel läbi näha. Kuid tausta väljalöömise loogika on SVG-failis teistsugune kui PNG- ja GIF-failide puhul. Põhimõtteliselt pole sellist asja nagu SVG-graafika, millel oleks läbipaistmatu taust, kuna taust puudub. Teisisõnu: vaikimisi salvestatakse ja eksporditakse SVG-graafika ilma taustata.

Niisiis, milles probleem? Noh, SVG-failide salvestamisel või eksportimisel on lihtne kogemata saada läbipaistev taust! Järgmisel joonisel võib olla valge taust või läbipaistev taust. Lihtsalt Illustratori ekraani vaadates ei saa aru; peate valima Vaade → Näita läbipaistvusruudustikku.

Sellel graafikul võib olla valge taust või taustata.

Kui läbipaistvusruudustik on lubatud, nagu näidatud, näete, et linnu taga on valge ristkülik ja kui salvestate faili SVG-vormingus või ekspordite selle SVG-vormingus, "läheb see graafikaga kaasa".

Läbipaistvusruudustiku vaatamisel ilmneb graafika taga valge ristkülik.

Lubage mul rõhutada ja valgustada seda teise nurga alt. Kui ma ekspordin seda pilti SVG-vormingus, ei ole näidatud dialoogiaknas Ekspordi ekraanidele läbipaistvuse värvi valimiseks.

Te ei saa SVG-s läbipaistvuse värvi valida, kuna taustavärvi pole.

Tihti kohtan disainereid, kes nõuavad oma SVG-le mõeldud kunstiteose taha taustaristküliku lisamist, et nad näeksid, kuidas graafika näeb välja, kui selle taustal on sihtkandja (nt veebileht või rakendus) värv. See on okei, hoiatan neid seni, kuni mäletate SVG-faili salvestamisel või eksportimisel selle taustaristküliku eemaldamist. Ja kes vajab tänapäeva kõrgsurve, suure tootlikkuse ja kiire pöörde maailmas veel üht asja, mida meeles pidada?

Parem lahendus on määratleda läbipaistvuse "ruudustik" ühe värviga, mis sobib keskkonnaga, kuhu graafika paigutatakse. Miks ma panen ruudustiku jutumärkidesse? Kuna see tehnika petab: selle abil määratlete mõlemad ruudustikuvärvid sama värvina, simuleerides tõhusalt veebilehte või rakenduse taustavärvi.

Selle tehnika kasutamiseks kohandatud tausta loomiseks SVG kunstiteose väljatöötamise ajal toimige järgmiselt.

Valige Fail → Dokumendi häälestus.

Vahekaardilt Üldine leidke jaotis Läbipaistvuse ja ületrükkimise suvandid.
Soovitud muudatusi juhitakse selles dialoogi jaotises.
Ärge muretsege ruudustiku suuruse määramise pärast, sest te loobute ruudustikust tõhusalt.

Klõpsake dialoogiakna jaotises Läbipaistvusruudustik esimest kahest ruudustiku värvipaneelist ja valige taustavärv, kasutades ühte erinevatest värvipalettidest järgmisel joonisel näidatud hüpikaknas Värvid.
Muide, ükski neist värvipalettidest pole eriti digisõbralik. RGBA, kuueteistkümnendsüsteemi või muude standardsete veebivärvivormingute jaoks pole paletti, kuid värvivalija tilguti abil saate leida soovitud taustavärvi.

Eelvaate taustavärvi määramine läbipaistvusruudustikuga.

Valige kahest ruudustiku värvipaneelist teine ​​ja määrake sellele sama värv.
Pidage meeles, et saate selle värvi haaramiseks kasutada värvivalijat.

Klõpsake dialoogiaknas Dokumendi häälestus nuppu OK.

Kõik, mida ma eelmiste toimingute kogumi käigus tegin, oli määratleda, kuidas läbipaistvusruudustik kuvatakse, kui see on lubatud . Seega, kui teie läbipaistvusruudustik pole lubatud, valige Vaade → Läbipaistvusvõrk.

Sellel joonisel valisin joonistahvli koos graafikaga ja vaatan projekti simuleeritud taustavärvi taustal.

Väljundi taustavärvi eelvaade kohandatud läbipaistvusruudustikuga.

Rakendage SVG-le läbipaistvusefekte

Kui SVG-graafikale rakendatakse läbipaistvust (nt 50 protsenti läbipaistmatust) või läbipaistvusefekte, nagu värvipõletus, tumenemine või korrutamine, säilitavad need efektid SVG mastaapsuse.

Sellel joonisel on sama graafika – kolm poolläbipaistvat oranži ristkülikut – eksporditud PNG-failina (ülemine) ja SVG-vormingus. Näete, kuidas PNG-faili kvaliteet halveneb, kui ma seda brauseris sisse suumin. Mida te ei näe, on see, et PNG-fail on peaaegu kaks korda suurem kui SVG-fail.

PNG-väljundi (ülemine) võrdlemine SVG-ga, kui rakendatakse läbipaistvust

Siin on kokkuvõte SVG kasutamise eelistest läbipaistvusefektide jaoks.

• Faili suurus on kvalitatiivselt väiksem.
• Veebi- või rakendusearendaja saab läbipaistvuse väärtusi kohandada või redigeerida ning määrata interaktiivsust.
• Pilt ja läbipaistvus ei halvene hoolimata sellest, kui palju faili sisse suumitakse.

Muide, kui teid huvitab, kuidas selle ristkülikute komplekti jaoks loodud SVG-kood välja näeb ja kui lihtne on veebi- või rakendusearendajal sellega töötada, siis siin on kolmest SVG-kastist esimese kood. , rakendatud 60% läbipaistmatusest:

<="" code="">