Faedah menggunakan Grafik Vektor Boleh Skala
Grafik Vektor berskala, atau SVG, memainkan peranan penting dalam reka bentuk laman web hari ini. Sekiranya anda tidak menggunakan SVG semasa dalam kerja reka bentuk web anda, berikut adalah beberapa sebab mengapa anda perlu memulakannya, dan juga pemulihan yang anda boleh gunakan untuk pelayar lama yang tidak menyokong fail ini.
Resolusi
Manfaat terbesar SVG adalah kemerdekaan penyelesaian. Oleh kerana fail SVG adalah grafik vektor dan bukannya imej raster berasaskan pixel, mereka boleh diubah saiznya tanpa kehilangan kualiti imej apa pun. Ini amat berguna apabila anda membuat laman web yang responsif yang perlu kelihatan baik dan berfungsi dengan baik dalam pelbagai saiz dan peranti skrin .
Fail SVG boleh ditingkatkan ke atas atau ke bawah untuk menampung keperluan saiz dan susun atur perubahan laman web responsif anda dan anda tidak perlu risau tentang grafik tersebut dengan kualiti yang dikompromi dengan apa-apa langkah.
Saiz fail
Salah satu cabaran menggunakan imej raster (JPG, PNG, GIF) di laman web responsif ialah saiz fail imej tersebut. Oleh kerana imej raster tidak membuat skala yang dilakukan oleh vektor, anda perlu menghantar imej berasaskan piksel anda pada saiz terbesar di mana ia akan dipaparkan. Ini kerana anda sentiasa boleh membuat imej lebih kecil dan mengekalkan kualitinya, tetapi perkara yang sama tidak benar untuk membuat imej lebih besar. Hasil akhirnya ialah anda sering mempunyai imej yang jauh lebih besar daripada yang ditunjukkan pada skrin seseorang, yang bermaksud mereka terpaksa memuat turun fail yang sangat besar.
SVG menangani cabaran ini. Oleh kerana grafik vektor adalah berskala, anda boleh mempunyai saiz fail yang sangat kecil tanpa mengira seberapa besar imej tersebut perlu dipaparkan. Ini akhirnya akan mempunyai kesan positif terhadap prestasi keseluruhan tapak dan kelajuan muat turun.
CSS Styling
Kod SVG juga boleh ditambah terus ke HTML halaman. Ini dikenali sebagai "inline SVG." Salah satu manfaat menggunakan SVG inline ialah kerana grafik sebenarnya ditarik oleh pelayar berdasarkan kod anda, tidak perlu membuat permintaan HTTP untuk mengambil fail imej. Manfaat lain adalah bahawa SVG sebaris boleh digelar dengan CSS.
Perlu menukar warna ikon SVG? Daripada perlu membuka imej itu dalam beberapa jenis perisian pengeditan dan mengeksport dan memuat naik fail sekali lagi, anda hanya boleh menukar fail SVG dengan beberapa baris CSS.
Anda juga boleh menggunakan gaya CSS lain pada grafik SVG untuk mengubahnya pada keadaan hover atau untuk keperluan reka bentuk tertentu. Anda juga boleh menghidupkan grafik tersebut untuk menambah beberapa pergerakan dan interaktiviti ke halaman.
Animasi
Kerana fail SVG sebaris boleh digayakan dengan CSS, anda boleh menggunakan animasi CSS pada mereka juga. Transformasi dan peralihan CSS adalah dua cara mudah untuk menambah kehidupan kepada fail SVG. Anda boleh mendapatkan pengalaman Flash seperti kaya di halaman tanpa mengalami kerugian yang datang dengan menggunakan Flash di laman web hari ini.
Penggunaan SVG
Sebaik sahaja SVG adalah, grafik ini tidak dapat menggantikan setiap format imej lain yang anda gunakan di laman web anda. Foto yang memerlukan kedalaman warna mendalam masih perlu JPG atau mungkin fail PNG, tetapi imej mudah seperti ikon sangat sesuai untuk dilaksanakan sebagai SVG.
SVG juga boleh sesuai untuk ilustrasi yang lebih rumit, seperti logo syarikat atau grafik dan carta. Semua grafik akan mendapat manfaat daripada berskala, dapat ditata dengan CSS, dan kelebihan lain yang disenaraikan dalam artikel ini.
Sokongan untuk Pelayar Lama
Sokongan semasa untuk SVG sangat baik dalam pelayar web moden. Satu-satunya penyemak imbas yang benar-benar kekurangan sokongan untuk grafik ini adalah versi Internet Explorer yang lebih lama (Versi 8 dan ke bawah) dan beberapa versi Android yang lebih lama. Semuanya, peratusan yang sangat kecil dari populasi pelayaran masih menggunakan pelayar ini, dan jumlah itu terus mengecil. Ini bermakna SVG boleh digunakan dengan selamat di laman web hari ini.
Sekiranya anda ingin memberikan sandaran kepada SVG, anda boleh menggunakan alat seperti Grumpicon dari Filament Group. Sumber ini akan mengambil fail imej SVG anda dan membuat pemotongan PNG untuk pelayar lama.
Disunting oleh Jeremy Girard pada 1/27/17