Kā SVG failiem piemērot caurspīdīgumu

SVG grafika no Adobe Illustrator CC reti tiek nodota digitālajiem dizaineriem ar iepriekšēju pieredzi. Parasti grafika peld virs jebkura fona, kas pastāv vietnē, lietotnē, animācijā vai interaktīvā kontekstā.

Pirms apspriest to, kas ir saistīts ar SVG mākslas darbu fona izskaušanu, koncentrējieties uz caurspīdīguma piemērošanu SVG grafikai. Jums ir jādefinē mākslas darba necaurredzamība, izmantojot caurspīdīguma paneli. Piemēram, attēlā redzamajai dzeltenajai formai ir piemērota 50 procentu caurspīdīgums, un jūs varat redzēt caurspīdīgumu. Un jā, šis attēls ir SVG fails ar visām vieglajām, ātri ielādējamām un bezgalīgi mērogojamām funkcijām, kas iebūvētas SVG.

Daļēji necaurspīdīga SVG forma uz krāsaina fona.

Kā izvadīt SVG ar caurspīdīgu fonu

Dizaineri ir pieraduši domāt par fonu, kas ir padarīts caurspīdīgs vai paliek redzams. Mēs domājam par fona izslēgšanu. PNG attēli un GIF attēli darbojas šādi — jūs vai nu veidojat ar fonu, vai arī izvēlaties caurspīdīgu fonu programmā, piemēram, Illustrator vai Photoshop, lai izslēgtu šo fonu.

Izmantojot GIF un PNG, jums var būt viena caurspīdīga krāsa, kas ļauj tīmekļa lapās parādīt fona krāsas vai attēlus. Taču fona izslēgšanas loģika SVG failā atšķiras no PNG un GIF failiem. Būtībā nav tādas SVG grafikas, kurai būtu necaurspīdīgs fons, jo nav fona. Citiem vārdiem sakot: pēc noklusējuma SVG grafika saglabā un eksportē bez fona.

Tātad, kāda ir problēma? Saglabājot vai eksportējot SVG failus, ir viegli nejauši iegūt caurspīdīgu fonu! Tālāk redzamajam attēlam var būt balts fons vai caurspīdīgs fons. Jūs to nevarat pateikt, skatoties tikai uz Illustrator ekrānu; jums jāizvēlas Skats → Rādīt caurspīdīguma režģi.

Šim grafikam var būt balts fons vai tam var nebūt fona.

Ja ir iespējots caurspīdīguma režģis, kā parādīts attēlā, jūs varat redzēt, ka putnam aiz tā ir balts taisnstūris un šis baltais fons "iet kopā" ​​ar grafiku, ja saglabāsit failu kā SVG vai eksportēsit to kā SVG.

Apskatot caurspīdīguma režģi, aiz grafika tiek parādīts balts taisnstūris.

Ļaujiet man uzsvērt un izgaismot to no cita leņķa. Kad es eksportēju šo attēlu kā SVG, parādītajā dialoglodziņā Eksportēšana ekrāniem nav caurspīdīguma krāsas izvēles iespējas.

SVG formātā nevar izvēlēties caurspīdīguma krāsu, jo nav fona krāsas.

Es bieži sastopos ar dizaineriem, kuri uzstāj, ka aiz sava SVG paredzētā mākslas darba ir jāievieto fona taisnstūris, lai viņi varētu redzēt, kā grafika izskatīsies, ja mērķa datu nesējā (piemēram, tīmekļa lapā vai lietotnē) tiks izmantota krāsa. Tas ir labi, es viņus brīdinu, ja atceraties noņemt šo fona taisnstūri, kad saglabājat vai eksportējat SVG. Un šodienas augsta spiediena, augstas produktivitātes un ātras darbības pasaulē, kam ir vēl viena lieta, kas jāatceras?

