Grafik Vektor Boleh Skala, atau SVG, memainkan peranan penting dalam reka bentuk tapak web hari ini. Jika anda tidak menggunakan SVG dalam kerja reka bentuk web anda pada masa ini, berikut ialah beberapa sebab mengapa anda perlu mula berbuat demikian, serta sandaran yang boleh anda gunakan untuk penyemak imbas lama yang tidak menyokong fail ini.
Resolusi
Manfaat terbesar SVG ialah kebebasan resolusi. Oleh kerana fail SVG ialah grafik vektor (berbanding dengan imej raster berasaskan piksel), anda boleh mengubah saiznya tanpa kehilangan kualiti imej. Ini amat membantu apabila anda membuat tapak web responsif yang mesti kelihatan baik dan berfungsi dengan baik merentas pelbagai saiz dan peranti skrin. Anda boleh menskalakan fail SVG ke atas atau ke bawah untuk menampung perubahan saiz dan keperluan reka letak tapak web responsif anda tanpa menjejaskan kualitinya dalam apa jua cara.
Secara amnya, SVG mempunyai penampilan yang lebih licin dan tajam daripada imej format lain, tanpa mengira saiz.
Saiz Fail
Satu cabaran menggunakan imej raster (cth., JPG, PNG, GIF) pada tapak web responsif ialah saiz fail. Oleh kerana imej raster tidak menskalakan cara imej vektor, anda mesti menghantar imej berasaskan piksel anda dalam saiz terbesar yang akan dipaparkan. Ini kerana anda sentiasa boleh menjadikan imej lebih kecil dan mengekalkan kualitinya, tetapi perkara yang sama tidak benar untuk menjadikan imej lebih besar. Hasilnya ialah imej yang jauh lebih besar daripada saiz yang ia sedang dilihat, memaksa penyemak imbas untuk memuat turun fail besar.
Sebaliknya, grafik vektor boleh berskala, jadi anda boleh menggunakan saiz fail yang sangat kecil tanpa mengira saiz imej tersebut mungkin perlu dipaparkan. Ini akhirnya mengoptimumkan prestasi keseluruhan tapak dan kelajuan muat turun.
Penggayaan CSS
Anda boleh menambahkan SVG terus ke HTML halaman dengan mudah. Ini dikenali sebagai SVG sebaris. Satu faedah menggunakan SVG sebaris ialah, kerana grafik sebenarnya dilukis oleh penyemak imbas, tidak ada keperluan untuk permintaan HTTP untuk mengambil fail imej.
Faedah lain: Anda boleh menggayakan SVG sebaris dengan CSS. Perlu menukar warna ikon SVG? Daripada mengedit imej tersebut dalam perisian penyuntingan grafik dan kemudian mengeksport dan memuat naik fail sekali lagi, anda boleh menukar fail SVG hanya dengan beberapa baris CSS. Anda boleh menggunakan CSS untuk menukar SVG untuk keadaan tuding dan keperluan reka bentuk lain juga.
Barisan Bawah
Oleh kerana anda boleh menggayakan fail SVG sebaris dengan CSS, anda juga boleh menggunakan animasi CSS pada fail tersebut. Transformasi dan peralihan CSS ialah dua cara mudah untuk menambah beberapa kehidupan pada SVG. Anda boleh mendapatkan pengalaman seperti Flash yang kaya pada halaman tanpa menggunakan Flash-yang tidak lagi disokong oleh iPad. Malah, Adobe akan menghentikan Flash secara berperingkat pada penghujung tahun 2020.
Penggunaan SVG
Sekuat manapun SVG, mereka tidak boleh menggantikan setiap format imej lain. Foto yang memerlukan kedalaman warna yang kaya masih harus dalam format-j.webp
SVG juga sesuai untuk beberapa ilustrasi kompleks, seperti graf, carta dan logo syarikat. Semua grafik ini mendapat manfaat daripada berskala dan boleh digayakan dengan CSS.
Sokongan untuk Penyemak Imbas Lama
Sokongan semasa untuk SVG sangat bagus dalam penyemak imbas web moden. Satu-satunya penyemak imbas yang tidak mempunyai sokongan untuk grafik ini ialah versi lama Internet Explorer (yang tidak lagi disokong oleh Microsoft) dan beberapa versi lama Android. Secara keseluruhannya, peratusan yang sangat kecil daripada populasi penyemak imbas masih menggunakan penyemak imbas ini, dan jumlah itu terus mengecil. Ini bermakna anda boleh menggunakan SVG di tapak web anda tanpa bimbang.
Jika anda mahu memberikan sandaran untuk SVG, gunakan alat seperti Grumpicon daripada Kumpulan Filamen. Sumber ini mencipta-p.webp
