Mangpaat maké scalable Véktor grafik
Scalable Véktor grafik, atawa SVG, maénkeun peran penting dina desain ramatloka kiwari. Lamun teu ayeuna maké SVG di web karya disain anjeun, di dieu sababaraha alesan naha anjeun kudu ngamimitian ngalakukeun kitu, kitu ogé fallbacks anjeun tiasa nganggo pikeun panyungsi heubeul nu teu ngarojong file ieu.
resolusi
Kauntungan pangbadagna ti SVG nyaeta kamerdekaan resolusi. Kusabab file SVG aya grafik vektor tinimbang Gambar raster dumasar-piksel, aranjeunna tiasa diatur ukuranana tanpa kaleungitan sagala kualitas gambar. Ieu hususna mantuan lamun anjeun nyieun situs web responsif nu kudu kasampak alus sarta dianggo ogé di sakuliah rupa-rupa ukuran layar jeung alat .
file SVG bisa diskalakeun kaluhur atanapi kahandap pikeun nampung ukuran sarta perenah nu ngarobah kaperluan ramatloka responsif anjeun sarta anjeun teu kudu salempang ngeunaan pamadegan grafik sanggeus compromised kualitas sagala hambalan tina jalan.
Ukuran file
Salah sahiji tantangan jeung maké gambar raster (JPG, PNG, GIF) kana situs web responsif nyaeta ukuran file jalma gambar. Kusabab Gambar raster ulah skala cara nu vektor leuwih ngalakukeun, Anjeun kedah nganteurkeun gambar basis piksel anjeun dina ukuran nu panggedéna di mana maranéhna bakal dipintonkeun. Ieu sabab salawasna bisa nyieun hiji gambar leutik sarta ngaropéa kualitas na, tapi sami teu leres pikeun nyieun gambar nu leuwih gede. Hasil tungtung téh nu mindeng gaduh gambar anu tebih leuwih badag batan aranjeunna keur ditingalikeun dina layar hiji jalma, nu hartina memang maranehna anu needlessly keur kapaksa ngundeur file anu kacida gedéna.
SVG alamat tantangan ieu. Kusabab éta grafik vektor nu scalable, anjeun tiasa gaduh ukuran file pisan leutik paduli sabaraha badag eta gambar bisa perlu ditampilkeun. Ieu pamustunganana bakal boga dampak positif kana kinerja tur ngundeur situs urang sakabéh speed.
CSS styling
Kode SVG ogé bisa ditambahkeun langsung ka HTML tina kaca. Ieu katelah "SVG inline". Salah sahiji mangpaat maké inline SVG éta ti grafik anu sabenerna digambar ku browser dumasar kana kode anjeun, aya teu kudu nyieun hiji pamundut HTTP pikeun dipulut hiji file gambar. benefit sejen nyaeta SVG inline bisa styled kalawan CSS.
Kudu ngaganti warna hiji ikon SVG? Gantina needing mun muka gambar anu di sababaraha jenis software na rohangan ngédit sarta ékspor sarta unggah berkas deui, anjeun bisa kalayan gampang bisa ngarobah éta file SVG kalawan sababaraha garis tina CSS.
Anjeun oge bisa make gaya CSS sejenna dina grafik SVG pikeun ngarobah éta on nagara hover atanapi pikeun kaperluan desain tangtu. Anjeun malah tiasa ngahirupkeun jalma grafik pikeun nambahkeun sababaraha gerakan jeung interactivity kana kaca.
animasi
Kusabab file inline SVG bisa styled kalawan CSS, anjeun tiasa nganggo CSS animasi dina éta ogé. CSS transforms na transisi anu dua cara gampang pikeun nambahkeun sababaraha hirup mun file SVG. Anjeun tiasa meunang pangalaman Flash-kawas euyeub on kaca tanpa succumbing ka nu downsides yén datangna kalawan ngagunakeun Flash dina situs web kiwari.
Mangpaat tina SVG
Salaku kuat saperti SVG téh, grafik ieu moal bisa ngaganti unggal format gambar lianna anjeun ngagunakeun dina ramatloka anjeun. Poto anu merlukeun jero warna jero masih bakal perlu janten JPG atawa sugan file PNG, tapi gambar basajan kawas ikon anu sampurna cocog bisa dieksekusi sakumaha SVG.
SVG ogé tiasa luyu pikeun ilustrasi leuwih kompleks, kawas logos parusahaan atawa grafik na grafik. Sadaya grafik bakal nguntungkeun ti mahluk scalable, bisa jadi styled kalawan CSS, sarta kaunggulan sejenna didaptarkeun dina artikel ieu.
Rojongan pikeun heubeul panyungsi
rojongan ayeuna keur SVG pisan alus dina panyungsi wéb modern. Hijina panyungsi nu bener kakurangan rojongan pikeun grafik ieu versi heubeul tina Internet Explorer (Vérsi 8 sarta handap) jeung sababaraha versi heubeul tina Android. Sadayana, perséntase pangleutikna ti populasi browsing masih migunakeun panyungsi ieu, sarta jumlahna nu terus ngaleutikan. Ieu ngandung harti yén SVG bisa dipaké geulis aman dina situs web kiwari.
Mun anjeun rék nyadiakeun fallback pikeun SVG, anjeun tiasa nganggo alat kawas Grumpicon ti Grup filamén. sumberdaya ieu bakal nyandak file gambar SVG anjeun tur jieun PNG fallbacks pikeun panyungsi heubeul.
Diédit ku Jeremy Girard on 1/27/17