Kami telah menghabiskan banyak waktu membicarakan tentang penggunaan inline dan elemen. Anda dapat membangun sistem ikon yang sarat dengan keuntungan.
Anda dapat membuat sistem ikon SVG dengan cara lain. Anda bisa meletakkan sprite sheet grid tradisional dalam SVG dan melakukan sprite posisi latar belakang seperti yang biasa kita lakukan dengan gambar raster. Di masa mendatang, Anda akan dapat menggunakan pengidentifikasi fragmen, sehingga menjadi sedikit lebih mudah. Informasi lebih lanjut tentang hal-hal ini.
Cara lain adalah menyematkan URI data dari gambar SVG langsung ke file CSS. Itulah pendekatan yang diambil Grunticon.
Grunticon adalah plugin Grunt untuk mengotomatiskan sistem ikon SVG. Dibutuhkan folder yang penuh dengan SVG dan memprosesnya menjadi file CSS. Ada banyak selektor di sana, berdasarkan nama file gambar SVG, yang memiliki background-imageURI data SVG (meskipun bukan Base64).
Melakukannya dengan cara ini berarti Anda mendapatkan skalabilitas SVG dan manfaat ukuran file, tetapi hanya itu saja. Namun, seringkali hanya itu yang Anda butuhkan.
Mungkin bagian terbaik tentang Grunticon adalah memberi Anda semua yang diperlukan untuk fallback. Ini termasuk stylesheet alternatif untuk data URI PNG dan bahkan masing-masing PNG itu sendiri (yang dibuatnya untuk Anda). Plus, skrip yang Anda gunakan pada halaman Anda untuk menentukan dukungan dan hanya memuat lembar gaya yang sesuai.
Saya pikir adil untuk mengatakan bahwa ini membuat fallback lebih mudah ditangani daripada defs / teknik, untuk saat ini. Bukan berarti tidak mungkin.
Grumpicon adalah versi Grunticon dalam browser, yang kami gunakan dalam screencast ini.
Grunticon, saat saya menulis ini, sedang mengerjakan cara untuk meningkatkan secara progresif hingga SVG inline tertanam, yang akan sangat keren!