Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. SVG
Webdesign

Cara Menerapkan Sprite SVG Lintas-Browser

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Dalam tutorial ini saya akan menunjukkan penerapan dasar beberapa ikon SVG, bagaimana memberikan fallback, dan bagaimana mengubahnya menjadi sprite SVG.

Penerapan SVG Dasar

Untuk tujuan tutorial ini saya akan menggunakan satu halaman, yang akan bertindak sebagai semacam kartu bisnis online. Ini akan secara singkat mengenalkan saya dan menampilkan tiga profil jaringan yang relevan dengan pekerjaan saya.

cons dari flaticon

Dari tangkapan layar di atas, Anda dapat melihat bahwa saya menggunakan ikon (untuk Twitter, Dribbble dan GitHub) untuk secara simbolis merujuk profil jaringan saya. Saya mengunduh ikon ini dari flaticon, yang memiliki berbagai ikon dan simbol dalam format vektor dan raster.

PNG dan SVG

Kita akan mulai dengan menggunakan versi PNG dari ikon-ikon ini, demi kompatibilitas mundur, maka kita akan mempersiapkan versi SVG untuk digunakan browser yang mendukung.

Saya menggunakan Sketch untuk menampilkan ikon PNG saya, jadi saya akan menggunakannya lagi untuk menyiapkan ikon saya untuk penggunaan SVG.

My chosen icons in Sketch with named layers groups

Ikon pilihan saya di Sketch dengan layers groups yang diberi namaJika Anda melihat tangkapan layar di atas, Anda akan melihat bahwa saya telah menamai semua grup dan bentuk saya di panel sebelah kiri dengan tepat (Adobe Illustrator memiliki tampilan serupa di panel Layers). Penting untuk memberi nama semua aset Anda dengan benar, tidak hanya untuk membantu Anda tetap teratur, tetapi juga untuk apa yang akan kita gunakan untuk nanti di tutorial ini.

Mengekspor SVG

Sekarang saya akan mengekspor ikon sebagai SVG, yang sangat mudah dengan slicing tool di Sketch. Untuk informasi lebih lanjut tentang bagaimana ini bekerja, lihat Memahami Opsi Ekspor Sketch. Saya akan mengekspornya sebagai file terpisah dan menempatkannya ke dalam direktori gambar proyek saya.

Biasanya, untuk menunjukkan gambar di situs Anda, Anda akan merujuk aset tersebut dengan elemen yang beratribut src atau yang serupa:

Namun dengan SVG ada beberapa cara yang berbeda yang dapat kita gunakan dalam dokumen HTML. Misalnya, kita bisa menggunakan kode SVG sebenarnya secara langsung - kode yang mungkin terlihat seperti ini:

Ini adalah salah satu ikon yang saya ekspor, dalam format XML. Kode ini cukup banyak seperti HTML (ini adalah format struktural) yang berarti kita bisa memasukkannya langsung ke halaman.

Menambahkan SVG Inline ke HTML

Mari kita mulai dengan halaman HTML dasar yang menyertakan ikon PNG dengan jangkar mereka, dan sebuah kontainer:

Sekarang saya akan menyalin dan menyisipkan kode SVG, namun saya akan mengabaikan baris teratas yang mengacu pada pengkodean karakter file dan rincian atribut file lainnya. Dokumen HTML sudah berisi informasi itu sehingga kita tidak perlu menduplikatnya.

Saya telah menempatkan SVG tepat di atas ikon PNG yang sesuai di dalam halaman HTML. Untuk saat ini saya akan membungkus garis gambar PNG reguler dalam tag komentar untuk menghentikannya muncul di samping versi SVG.

SVG yang lebih bersih

Saya juga akan membersihkan kode dalam SVG saya. Menghapus atribut elemen bersifat opsional karena sebagian besar potongan yang saya hapus tidak akan mengubah bagaimana SVG akan bertindak. Ini adalah sebelum dan sesudah jika Anda ingin melakukan hal yang sama dengan milik Anda:

