Өлчөмдүү вектордук графика же SVG бүгүнкү күндө веб-сайттын дизайнында маанилүү роль ойнойт. Эгерде сиз учурда веб-дизайн ишиңизде SVG колдонбосоңуз, бул жерде эмне үчүн муну башташыңыздын кээ бир себептери, ошондой эле бул файлдарды колдоого албаган эски браузерлер үчүн колдонсоңуз болот.
Чечимдүүлүк
SVG'дин эң чоң пайдасы - бул чечимдин көз карандысыздыгы. SVG файлдары вектордук графика болгондуктан (пикселге негизделген растр сүрөттөрүнөн айырмаланып), сиз алардын өлчөмүн сүрөттүн сапатын жоготпостон өзгөртө аласыз. Бул, өзгөчө, жакшы көрүнүшү керек болгон жооп берүүчү веб-сайттарды түзүп жатканыңызда пайдалуу жана экран өлчөмдөрү менен түзмөктөрдүн кеңири диапазонунда жакшы иштеши керек. Вебсайтыңыздын өзгөргөн өлчөмүн жана жайгашуу муктаждыктарын канааттандыруу үчүн SVG файлдарын алардын сапатын эч кандай бузбай, чоңойтуп же кичирейте аласыз.
Жалпысынан, SVG'лер өлчөмүнө карабастан, башка форматтагы сүрөттөргө караганда жылмакай, такыраак көрүнөт.
Файлдын өлчөмү
Жауаптуу веб-сайттарда растр сүрөттөрүн (мис., JPG, PNG, GIF) колдонуудагы бир кыйынчылык - файлдын өлчөмү. Растр сүрөттөрү вектордук сүрөттөрдөй масштабда болбогондуктан, сиз пикселге негизделген сүрөттөрүңүздү алар көрсөтүлө турган эң чоң өлчөмдө жеткиришиңиз керек. Себеби сиз ар дайым сүрөттү кичирейтип, анын сапатын сактап кала аласыз, бирок сүрөттөрдү чоңойтуу үчүн бул туура эмес. Натыйжада алар көрүлүп жаткан өлчөмүнөн алда канча чоңураак сүрөттөр пайда болуп, браузерлер чоң файлдарды жүктөп алууга мажбурлайт.
Ал эми вектордук графика масштабдалат, андыктан ал сүрөттөр канчалык чоң көрсөтүлүшү керек экендигине карабастан, өтө кичинекей файл өлчөмдөрүн колдоно аласыз. Бул сайттын жалпы иштешин жана жүктөө ылдамдыгын оптималдаштырат.
CSS стили
Сиз SVG'ди түз эле барактын HTML'ине оңой кошо аласыз. Бул inline SVG деп аталат. Inline SVG колдонуунун бир артыкчылыгы, графикалар чынында браузер тарабынан тартылгандыктан, сүрөт файлын алуу үчүн HTTP сурамынын кереги жок.
Дагы бир артыкчылык: Сиз CSS менен саптык SVG стилин түзө аласыз. SVG сөлөкөтүн түсүн өзгөртүү керекпи? Бул сүрөттү графикалык түзөтүү программасында оңдоп, анан файлды кайра экспорттоо жана жүктөөнүн ордуна, сиз SVG файлын бир нече CSS саптары менен өзгөртө аласыз. Сиз CSS'ти SVG'лерди сүзүү абалына жана башка дизайн муктаждыктарына өзгөртүү үчүн колдоно аласыз.
Төмөнкү сап
Сиз линиядагы SVG файлдарын CSS менен стилдегендиктен, аларда CSS анимацияларын да колдонсоңуз болот. CSS трансформациялары жана өтүүлөрү SVGге бир аз жашоо кошуунун эки оңой жолу. Сиз iPad колдобой турган Flashти колдонбостон эле баракта Flash сыяктуу бай тажрыйбаларды ала аласыз. Чындыгында, Adobe 2020-жылдын аягына чейин Flash программасынан баш тартат.
SVG колдонулушу
SVG'лер канчалык күчтүү болсо, алар башка бардык сүрөт форматтарын алмаштыра албайт. Түстүү тереңдикти талап кылган сүрөттөр дагы эле-j.webp
SVG графиктер, диаграммалар жана компаниянын логотиптери сыяктуу татаал иллюстрацияларга да ылайыктуу. Бул графиканын баары масштабдалып, CSS менен стилдештирүү мүмкүнчүлүгүнөн пайда көрөт.
Эски серепчилерди колдоо
SVG үчүн учурдагы колдоо заманбап веб браузерлерде абдан жакшы. Бул графикаларды колдоого албаган жалгыз браузерлер Internet Explorerдин эски версиялары (Microsoft аларды мындан ары колдобойт) жана Androidдин бир нече эски версиялары. Жалпысынан алганда, карап чыгуучу калктын өтө аз пайызы дагы эле бул браузерлерди колдонот жана бул сан кыскара берет. Бул SVG'ди веб-сайтыңызда тынчсызданбастан колдоно аласыз дегенди билдирет.
Эгер сиз SVG үчүн кайра кайтарууну кааласаңыз, Filament Group компаниясынан Grumpicon сыяктуу куралды колдонуңуз. Бул ресурс SVG сүрөт файлдарыңыздан-p.webp
