Nima uchun SVG-ni bugungi kunda veb-saytingizda ishlatishingiz kerak

Scalable Vector Graphics dasturidan foydalanishning afzalliklari

Ölçeklenebilir Vektörel Grafika yoki SVG, bugungi kunda veb-sayt dizaynida muhim rol o'ynamoqda. Siz hozirda veb-dizayn ishlarida SVG-ni ishlatmaysiz, unda nima uchun siz bularni boshlashingiz kerak bo'lgan ayrim sabablar, shuningdek, ushbu fayllarni qo'llab-quvvatlamaydigan eski brauzerlar uchun foydalanishingiz mumkin bo'lgan uzilishlar.

Ruxsat

SVG ning eng katta foydasi - mustaqillikni qo`llab-quvvatlash. SVG fayllari pikselli raster tasvirlar o'rniga vektor grafikalar bo'lgani uchun, ular hech qanday tasvir sifatini yo'qotmasdan qayta boyutlandırılabilir. Bu sizga yaxshi qarash va ekranning turli xil o'lchamlari va qurilmalari bo'yicha yaxshi ishlashi kerak bo'lgan nozik veb-saytlarni yaratishda ayniqsa foydali.

SVG fayllari o'zgaruvchan o'lcham va joylashuvga moslashuvchan veb-saytingiz ehtiyojlarini qondirish uchun yuqoriga yoki pastga kattalashtirilishi mumkin va siz ushbu grafikalar sifatiga ta'sir qiladigan har qanday qadamni tashvishga solmasligingiz kerak.

Fayl hajmi

Rassomli tasvirlarni (JPG, PNG, GIF) sezgir veb-saytlarda ishlatish bilan bog'liq muammolardan biri bu tasvirlarning o'lchamidir. Raster rasmlarni vektorlarning bajaradigan usullarini o'lchamasligi uchun pikselli tasvirlarni siz ko'rsatadigan eng katta hajmga etkazish kerak. Buning sababi shundaki, siz har doim tasvirni kichikroq qilishingiz va sifatini saqlab qolishingiz mumkin, lekin tasvirni katta qilish uchun ham xuddi shunday emas. Natijada siz odatda odam ekranida ko'rsatiladigan rasmlarni ko'ra oladigan kattalikdagi tasvirlarga ega bo'lishingiz kerak, ya'ni ularni juda katta faylni yuklab olish keraksiz.

SVG bu savolga murojaat qiladi. Vektorli grafikalar ölçeklenebilir bo'lgani uchun, ushbu rasmlarni qancha katta bo'lishi kerak bo'lishidan qat'i nazar, juda kichik fayl hajmi mumkin. Bu natijada saytning umumiy ishlashi va yuklab olish tezligiga ijobiy ta'sir ko'rsatadi.

CSS uslubi

SVG kodi to'g'ridan-to'g'ri sahifaning HTML-ga qo'shilishi mumkin. Bu "inline SVG" deb nomlanadi. Inline SVGni ishlatishning foydalari shundan iboratki, grafikalar aslida sizning kodingiz asosida brauzer tomonidan tuzilganligi sababli, rasm faylini olish uchun HTTP so'rovi qilishning hojati yo'q. Yana bir foyda shundaki, inline SVG CSS bilan jihozlangan bo'lishi mumkin.

SVG belgisi rangini o'zgartirish kerakmi? Bu tasvirni tahrir qilish va eksport qilish va faylni qayta tiklash uchun ushbu tasvirni ochishning o'rniga, SVG faylini CSS-ning bir necha qatori bilan o'zgartirishi mumkin.

Bundan tashqari, SVG grafikalaridagi boshqa CSS uslublarini ularni hover holatlarida yoki muayyan dizayn ehtiyojlari uchun o'zgartirishingiz mumkin. Agar siz sahifangizga bir nechta harakatlar va interaktivlik kiritish uchun ushbu grafikalarni jonlantirishingiz mumkin.

Animatsiyalar

Inline SVG fayllari CSS bilan bezatilgan bo'lishi mumkin, chunki siz ularni CSS animatsiyalaridan ham foydalanishingiz mumkin. CSS transformatsiyasi va o'tishlari SVG fayllari uchun bir necha hayotni qo'shishning ikkita usulidan iborat. Bugungi kunda veb-saytlardagi Flash -ni ishlatish bilan yuzaga kelgan inqirozga putur etkazmasdan sahifadagi boy Flash-shunga o'xshash tajribalarni olishingiz mumkin.

SVG foydalanish

SVG-ning qudrati shundaki, ushbu grafikalar veb-saytingizda foydalanadigan har qanday rasm formatini o'zgartira olmaydi. Chuqur rang chuqurligini talab qiladigan fotosuratlar hali JPG yoki ehtimol PNG fayli bo'lishi kerak, ammo tasvirlar oddiy tasvirlar SVG sifatida bajarilishi uchun juda mos keladi.

SVG shuningdek, kompaniya logotiplari yoki grafikalar va grafikalar kabi murakkab suratlar uchun ham mos bo'lishi mumkin. Barcha grafikalar CSS-da va boshqalar bilan taqqoslanadigan, shuningdek, ushbu maqolada keltirilgan boshqa afzalliklardan bahramand bo'ladi.

Qadimgi brauzerlarni qo'llab-quvvatlash

SVG-ga joriy yordam zamonaviy veb-brauzerlarda juda yaxshi. Ushbu grafiklarni qo'llab-quvvatlaydigan yagona brauzerlar - Internet Explorerning eski versiyalari (Version 8 va undan keyingi versiyalar) va Androidning bir necha eski versiyalari. Umuman olganda, brauzerlarning juda kichik qismi bu brauzerlardan foydalanmoqda va bu raqam qisqarib bormoqda. Bu shuni anglatadiki, bugungi kunda veb-saytlarda SVG juda xavfsiz foydalanish mumkin.

Agar siz SVG-ni qayta tiklashni xohlasangiz, Filament Group-dan Grumpicon kabi vositadan foydalanishingiz mumkin. Ushbu resurs sizning SVG rasm fayllaringizni oladi va eski brauzerlar uchun PNG-ning qayta yuklashlarini yaratadi.

Jeremy Girard tomonidan 1/27/17 yil tahrirlangan