Hvernig á að beita gagnsæi á SVG

SVG grafík frá Adobe Illustrator CC er sjaldan afhent stafrænum hönnuðum með bakgrunn. Venjulega svífur grafíkin fyrir ofan hvaða bakgrunn sem er í vefsíðunni, appinu, hreyfimyndinni eða gagnvirku samhengi.

Áður en þú ræðir hvað felst í því að slá út bakgrunninn á bak við SVG listaverk skaltu einbeita þér að því að beita gagnsæi í SVG grafík. Þú þarft að skilgreina ógagnsæi listaverka með því að nota gagnsæi spjaldið. Til dæmis hefur 50 prósent gagnsæi verið sett á gula lögunina á myndinni og þú getur séð gagnsæið í gildi. Og já, þessi mynd er SVG skrá, með öllum léttum, hraðhlaðandi og óendanlega skalanlegum eiginleikum innbyggðum í SVG.

Hálfógagnsæ SVG lögun ofan á lituðum bakgrunni.

Hvernig á að gefa út SVG með gagnsæjum bakgrunni

Hönnuðir eru vanir að hugsa út frá bakgrunni sem er ýmist gerður gagnsær eða áfram sýnilegur. Við hugsum um að slá út bakgrunn. PNG myndir og GIF myndir virka þannig - annað hvort býrð þú til með bakgrunni eða velur gagnsæjan bakgrunn í forriti eins og Illustrator eða Photoshop til að slá út þann bakgrunn.

Með GIF og PNG geturðu haft einn gagnsæjan lit sem gerir bakgrunnslitum eða myndum kleift að birtast á vefsíðum. En rökfræðin við að slá út bakgrunninn er önnur í SVG skrá en með PNG og GIF. Í meginatriðum er ekkert til sem heitir SVG grafík sem hefur ógegnsæjan bakgrunn vegna þess að það er enginn bakgrunnur. Með öðrum orðum: Sjálfgefið er að SVG grafík vistar og flytur út án bakgrunns.

Svo, hvað er vandamálið? Jæja, það er auðvelt að lenda óvart með gagnsæjum bakgrunni þegar þú vistar eða flytur SVG skrár út! Eftirfarandi mynd gæti verið með hvítum bakgrunni, eða hún gæti verið með gagnsæjum bakgrunni. Þú getur ekki sagt bara með því að horfa á Illustrator skjáinn; þú verður að velja Skoða→ Sýna gagnsæisnet.

Þessi grafík gæti verið með hvítan bakgrunn eða engan bakgrunn.

Með Transparency Grid virkt, eins og sýnt er, geturðu séð að fuglinn er með hvítan rétthyrning á bak við sig og að hvítur bakgrunnur mun „fylgja“ myndinni ef þú vistar skrána sem SVG eða flytur hana út sem SVG.

Þegar þú skoðar gagnsæisnetið kemur í ljós hvítur rétthyrningur fyrir aftan grafíkina.

Leyfðu mér að leggja áherslu á og varpa ljósi á þetta frá öðru sjónarhorni. Þegar ég fer í að flytja þessa mynd út sem SVG, þá er ekki hægt að velja gagnsæja lit í útflutningi fyrir skjái sem sýndur er.

Þú getur ekki valið gagnsæi lit í SVG vegna þess að það er enginn bakgrunnslitur.

Ég lendi oft í hönnuðum sem krefjast þess að setja bakgrunnsferhyrning á bak við SVG-myndverkin sín svo þeir geti séð hvernig grafíkin mun líta út þegar hún er í bakgrunni með lit í miðlinum (eins og vefsíðu eða app). Það er allt í lagi, ég vara þá, svo lengi sem þú manst eftir að fjarlægja bakgrunnsrétthyrninginn þegar þú vistar eða flytur SVG út. Og í háþrýstingi, mikilli framleiðni og hröðum viðsnúningi heimsins, hver þarf að muna eftir einu?

Betri lausn er að skilgreina „rist“ gegnsæi með einum lit sem passar við umhverfið sem grafíkin verður sett í. Af hverju set ég töflu innan gæsalappa? Vegna þess að þessi tækni svindlar: Með henni skilgreinirðu báða ristlitina sem sama lit, sem líkir í raun eftir vefsíðu eða bakgrunnslit apps.

Til að nota þá tækni til að búa til sérsniðinn bakgrunn á meðan þú þróar SVG listaverk skaltu fylgja þessum skrefum:

Veldu Skrá→ Uppsetning skjala.

Í Almennt flipanum, finndu hlutann Gagnsæi og yfirprentunarvalkostir.
Breytingarnar sem þú vilt er stjórnað í þessum hluta gluggans.
Ekki hafa áhyggjur af því að skilgreina ristastærðina því þú ert í raun að losa þig við ristina.

Í Transparency Grid hlutanum í valmyndinni, smelltu á fyrsta af tveimur rist litaspjöldum og veldu bakgrunnslit með því að nota eina af hinum ýmsu litatöflum í Litir sprettiglugganum sem sýndur er á eftirfarandi mynd.
Engin af þessum litatöflum er sérstaklega stafræn vingjarnlegur, við the vegur. Það er engin litatöflu fyrir RGBA, sextándabil eða önnur venjuleg veflitasnið, en litapappinn getur hjálpað þér að fá bakgrunnslitinn sem þú vilt passa við.

Að skilgreina forskoðunarbakgrunnslit með gagnsæisneti.

Veldu annað af tveimur litaspjöldum í ristinni og gefðu því sama lit.
Mundu að þú getur notað litapappann til að grípa þann lit.

Smelltu á OK í glugganum Document Setup.

Allt sem ég hef gert í fyrri settinu af skrefum var að skilgreina hvernig gagnsæisnetið birtist þegar það er virkt . Svo, ef gagnsæisnetið þitt er ekki virkt skaltu velja Skoða→ Gagnsæisnet.

Í þessari mynd valdi ég teikniborðið með grafíkinni og ég er að forskoða verkefnið gegn hermum bakgrunnslit.

Forskoðaðu bakgrunnslit úttaksins með sérsniðnu gagnsæisneti.

Notaðu gagnsæisáhrif á SVG

Þegar gagnsæi (eins og 50 prósent ógagnsæi) eða gagnsæi áhrif eins og litabrenna, dökkna eða margfalda er beitt á SVG grafík, halda þessi áhrif sveigjanleika SVG.

Þessi mynd sýnir sömu grafíkina - þrjá hálfgagnsæja appelsínugula ferhyrninga - flutt út sem PNG skrá (efst) og SVG. Þú getur séð hvernig PNG skráin rýrnar í gæðum þegar ég stækka hana í vafra. Það sem þú getur ekki séð er að PNG skráin er næstum tvöfalt stærri en SVG.

Samanburður PNG úttak (efst) við SVG þegar gagnsæi er beitt

Hér er yfirlit yfir kosti þess að nota SVG fyrir gagnsæisáhrif:

• Skráarstærðin er eigindlega minni.
• Vef- eða forritaframleiðandi getur lagað eða breytt gagnsæisgildunum og úthlutað gagnvirkni.
• Myndin og gagnsæið mun ekki rýrna sama hversu mikið er aðdráttur á skránni.

Við the vegur, ef þú ert forvitinn um hvernig útbúinn SVG kóðinn fyrir þetta sett af rétthyrningum lítur út og hversu auðvelt það er fyrir vef- eða forritara að vinna með hann, hér er kóðinn fyrir fyrsta SVG reitinn af þremur , með 60 prósenta ógagnsæi notað:

<="" kóða="">