Scalable vektor grafikasi yoki SVG bugungi kunda veb-sayt dizaynida muhim rol o'ynaydi. Agar siz hozirda veb-dizayn ishingizda SVG dan foydalanmayotgan boʻlsangiz, buni boshlashingizning baʼzi sabablari, shuningdek, ushbu fayllarni qoʻllab-quvvatlamaydigan eski brauzerlar uchun foydalanishingiz mumkin boʻlgan zaxiralar.
Rezolyutsiya
SVG-ning eng katta afzalligi - bu ruxsatdan mustaqillik. SVG fayllari vektor grafiklari bo'lgani uchun (pikselli rastrli tasvirlardan farqli o'laroq), siz tasvir sifatini yo'qotmasdan ularning o'lchamlarini o'zgartirishingiz mumkin. Bu, ayniqsa, yaxshi ko'rinishi va turli xil ekran o'lchamlari va qurilmalarida yaxshi ishlashi kerak bo'lgan sezgir veb-saytlarni yaratishda foydalidir. Siz sezgir veb-saytingizning oʻzgaruvchan oʻlchami va joylashuvi ehtiyojlarini qondirish uchun ularning sifatini hech qanday tarzda buzmasdan SVG fayllarini kattalashtirish yoki pasaytirish mumkin.
Odatda, SVG-lar oʻlchamidan qatʼi nazar, boshqa formatdagi rasmlarga qaraganda yumshoqroq va tiniqroq koʻrinishga ega.
Fayl hajmi
Tasviriy veb-saytlarda rastrli tasvirlardan (masalan, JPG, PNG, GIF) foydalanishning bir muammosi bu fayl hajmi. Rastrli tasvirlar vektor tasvirlari kabi masshtablashmagani uchun siz pikselga asoslangan tasvirlaringizni ular ko'rsatiladigan eng katta hajmda yetkazib berishingiz kerak. Buning sababi shundaki, siz har doim tasvirni kichikroq qilib, uning sifatini saqlab qolishingiz mumkin, lekin tasvirlarni kattalashtirish uchun xuddi shunday emas. Natijada koʻrilayotgan hajmdan ancha kattaroq tasvirlar paydo boʻladi, bu esa brauzerlarni katta hajmdagi fayllarni yuklab olishga majbur qiladi.
Bundan farqli o'laroq, vektor grafiklari kengaytirilishi mumkin, shuning uchun siz ushbu tasvirlar qanchalik katta bo'lishidan qat'i nazar, juda kichik fayl o'lchamlaridan foydalanishingiz mumkin. Bu oxir-oqibat saytning umumiy ishlashi va yuklab olish tezligini optimallashtiradi.
CSS uslubi
Siz SVG-ni toʻgʻridan-toʻgʻri sahifaning HTML-siga osongina qoʻshishingiz mumkin. Bu inline SVG deb nomlanadi. Inline SVG dan foydalanishning afzalliklaridan biri shundaki, grafiklar aslida brauzer tomonidan chizilganligi sababli tasvir faylini olish uchun HTTP soʻroviga ehtiyoj qolmaydi.
Yana bir afzallik: Siz CSS yordamida ichki SVG formatini yaratishingiz mumkin. SVG belgisi rangini o'zgartirish kerakmi? Ushbu rasmni grafik tahrirlash dasturida tahrirlash va keyin faylni qayta eksport qilish va yuklash o'rniga, SVG faylni bir necha qator CSS bilan o'zgartirishingiz mumkin. CSS-dan SVG-larni sichqonchani osib qo'yish holatlari va boshqa dizayn ehtiyojlari uchun ham o'zgartirishingiz mumkin.
Quyi chiziq
Inline SVG fayllarni CSS yordamida uslublash mumkinligi sababli ularda CSS animatsiyalaridan ham foydalanishingiz mumkin. CSS-ni o'zgartirish va o'tish - bu SVG-larga hayot qo'shishning ikkita oson usuli. Siz iPad endi qo'llab-quvvatlamaydigan Flash-dan foydalanmasdan sahifada Flash-ga o'xshash boy tajribaga ega bo'lishingiz mumkin. Darhaqiqat, Adobe Flash-ni 2020 yil oxiriga qadar to'xtatadi.
SVGdan foydalanish
SVGlar qanchalik kuchli boʻlsa, ular boshqa barcha tasvir formatlarini almashtira olmaydi. Boy rang chuqurligini talab qiladigan fotosuratlar hali ham-j.webp
SVG grafiklar, diagrammalar va kompaniya logotiplari kabi ba'zi murakkab rasmlar uchun ham mos keladi. Ushbu grafiklarning barchasi kengaytirilishi va CSS bilan uslublanishi mumkin.
Eski brauzerlarni qoʻllab-quvvatlash
Hozirgi SVG-ni qoʻllab-quvvatlash zamonaviy veb-brauzerlarda juda yaxshi. Ushbu grafiklarni qo'llab-quvvatlamaydigan yagona brauzerlar Internet Explorer-ning eski versiyalari (Microsoft endi qo'llab-quvvatlamaydi) va Android-ning bir nechta eski versiyalari. Umuman olganda, ko'ruvchi aholining juda kichik qismi hali ham ushbu brauzerlardan foydalanadi va bu raqam qisqarishda davom etmoqda. Bu sizning veb-saytingizda SVG-dan xavotirlanmasdan foydalanishingiz mumkinligini anglatadi.
Agar siz SVG uchun zaxira qilishni istasangiz, Filament guruhidagi Grumpicon kabi vositadan foydalaning. Bu resurs SVG rasm fayllaringizdan-p.webp
