Ауқымды векторлық графиканы пайдаланудың артықшылықтары
Масштабты векторлық графика немесе SVG бүгінгі күні веб-сайттың дизайнында маңызды рөл атқарады. Егер сіз қазіргі уақытта SVG-ді веб-дизайнерлік жұмысыңызда пайдаланбасаңыз, мұнда не істеуіңіз керек екенін бірнеше себептері бар, сондай-ақ, осы файлдарды қолдамайтын ескі браузерлер үшін қолдануға болады.
Ажыратымдылық
SVG-дің ең үлкен пайдасы - бұл шешімнің тәуелсіздігі. SVG файлдары пикселге негізделген растрлық суреттердің орнына векторлық графика болғандықтан, олар ешқандай сурет сапасын жоғалтпай көлемін өзгертуге болады. Бұл әсіресе жақсы көрінуі және экран өлшемдері мен құрылғыларының кең ауқымы бойынша жұмыс істеуі қажет жауапты веб-сайттарды жасау кезінде пайдалы.
SVG файлдары өзіңіздің веб-сайтыңыздың өзгеретін өлшемі мен орналасу қажеттіліктерін қанағаттандыру үшін жоғары немесе төмен болуы мүмкін және сіз осы графиканың сапасына зиян келтірмейтін кез-келген қадамды қажет етпейсіз.
Файл өлшемі
Расталған веб-сайттарда растрлық бейнелерді (JPG, PNG, GIF) пайдаланудағы қиындықтардың бірі - сол суреттердің файл өлшемі. Растрлық суреттер вектордың қалай жасайтынын ауқымға бөлмейтіндіктен, пиксель негізіндегі суреттерді олар көрсетілетін ең үлкен өлшемде жеткізуі қажет. Өйткені сіз әрқашан бейнені кішірейтіп, сапасын сақтай аласыз, бірақ бұл суреттерді үлкенірек жасау үшін дұрыс емес. Соңғы нәтиже - сізде экранда көрсетілетін суреттерден әлдеқайда көп суреттер бар, яғни олар өте үлкен файлды жүктеуге мәжбүр болып табылады.
SVG осы мәселені шешеді. Векторлық графика масштабталатындықтан, бұл суреттердің қаншалықты үлкен болуы керек екеніне қарамастан өте кішкентай файл өлшемдеріне ие бола аласыз. Бұл, сайып келгенде, сайттың жалпы өнімділігі мен жүктеу жылдамдығына оң әсер етеді.
CSS стилі
SVG коды тікелей HTML бетке қосылуы мүмкін. Бұл «SVG SVG» деп аталады. Сызықтық SVG-ні пайдаланудың артықшылықтарының бірі - графиканың сіздің браузеріңіздің кодының негізінде жасағаннан кейін, сурет файлын алу үшін HTTP сұрауын жасаудың қажеті жоқ. Тағы бір артықшылығы SVG сызықты SVG үлгісінде болуы мүмкін.
SVG белгішесінің түсін өзгерту керек пе? Бұл кескінді редакциялауға және экспорттауға және файлды қайтадан жүктеуге қажеттінің орнына SVG файлын бірнеше CSS жолымен өзгертуге болады.
Сондай-ақ, SVG графикасындағы басқа CSS мәнерлерін апаратын штаттарға немесе белгілі бір дизайн қажеттіліктеріне өзгерту үшін пайдалануға болады. Сіз бетті біраз қозғалыс және интерактивтілік қосу үшін сол графиканы тіркей аласыз.
Анимациялар
Кірістірілген SVG файлдары CSS-мен стилі болуы мүмкін болғандықтан, оларға CSS анимацияларын да пайдалануға болады. CSS түрлендіреді және ауысу SVG файлдарына кейбір өмірді қосудың екі оңай жолы болып табылады. Сіз бүгінгі күні веб-сайттардағы Flash көмегімен келіп түсетін шығынсыздықтарға жол бермей-ақ, беттегі Flash-тәрізді бай тәжірибелерді ала аласыз.
SVG-тың қолданылуы
SVG ретінде күшті болғандықтан, бұл графика сіздің веб-сайтыңызда қолданылатын кез-келген басқа сурет пішімін алмастыра алмайды. Түс тереңдігін қажет ететін суреттер әлі де JPG немесе PNG файл болуы керек, бірақ икондар сияқты қарапайым кескіндер SVG ретінде орындалады.
SVG компания логотиптері немесе графиктер мен диаграммалар сияқты күрделі суреттерге де сай болуы мүмкін. Барлық графиктер CSS-мен стильдендіре алатын ауқымды болуы мүмкін және осы мақалада келтірілген басқа артықшылықтар.
Ескі браузерлерді қолдау
SVG-ке ағымдағы қолдау қазіргі заманғы веб-браузерлерде өте жақсы. Осы графиктерді шынымен қолдайтын жалғыз браузерлер - Internet Explorer ескі нұсқалары (Нұсқасы 8 және одан төмен) және Android бірнеше ескі нұсқалары. Тұтастай алғанда, қарап шығу популяциясының өте аз пайызы осы браузерлерді қолданады және бұл сан қысқартады. Бұл дегеніміз, SVG бүгінгі күні веб-сайттарда өте қауіпсіз пайдаланылуы мүмкін.
Егер сіз SVG-ді қалпына келтіруді қаласаңыз, сіз Filament Group компаниясынан Grumpicon сияқты құралды пайдалана аласыз. Бұл ресурс SVG кескін файлдарын қабылдайды және ескі браузерлер үшін PNG кіре берістерін жасайды.
Jeremy Girard, 1/27/17 ж