Приликом креирања веб странице, веб дизајнер мора узети у обзир четири главне тачке размишљајући о изгледу и визуелном дизајну веба, текст, слике, боје и фонтови запослених.
Од ове четири тачке, она којој ћемо дати највећи значај у овом посту су слике, јер ћемо говорити о како да креирате свг датотеке пошто је веома важно водити рачуна о квалитету слика са којима радите.
Третмани са СВГ датотекама, повећавају професионалци а не тако професионалци у свету дизајна.
Шта је СВГ датотека?
СВГ је скраћеница на енглеском за Сцалабе Вецтор Грапхицс, на шпанском, Сцалабле Вецтор Грапхицс. Реч је о а отвореног и слободног формата помоћу којих се креирају 2Д графике, две димензије.
За разлику од других формата слика, као што су ЈПГ или ПНГ, СВГ је скалабилан формат, без обзира колико желите да повећате његову величину, пошто ће се квалитет слике задржати. То је један од најчешће коришћених формата на веб страницама за постављање графике или векторских слика.
Зашто би требало да користимо СВГ?
Са овом врстом формата, векторске слике ће задржати висок квалитет, без обзира на њихову величину и резолуцију. Напротив, слике састављене од битмапа, састављене од пиксела, губе квалитет ако им се промени величина. СВГ формат је дефинисан својом лакоћом и разноврсношћу.
Још једна ствар у прилог коришћењу овог формата је његова мала величина, односно захваљујући томе повећава брзину учитавања страница на којима се налазе. Ове слике прави претраживач, што помаже да се смањи оптерећење и потрошња на серверу.
Осим тога, могу креирајте анимиране СВГ слике чиме да нашој веб страници да призвук и привуче пажњу гледалаца који га посећују.
СВГ је отворени формат, тј. може бити подвргнуто побољшањима и ажурирањима. Поред тога, СВГ датотеке се могу уређивати помоћу програма за векторско уређивање, на пример Адобе Иллустартор, без губитка квалитета приказа, може се гледати на било ком уређају. Такође нам омогућава да га штампамо без губитка квалитета.
Како лако креирати СВГ датотеке
Можда је најлакши начин да креирате СВГ датотеке, ако сте упознати са њима, кроз програм за графички дизајн, као што су Иллустратор, Цорел Драв, између осталих.
Фокусирајући се на програм Иллустратор, када ћемо користити СВГ формат, морамо узети у обзир да ли смо користили градијенте или друге ефекте, као што су уметнички ефекат, замућење, четкице, пиксели итд. пошто су растеризовани када се чувају у СВГ формату датотеке. Препоручљиво је да користите ефекте СВГ филтера, да додате ефекте тако да се касније не могу растеривати.
Још један савет који вам дајемо је да га користите једноставни симболи и путање у илустрацијама за боље перформансе наведеног формата. Избегавајте коришћење четкица са много трагова јер то ствара веће оптерећење података.
Да бисте креирали СВГ датотеку у овом програму, Прво што морамо да имамо отворено је празно платно на коме ћемо радити на нашој идеји.
Када наш посао заврши, оно што ћемо урадити је да одемо на траку са алаткама која је приказана изнад програма и изаберемо опцију датотеку, сачувајте као и појавиће се искачући екран где ће нам рећи да дамо име нашој датотеци и означимо формат у којем желимо да га сачувамо. У овом последњем одељку морамо означити СВГ опцију.
Када изаберете СВГ тип, појављује се оквир за дијалог који нам показује различите опције које се морају узети у обзир.
Као опште правило, у првом пољу које се појављује у табели, појављује се СВГ 1.1 профил. У наставку нам даје могућност да изаберемо изворе у којима нам они дају подразумевано је текст означен у СВГ и подскуп као ниједан. У нашем случају, овај рад нема фонтове, да га има, опција подскупова би морала да се промени са ниједан на све пиктограме.
Следећи одељак је веома важан, ако укажемо на ембед опција, слике композиције ће бити уграђене у датотеку, што ће довести до тога да добије на тежини ако користимо много битмап слика. Ако, с друге стране, означимо опцију повезивања, морамо бити пажљиви са сликама ако ћемо их користити на веб локацији, јер морамо укључити датотеке наших слика, а такође, што је веома важно, одржавати њихове пут. Предност ове опције је што ће датотеке тежити много мање.
У одељку напредних опција налазимо опцију за СВГ код, ова опција ће показати како је датотека унутра, односно шифра иза нашег рада. Ова опција је неопходна ако желите да додате своју СВГ датотеку, на пример у свој лични ВордПресс, само морате да копирате код и додате га директно у ВордПресс ХТМЛ уређивач.
Последњи савет који вам дајемо је да када снимате у СВГ формату, имајте на уму да ако радите са различитим уметничким таблама, само активна табла ће бити задржана.
Ако желимо да идемо даље и применимо СВГ ефекте на нашу илустрацију, Иллустратор нам нуди скуп ефеката. Да бисмо то урадили, мораћемо да изаберете објекат или групу. Да бисмо применили ефекат, морамо изабрати прозор ефеката, СВГ филтере и применити га.
Приликом примене СВГ филтера, програм за дизајн нам показује прозор где Појављује се листа филтера који се могу применити, када га одаберемо, Иллустратор нам показује како изгледа, али у растеризованој верзији.
Као што сте видели, СВГ формат је био револуција. Захваљујући свом потенцијалу и квалитету које нуди, чини веб странице које сматрамо много привлачнијима без жртвовања перформанси, све док правилно користе наведени формат. СВГ је постао савршен спој између света дизајна и веб развоја.