Како применити транспарентност на СВГ

СВГ графика из Адобе Иллустратор ЦЦ ретко се предаје дигиталним дизајнерима са позадином. Обично графика лебди изнад било које позадине која постоји на веб локацији, у апликацији, анимацији или интерактивном контексту.

Пре него што разговарате о томе шта је укључено у уклањање позадине иза СВГ уметничких дела, усредсредите се на примену транспарентности на СВГ графику. Потребно је да дефинишете непрозирност уметничког дела помоћу панела Транспарентност. На пример, 50 процената транспарентности је примењено на жути облик на слици, и можете видети транспарентност на снази. И да, та слика је СВГ датотека, са свим лаганим, брзим учитавањем и бесконачно скалабилним функцијама уграђеним у СВГ.

Полупрозиран СВГ облик на врху обојене позадине.

Како извести СВГ са провидном позадином

Дизајнери су навикли да размишљају у смислу позадина које су или транспарентне или остају видљиве. Размишљамо о нокаутирању позадине. ПНГ слике и ГИФ слике функционишу тако - или креирате са позадином или одаберете провидну позадину у програму као што је Иллустратор или Пхотосхоп да бисте избацили ту позадину.

Са ГИФ-овима и ПНГ-овима, можете имати једну провидну боју која омогућава да се боје позадине или слике приказују на веб страницама. Али логика избацивања позадине је другачија у СВГ датотеци него у ПНГ-овима и ГИФ-овима. У суштини, не постоји таква ствар као што је СВГ графика која има нетранспарентну позадину јер нема позадине. Другим речима: подразумевано се СВГ графика чува и извози без позадине.

Па шта је проблем? Па, лако је случајно завршити са провидном позадином приликом чувања или извоза СВГ датотека! Следећа слика може имати белу позадину или може имати провидну позадину. Не можете рећи само гледајући у екран Иллустратор-а; морате да изаберете Виев→Схов Транспаренци Грид.

Ова графика може имати белу позадину или можда нема позадину.

Са омогућеном мрежом транспарентности, као што је приказано, можете видети да птица иза себе има бели правоугаоник, а та бела позадина ће „ићи уз“ графику ако сачувате датотеку као СВГ или је извезете као СВГ.

Гледање мреже транспарентности открива бели правоугаоник иза графике.

Дозволите ми да нагласим и осветлим ово из другог угла. Када идем да извезем ову слику као СВГ, приказани дијалог Извоз за екране нема опцију за избор боје провидности.

Не можете да изаберете боју провидности у СВГ јер нема боје позадине.

Често наилазим на дизајнере који инсистирају на томе да поставе правоугаоник позадине иза свог СВГ уметничког дела како би могли да виде како ће графика изгледати када је позадина у боји у циљном медијуму (као што је веб страница или апликација). У реду је, упозоравам их, све док се сетите да уклоните тај правоугаоник у позадини када сачувате или извезете СВГ. А у данашњем свету под високим притиском, високом продуктивношћу и брзим преокретом, коме треба још једна ствар за памћење?

Боље решење је да дефинишете „мрежу“ транспарентности са једном бојом која одговара окружењу у које ће графика бити смештена. Зашто стављам мрежу у наводнике? Зато што ова техника вара: помоћу ње дефинишете обе боје мреже као исту боју, ефективно симулирајући боју позадине веб странице или апликације.

Да бисте користили ту технику за креирање прилагођене позадине док развијате СВГ уметничко дело, следите ове кораке:

Изаберите Датотека→ Подешавање документа.

На картици Опште пронађите одељак Транспаренци анд Оверпринт Оптионс.
Промене које желите се контролишу у овом делу дијалога.
Не брините о дефинисању величине мреже јер ефикасно одбацујете мрежу.

У одељку Транспарентна мрежа у дијалогу, кликните на први од два панела у боји мреже и изаберите боју позадине користећи једну од различитих палета боја у искачућем прозору Боје приказаном на следећој слици.
Успут, ниједна од ових палета боја није посебно дигитална. Не постоји палета за РГБА, хексадецималне или друге стандардне веб формате боја, али капаљка за бирање боја може вам помоћи да добијете боју позадине коју желите да ускладите.

Дефинисање боје позадине за преглед помоћу мреже транспарентности.

Изаберите други од два панела у боји мреже и доделите му исту боју.
Запамтите, можете користити капаљку за бирање боја да ухватите ту боју.

Кликните на ОК у дијалогу Подешавање документа.

Све што сам урадио у претходном скупу корака је да дефинишем како ће се мрежа транспарентности приказати када је омогућена . Дакле, ако ваша мрежа транспарентности није омогућена, изаберите Виев→ Транспаренци Грид.

На овој слици сам одабрао монтажну таблу са графиком и прегледам пројекат у односу на симулирану боју позадине.

Преглед позадине излаза са прилагођеном мрежом транспарентности.

Примените ефекте транспарентности на СВГ

Када се на СВГ графику примењују транспарентност (као што је 50 процената непрозирности) или ефекти транспарентности као што су сагоревање боје, затамњење или умножавање, ти ефекти задржавају скалабилност СВГ-а.

Ова слика приказује исту графику — три полупровидна наранџаста правоугаоника — извезену као ПНГ датотека (горе) и СВГ. Можете видети како ПНГ датотека деградира у квалитету када је увећам у прегледачу. Оно што не можете да видите је да је ПНГ датотека скоро дупло већа од СВГ.

Поређење ПНГ излаза (горе) са СВГ када се примењује транспарентност

Ево резимеа предности коришћења СВГ-а за ефекте транспарентности:

• Величина датотеке је квалитативно мања.
• Програмер веба или апликација може да подеси или измени вредности транспарентности и додели интерактивност.
• Слика и транспарентност се неће погоршати без обзира на то колико је датотека зумирана.

Иначе, ако вас занима како изгледа генерисани СВГ код за овај скуп правоугаоника и колико је лако програмеру веба или апликација да ради са њим, ево кода за прву од три СВГ кутије , са примењеном непрозирношћу од 60 процената:

<="" цоде="">