Labāks risinājums ir definēt caurspīdīguma “režģi” ar vienu krāsu, kas atbilst videi, kurā tiks ievietota grafika. Kāpēc režģi liek pēdiņās? Tā kā šī metode krāpj: ar to jūs definējat abas režģa krāsas kā vienu un to pašu krāsu, efektīvi imitējot tīmekļa lapas vai lietotnes fona krāsu.

Lai izmantotu šo paņēmienu, lai izveidotu pielāgotu fonu, izstrādājot SVG mākslas darbu, veiciet šīs darbības:

Izvēlieties Fails → Dokumenta iestatīšana.

Cilnē Vispārīgi atrodiet sadaļu Caurspīdības un virsdrukas opcijas.
Vēlamās izmaiņas tiek kontrolētas šajā dialoglodziņa sadaļā.
Neuztraucieties par režģa izmēra noteikšanu, jo jūs efektīvi atsakāties no režģa.

Dialoga sadaļā Transparency Grid noklikšķiniet uz pirmā no diviem režģa krāsu paneļiem un izvēlieties fona krāsu, izmantojot vienu no dažādajām krāsu paletēm uznirstošajā logā Colors, kas parādīts nākamajā attēlā.
Starp citu, neviena no šīm krāsu paletēm nav īpaši digitāla. Nav RGBA, heksadecimālo vai citu standarta tīmekļa krāsu formātu paletes, taču krāsu atlasītāja pilinātājs var palīdzēt iegūt vēlamo fona krāsu.

Priekšskatījuma fona krāsas noteikšana, izmantojot caurspīdīguma režģi.

Atlasiet otro no diviem režģa krāsu paneļiem un piešķiriet tam tādu pašu krāsu.
Atcerieties, ka varat izmantot krāsu atlasītāju, lai paņemtu šo krāsu.

Dialoglodziņā Dokumenta iestatīšana noklikšķiniet uz Labi.

Viss, ko esmu paveicis iepriekšējās darbības, bija definēt, kā tiek parādīts caurspīdīguma režģis, kad tas ir iespējots . Tātad, ja jūsu caurspīdīguma režģis nav iespējots, izvēlieties Skats → Transparency Grid.

Šajā attēlā es izvēlējos zīmējumu dēli ar grafiku un priekšskatu projektu uz simulētas fona krāsas.

Izvades fona krāsas priekšskatīšana, izmantojot pielāgotu caurspīdīguma režģi.

Lietojiet caurspīdīguma efektus SVG

Ja SVG grafikai tiek lietota caurspīdīgums (piemēram, 50 procentu necaurredzamība) vai caurspīdīguma efekti, piemēram, krāsu apdegums, tumšums vai pavairošana, šie efekti saglabā SVG mērogojamību.

Šajā attēlā parādīta viena un tā pati grafika — trīs daļēji caurspīdīgi oranži taisnstūri — eksportēti kā PNG fails (augšpusē) un SVG fails. Varat redzēt, kā PNG faila kvalitāte pasliktinās, kad es to tuvinu pārlūkprogrammā. Tas, ko jūs nevarat redzēt, ir tas, ka PNG fails ir gandrīz divreiz lielāks par SVG.

PNG izvades (augšā) salīdzināšana ar SVG, kad tiek izmantota caurspīdīgums

Šeit ir kopsavilkums par priekšrocībām, ko sniedz SVG izmantošana caurspīdīguma efektiem:

• Faila izmērs ir kvalitatīvi mazāks.
• Tīmekļa vai lietotņu izstrādātājs var pielāgot vai rediģēt caurspīdīguma vērtības un piešķirt interaktivitāti.
• Attēls un caurspīdīgums nepasliktinās neatkarīgi no tā, cik lielā mērā fails ir tuvināts.

Starp citu, ja jūs interesē, kā izskatās ģenerētais SVG kods šai taisnstūru kopai un cik viegli ar to strādāt ir tīmekļa vai lietotņu izstrādātājam, šeit ir kods pirmajam no trim SVG lodziņiem. , izmantojot 60 procentu necaurredzamību:

<="" code="">