Catat elemen yang telah saya hapus. Elemen <title>, <desc>, dan <defs> tidak dibutuhkan sekarang, namun kita mungkin memerlukannya nanti dalam tutorial ini. Ada juga beberapa elemen <g> yang mengacu pada groups, dan sesuai dengan kelompok yang dibuat dalam dokumen Sketch saya. Secara default Sketch menempatkan semuanya di dalam halaman, maka elemen grup <g id=”Page-1”… . Anda bisa menghapus ini karena tidak ada gunanya bagi kita (kelompok di dalamnya yang lebih penting). Sketch menyediakan pilihan untuk menghasilkan SVG yang lebih bersih saat mengekspor, namun tidak ada salahnya membersihkan kode itu sendiri.

Bagian terakhir dari langkah ini adalah menghapus atribut height dan width di dalam elemen SVG itu sendiri. Ini perlu dikompensasi dalam file CSS saya, seperti yang ditunjukkan di bawah ini:

Jika Anda telah mengikuti langkah-langkah saya, Anda akan melihat di browser, gambar vektor grafis Anda yang tajam dan bersih.

Tip: Periksa apakah grafik sebenarnya adalah SVG dengan memperbesar pada Command-+ saat melihatnya di browser. Grafiknya harus tetap tajam tidak peduli seberapa jauh Anda memperbesar.

Menyediakan sebuah Fallback

Jika Anda menggunakan ini untuk pekerjaan klien, Anda mungkin bertanya-tanya seperti apa dukungan browser-nya. SVG inline bekerja di semua browser kecuali Internet Explorer 8 (dan sebelumnya) dan Opera Mini. Can I Use saat ini mengatakan bahwa IE8 digunakan sekitar 4% secara global dan Opera Mini sekitar 3%. Jadi, dalam kasus Anda, Anda mungkin tidak perlu memberikan fallback, namun saya akan menunjukkan sebuah solusi.

Berikut adalah salah satu ikon SVG saya di dalam halaman, dan Anda akan melihat bahwa ikon PNG asli saya masih ada tapi dibungkus dalam komentar. Gambar PNG ini akan menjadi fallback kita.

Menghapus Komentar

Pertama saya akan menghapus komentarnya. Kita sekarang perlu memindahkan <img> ke atas dan ke dalam elemen <svg> itu sendiri, tepat setelah grup berisi ikon kita yang sebenarnya.

Selanjutnya, saya akan membungkus <img> di elemen spesifik SVG yang disebut foreignObject. Jika browser tidak dapat memahami informasi vektor SVG maka ia akan mengacu pada "objek asing" dan akan melanjutkan untuk menggunakan <img> di dalamnya. Kita juga perlu membiarkan browser mengetahui bahwa ia harus memilih versi vektor jika mendukungnya. Inilah fungsi elemen <switch>, yaitu apa yang telah saya bungkus baik dari grup maupun foreignObject.

Inilah markup yang diperbarui:

Jika Anda telah mengikuti proses ini dan menyusun HTML Anda seperti milik saya, maka grafis Anda harus beralih ke gambar raster asli Anda jika browser tidak mendukung SVG.

Membuat Sprite SVG

Sprite SVG bertindak cukup banyak seperti sprite gambar. Dalam bentuk mereka yang paling sederhana, sprite adalah kumpulan elemen grafis yang digabungkan menjadi satu gambar. Setiap gambar kemudian dipilih menggunakan CSS dan HTML, biasanya dengan menentukan koordinat dan "jendela" tampilan.

Dua manfaat utama untuk ini adalah waktu muat halaman yang disempurnakan, alur kerja yang lebih baik, dan konsistensi antara elemen grafis pada halaman. Poin kedua dan ketiga berlaku sangat baik untuk sprite SVG. Alih-alih beberapa blok kode SVG yang dikotori di seluruh halaman kita, kita hanya memiliki satu tempat untuk memperbarui SVG kita.

