Scalable Vector Graphics istifadə faydaları
Scalable Vector Graphics və ya SVG, bu gün veb sayt dizaynında mühüm rol oynayır. Hal-hazırda web dizayn işinizdə SVG istifadə etmirsinizsə, bu səbəbdən də bu faylları dəstəkləməyən köhnə brauzerlər üçün istifadə edə biləcəyiniz bəzi səbəblərdir.
Görüntü imkanı
SVG-nin ən böyük faydası qətnamənin müstəqilliyidir. SVG faylları pixel əsaslı raster şəkillər yerinə vektor qrafiklər olduğundan, hər hansı bir görüntü keyfiyyətini itirmədən ölçülmüş ola bilər. Bu, yaxşı baxmaq və geniş ekran ölçüləri və cihazları arasında yaxşı işləmək üçün lazım olan həssas saytlar yaratdığınızda xüsusilə faydalıdır.
SVG faylları dəyişən ölçüsü və məsuliyyətli veb saytınızın layout ehtiyaclarını ödəmək üçün yuxarı və ya aşağı ölçeklendirilebilir və keyfiyyəti hər hansı bir addımın keyfiyyətinə təhlükə olan bu qrafiklərdən narahat olmayın.
Faylın ölçüsü
Həssas veb saytlarda raster şəkillər (JPG, PNG, GIF) istifadə edərək, problemlərdən biri bu şəkillərin ölçüsüdür. Rastr şəkilləri, vektorluların etdiyinin ölçüsünü ölçmədikləri üçün, piksel əsaslı şəkillərinizi nümayiş ediləcək ən böyük ölçüyə çatdırmalısınız. Bunun üçün həmişə bir görünüş daha kiçik və keyfiyyətini saxlaya bilərik, ancaq daha çox şəkilləndirmə üçün doğru deyil. Nəticədə, tez-tez bir adamın ekranında göstərildiklərindən daha böyük olan şəkillər var ki, onlar çox böyük bir fayl yükləmək məcburiyyətindədirlər.
SVG bu problemi həll edir. Vektor qrafiki ölçeklenebilir olduğundan, bu görüntülerin ne kadar böyük görünmesini isteyeceğine bakmaksızın, çox kiçik bir fayl boyutuna malik olursunuz. Bu nəticədə saytın ümumi performansına və yüklənmə sürətinə müsbət təsir göstərəcəkdir.
CSS Styling
SVG kodu birbaşa HTML səhifəsinə də əlavə edilə bilər. Bu, "inline SVG" kimi tanınır. Inline SVG-nin istifadə edilməsinin faydalarından biri qrafiklərin kodunuz əsasında brauzer tərəfindən tərtib olunduğundan, bir şəkil faylının alınması üçün HTTP-nin tələb edilməsinə ehtiyac yoxdur. Başqa bir fayda SVG inline CSS ilə səpkili ola bilər.
Bir SVG simonunun rəngini dəyişmək lazımdırmı? Müəyyən bir şəkildə redaktə proqramı və ixracat şəklini açmaq və faylları yenidən yükləmək ehtiyacı əvəzinə SVG faylını CSS-nin bir neçə xətti ilə dəyişə bilərsiniz.
Ayrıca hover ölkələrində və ya müəyyən dizayn ehtiyacları üçün onları dəyişdirmək üçün SVG qrafikində digər CSS üslublarından da istifadə edə bilərsiniz. Bir səhifəyə bəzi hərəkətlər və interaktivlik əlavə etmək üçün həmin qrafikləri canlandırmaq olar.
Animasiyalar
Inline SVG faylları CSS ilə səpkili ola bildiyi üçün, CSS animasiyalarını da istifadə edə bilərsiniz. CSS transformasiyası və keçidləri SVG fayllarına bir neçə həyat əlavə etmək üçün iki asan üsuldur. Bu gün saytlarda Flash istifadə edərək gələn downsides uğursuz olmadan bir səhifə zəngin Flash kimi təcrübə əldə edə bilərsiniz.
SVG-nin istifadəsi
SVG olduğu kimi güclü olduğundan, bu qrafiklər veb-saytınızda istifadə etdiyiniz hər hansı bir şəkil formasını dəyişdirə bilməz. Dərin rəng dərinliyi tələb edən fotoşəkillər hələ bir JPG və ya bir PNG faylı olmalıdır, ancaq simgeler kimi sadə şəkillər mükəmməl SVG olaraq yerinə yetiriləcəkdir.
SVG həmçinin şirkətin loqosu və ya qrafik və çizelgeleri kimi daha mürəkkəb illüstrasiyalara uyğun ola bilər. Bütün qrafiklər ölçeklenebilir olma, CSS ile süslenebilme imkanları ve bu makalede listelenen diğer avantajlardan faydalanır.
Köhnə Brauzerlər üçün dəstək
SVG-lə mövcud dəstək müasir veb-brauzerlərdə çox yaxşıdır. Bu qrafiklərə həqiqətən də dəstək verməyən yeganə brauzerlər İnternet Explorer-ın (Version 8 və aşağıda) və bir neçə əvvəlki Android versiyasını köhnə versiyalarıdır. Ümumiyyətlə, tarama əhalisinin çox az bir hissəsi bu brauzerləri hələ də istifadə edir və bu sayı azalmağa davam edir. Bu, SVG'nin bu gün saytlarda olduqca təhlükəsiz istifadə edilə biləcəyini bildirir.
SVG üçün bir geri dönüş təmin etmək istəyirsinizsə, Filament Group-dan Grumpicon kimi bir vasitə istifadə edə bilərsiniz. Bu qaynaq sizin SVG image fayllarınıza gedəcək və köhnə brauzerlər üçün PNG qayıtmaları yaradır.
Jeremy Girard, 1/27/17 tarixində redaktə etdi