Keuntungan nggunakake Scalable Vector Graphics
Scalable Vector Graphics, utawa SVG, nduwe peran penting ing desain situs web iki. Yen sampeyan ora nggunakake SVG sajrone karya desain web, ana sawetara alesan sing kudu dilakoni, uga pemandhangan sing bisa digunakake kanggo browser lawas sing ora ndhukung file kasebut.
Resolusi
Keuntungan terbesar SVG adalah resolusi kamardikan. Amarga file SVG minangka grafis vektor tinimbang gambar rana piksel, bisa diisi ukurane tanpa ngilangi kualitas gambar. Iki penting banget nalika sampeyan nggawe situs web sing responsif sing kudu katon apik lan bisa dianggo kanthi jangkauan variasi ukuran lan piranti layar .
File SVG bisa ditingkatake munggah utawa mudhun kanggo nampung ukuran ukuran lan tata letak ganti saka situs web responsif lan sampeyan ora perlu kuwatir babagan grafis kasebut kanthi kualitas kompromi langkah apa wae.
Ukuran File
Salah sijine tantangan kanthi nggunakake gambar raster (JPG, PNG, GIF) ing situs web responsif yaiku ukuran file saka gambar kasebut. Amarga gambar raster ora ngukur cara sing bakal digunakake dening vektor, sampeyan kudu ngirim gambar sing adhedhasar piksel kanthi ukuran paling gedhene sing bakal ditampilake. Iki amarga sampeyan bisa nggawe gambar sing luwih cilik lan tetep kualitas, nanging ora bener kanggo nggawe gambar luwih gedhe. Asil pungkasan iku sampeyan kerep duwe gambar sing luwih gedhe tinimbang sing ditampilake ing layar wong, sing tegese kudu dipindhah menyang file sing gedhe banget.
SVG alamat iki tantangan. Amarga grafis vektor bisa diukur, sampeyan bisa ukuran ukuran file cilik tanpa alesan carane gedhe gambar kasebut bisa diperlokake. Iki bakal nduwe dampak positif ing kinerja situs sakabèhé lan kecepatan ngundhuh.
CSS Styling
Kode SVG uga bisa ditambah langsung menyang HTML sawijining kaca. Iki dikenal minangka "inline SVG." Siji keuntungan saka nggunakake inline SVG yaiku amarga grafis sing bener ditarik dening browser adhedhasar kode sampeyan, ora perlu kanggo nggawe request HTTP kanggo njupuk file gambar. Manfaat liyane yaiku sing inline SVG bisa ditata nganggo CSS.
Kudu ngganti warna ikon SVG? Tinimbang mbutuhake mbukak gambar kasebut ing sawetara jinis piranti lunak editing lan ngekspor lan ngunggah file maneh, sampeyan mung bisa ngganti file SVG kanthi sawetara baris CSS.
Sampeyan uga bisa nggunakake gaya CSS liyane ing grafis SVG kanggo ngowahi ing negara kisaran utawa kanggo kabutuhan desain tartamtu. Sampeyan bisa malah ngenalke grafis kasebut kanggo nambah sawetara gerakan lan interaktivitas menyang kaca.
Animasi
Amarga file inline SVG bisa dicithak nganggo CSS, sampeyan bisa nggunakake animasi CSS ing piranti kasebut. Ngubah CSS lan transisi iku rong cara sing gampang kanggo nambah sawetara urip ing file SVG. Sampeyan bisa ngalami kaya pengalaman Flash-kaya ing kaca tanpa succumbing menyang kelainan sing kasedhiya nggunakake Flash ing situs web saiki.
Migunakake SVG
Minangka kuat minangka SVG, grafis iki ora bisa ngganti saben format gambar liyane sing digunakake ing situs web. Gambar sing mbutuhake kedalaman werna sing jero kudu isih dadi JPG utawa file PNG, nanging gambar prasaja kaya lambang bisa uga diasilake minangka SVG.
SVG uga cocok kanggo ilustrasi sing luwih kompleks, kayata logo perusahaan utawa grafik lan grafik. Kabeh grafis bakal entuk manfaat saka bisa diukur, bisa ditata nganggo CSS, lan kaluwihan liyane sing kadhaptar ing artikel iki.
Dhukungan kanggo Browser lawas
Dhukungan saiki kanggo SVG banget apik ing browser web modern. Browser mung sing ora duwe dukungan kanggo grafis iki versi lawas saka Internet Explorer (Versi 8 lan ngisor) lan sawetara versi lawas saka Android. Kabeh kabeh, persentase cilik saka populasi njelajah isih nggunakake browser iki, lan nomer kasebut terus ngeculake. Iki tegese SVG bisa digunakake kanthi cukup aman ing situs web iki.
Yen sampeyan pengin menehi kasil kanggo SVG, sampeyan bisa nggunakake alat kaya Grumpicon saka Filament Group. Sumber daya iki bakal njupuk file gambar SVG lan nggawe PNG fallbacks kanggo browser lawas.
Diedit dening Jeremy Girard ing 1/27/17