Untuk memulainya saya akan membuat elemen <svg> baru di dalam elemen <head> dari halaman saya, tepat sebelum tag penutupnya. SVG baru ini akan menyimpan semua ikon yang sebelumnya saya miliki di dalam halaman.

Selanjutnya saya perlu memindahkan ikon saya ke dalamnya. Saya tidak perlu memindahkan seluruh SVG, hanya elemen group dan isinya. Dengan ini saya bisa menumpuk di elemen <svg> di head.

Catatan: Jika Anda merasa nyaman menggunakan Grunt, ada plugin yang akan mengotomatisasi penggabungan semua file SVG Anda yang terpisah.

Menyembunyikan!

Sekarang kita memiliki semua ikon di head, kita perlu menyembunyikannya; menambahkan atribut display="none" ke <svg> yang baru berarti semua ikon tidak akan muncul di bagian atas halaman.

Mendefinisikan Setiap Ikon

Langkah selanjutnya adalah mendefinisikan setiap ikon sehingga kita dapat menggunakannya kembali di halaman, dimana elemen defs yang kita hapus sebelumnya telah kembali dalam permainan. Dengan menggunakannya untuk membungkus semua kelompok, dengan demikian membungkus semua ikon saya, saya dapat menyatakan bahwa saya ingin menggunakan kembali ini di tempat lain pada halaman.

Menggunakan Ikon-ikonnya

Ikon-ikonnya sekarang didefinisikan tapi kami memerlukan metode untuk menggunakannya, dan itulah fungsi elemen use. Elemen <use> memungkinkan kita mengambil elemen apa pun di dalam elemen <defs> dan menariknya ke mana saja di halaman kita. Cara kita memilih elemen adalah dengan menggunakan ID-nya, itulah sebabnya mengapa penting untuk memberi nama ikon kita di dokumen Sketch awal.

Catat ID di contoh di atas dan kemudian lihat bagaimana saya mereferensikan masing-masing dengan elemen use seperti <use xlink:href="#twitter-icon"></use>.

Jika Anda telah mengikuti langkah-langkahnya dengan benar, Anda tidak akan melihat perubahan pada bagaimana grafik Anda muncul, namun Anda sekarang dapat menggunakannya kembali (dengan ukuran apa pun yang Anda inginkan) dan menerapkannya beberapa kali di halaman.

Menyempurnakan Sprite SVG Anda

Satu poin tambahan untuk menggunakan sprite SVG adalah kode halaman yang terlihat jauh lebih bersih dan bisa dibaca dengan lebih mudah oleh orang lain yang bekerja dengan kode Anda. Kita bisa memperbaiki hal ini lebih jauh lagi.

Di bawah ini saya telah mengubah elemen <g> di sprite SVG saya ke elemen symbol, ditambah lagi saya telah memindahkan atribut viewbox dari elemen SVG di halaman ke elemen symbol yang baru.

Menggunakan <symbol> tidak hanya lebih semantik, setidaknya dalam contoh saya, tapi juga menghemat pengulangan atribut viewbox beserta elemen <svg> dan <use> kita. Kita dapat mengembalikan elemen title dan desc yang telah dihapus sebelumnya dan menggunakannya untuk meningkatkan aksesibilitas pada ikon kita.

Catatan: Ingatlah bahwa isi elemen <desc> ditampilkan secara default di IE7.

Dengan mengubah elemen group menjadi symbol, kita dapat membuat semua penyempurnaan ini. Kita bisa menghapus elemen <defs> dari sprite SVG juga, sehingga membuat kode kita lebih bersih lagi.

Kesimpulan

Dan itu dia, yang dimulai hanya sebagai ikon berbasis raster kini telah menjadi ikon berbasis vektor yang sangat hebat yang dapat digunakan kembali dan diubah ukurannya dengan mudah. Saya harap Anda menikmati tutorial ini dan menikmati bermain dengan SVG di proyek Anda selanjutnya.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.