Ölçəklənən Vektor Qrafikası və ya SVG bu gün vebsayt dizaynında mühüm rol oynayır. Əgər siz hazırda veb dizayn işinizdə SVG istifadə etmirsinizsə, bunu etməyə başlamağın bəzi səbəbləri, həmçinin bu faylları dəstəkləməyən köhnə brauzerlər üçün istifadə edə biləcəyiniz ehtiyatlar buradadır.
Qətiyyət
SVG-nin ən böyük faydası qətnamə müstəqilliyidir. SVG faylları vektor qrafikası olduğundan (piksel əsaslı rastr şəkillərdən fərqli olaraq), siz onların ölçüsünü şəkil keyfiyyətini itirmədən dəyişə bilərsiniz. Bu, yaxşı görünməli və müxtəlif ekran ölçüləri və cihazlarda yaxşı işləməli olan cavab verən veb-saytlar yaratdığınız zaman xüsusilə faydalıdır. Cavab verən vebsaytınızın dəyişən ölçüsü və tərtibat ehtiyaclarını ödəmək üçün SVG fayllarının ölçüsünü yuxarı və ya aşağı miqyaslaya bilərsiniz.
Ümumiyyətlə, SVG-lər ölçüsündən asılı olmayaraq, digər formatlı şəkillərdən daha hamar, daha kəskin görünüşə malikdir.
Fayl Ölçüsü
Responsive vebsaytlarda rastr şəkillərdən (məsələn, JPG, PNG, GIF) istifadə ilə bağlı problemlərdən biri fayl ölçüsüdür. Rastr şəkilləri vektor şəkilləri kimi miqyas almadığından, siz piksel əsaslı şəkillərinizi onların göstəriləcəyi ən böyük ölçüdə çatdırmalısınız. Bunun səbəbi, siz həmişə şəkli kiçik edə və keyfiyyətini saxlaya bilərsiniz, lakin eyni şey şəkilləri böyütmək üçün keçərli deyil. Nəticə, baxıldıqları ölçüdən çox böyük olan şəkillərdir və bu, brauzerləri böyük faylları endirməyə məcbur edir.
Bunun əksinə, vektor qrafikası miqyaslana bilir, beləliklə, siz bu şəkillərin nə qədər böyük göstərilməsinə ehtiyac olmasından asılı olmayaraq çox kiçik fayl ölçülərindən istifadə edə bilərsiniz. Bu, nəticədə saytın ümumi performansını və endirmə sürətini optimallaşdırır.
CSS Styling
Siz asanlıqla səhifənin HTML-nə birbaşa SVG əlavə edə bilərsiniz. Bu, daxili SVG kimi tanınır. Daxili SVG-dən istifadə etməyin faydalarından biri odur ki, qrafiklər əslində brauzer tərəfindən tərtib edildiyi üçün şəkil faylını əldə etmək üçün HTTP sorğusuna ehtiyac yoxdur.
Digər üstünlük: Siz CSS ilə daxili SVG-ni tərtib edə bilərsiniz. SVG simvolunun rəngini dəyişmək lazımdır? Həmin şəkli qrafik redaktor proqramında redaktə etmək və sonra faylı yenidən ixrac edib yükləmək əvəzinə, siz SVG faylını sadəcə bir neçə CSS sətri ilə dəyişə bilərsiniz. CSS-dən hover vəziyyətləri və digər dizayn ehtiyacları üçün SVG-ləri dəyişdirmək üçün də istifadə edə bilərsiniz.
Aşağı xətt
Daxili SVG fayllarını CSS ilə tərtib edə bildiyiniz üçün onlarda CSS animasiyalarından da istifadə edə bilərsiniz. CSS çevrilmələri və keçidləri SVG-lərə bir qədər həyat əlavə etməyin iki asan yoludur. Siz iPad-in artıq dəstəkləmədiyi Flash-dan istifadə etmədən səhifədə zəngin Flash kimi təcrübələr əldə edə bilərsiniz. Əslində, Adobe 2020-ci ilin sonuna qədər Flash proqramını dayandırır.
SVG İstifadələri
SVG-lər nə qədər güclü olsalar da, onlar bütün digər şəkil formatlarını əvəz edə bilməz. Zəngin rəng dərinliyi tələb edən fotoşəkillər hələ də-j.webp
SVG qrafiklər, diaqramlar və şirkət loqoları kimi bəzi mürəkkəb təsvirlər üçün də uyğundur. Bu qrafiklərin hamısı miqyaslana bilən və CSS ilə tərtib oluna bilən olmasından faydalanır.
Köhnə Brauzerlər üçün Dəstək
SVG üçün cari dəstək müasir veb brauzerlərdə çox yaxşıdır. Bu qrafikləri dəstəkləməyən yeganə brauzerlər Internet Explorer-in köhnə versiyaları (Microsoft artıq dəstəkləmir) və Android-in bir neçə köhnə versiyalarıdır. Ümumilikdə baxan əhalinin çox kiçik bir hissəsi hələ də bu brauzerlərdən istifadə edir və bu say azalmağa davam edir. Bu o deməkdir ki, SVG-dən vebsaytınızda narahat olmadan istifadə edə bilərsiniz.
SVG üçün ehtiyat təmin etmək istəyirsinizsə, Filament Qrupundan Grumpicon kimi alətdən istifadə edin. Bu resurs SVG şəkil fayllarınızdan PNG-lər yaradır.
