Масштабталатын векторлық графика немесе SVG бүгінде веб-сайт дизайнында маңызды рөл атқарады. Егер сіз қазір веб-дизайн жұмысында SVG қолданбасаңыз, мұны бастаудың кейбір себептері, сондай-ақ осы файлдарға қолдау көрсетпейтін ескі браузерлер үшін пайдалануға болатын резервтік ақпарат берілген.
Ажыратымдылық
SVG-нің ең үлкен артықшылығы - ажыратымдылық тәуелсіздігі. SVG файлдары векторлық графика болғандықтан (пиксельге негізделген растрлық кескіндерге қарағанда), кескін сапасын жоғалтпай олардың өлшемін өзгертуге болады. Бұл әсіресе жақсы көрінетін және экран өлшемдері мен құрылғылардың кең ауқымында жақсы жұмыс істейтін жауап беретін веб-сайттарды жасағанда пайдалы. Жауап беретін веб-сайтыңыздың өзгеретін өлшемі мен орналасу қажеттіліктерін қанағаттандыру үшін SVG файлдарының сапасын ешбір жолмен бұзбай, жоғары немесе кішірейтуге болады.
Әдетте, SVG форматтары өлшеміне қарамастан, басқа пішімдердің кескіндеріне қарағанда тегіс, айқынырақ көрінеді.
Файл өлшемі
Жауапты веб-сайттарда растрлық кескіндерді (мысалы, JPG, PNG, GIF) пайдаланудың бір қиындығы - файл өлшемі. Растрлық кескіндер векторлық кескіндер сияқты масштабталмағандықтан, пикселге негізделген кескіндерді олар көрсетілетін ең үлкен өлшемде жеткізу керек. Себебі сіз әрқашан кескінді кішірейтіп, оның сапасын сақтай аласыз, бірақ кескіндерді үлкейту үшін бұл дұрыс емес. Нәтижесінде браузерлерді үлкен файлдарды жүктеп алуға мәжбүр ететін кескіндер қаралып жатқан өлшемнен әлдеқайда үлкен болады.
Керісінше, векторлық графика масштабталады, сондықтан бұл кескіндердің қаншалықты үлкен көрсетілуін қажет ететініне қарамастан өте кішкентай файл өлшемдерін пайдалануға болады. Бұл сайттың жалпы өнімділігін және жүктеп алу жылдамдығын оңтайландырады.
CSS стилі
SVG файлын тікелей беттің HTML-ге оңай қосуға болады. Бұл кірістірілген SVG ретінде белгілі. Кірістірілген 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 тобынан Grumpicon сияқты құралды пайдаланыңыз. Бұл ресурс SVG кескін файлдарынан-p.webp
