Sekilas tentang SVG
Scalable Vector Graphics, atau biasanya disebut sebagai SVG, merupakan gambar vektor dengan format grafis 2 dimensi yang berbasis eXtensible Markup Language dan memiliki dukungan untuk animasi, filter, gradient, serta fitur interaktif lainnya.SVG 1.1 Edisi ke-2 merupakan rilisan terakhir yang juga sekaligus dijadikan W3C Recommendation. Fitur-fitur dari SVG 1.1 ini sudah banyak didukung oleh browser populer, tetapi ada beberapa yang belum sepenuhnya didukung oleh semua browser; diantaranya SMIL untuk animasi dan SVG Fonts untuk menampilkan font tertentu di dalam SVG.
Contoh SVG
Dibawah ini dilampirkan contoh file SVG dari Logo TaufiqHdyt.comImplementasi FontAwesome SVG dengan Metode Sprite
Secara umum, cara kerja Metode Sprite adalah sebagai berikut; pertama mendefinisikan Symbol suatu icon dan menaruhnya di bagian akhir dokumen HTML, lalu di bagian tertentu dari dokumen tersebut memanggil ID Symbol icon yang sebelumnya telah didefinisikan, maka semua pemanggil ID tersebut akan menyisipkan icon di dalamnya.Tahap Implementasi
Ada dua cara implementasi; dengan membuat file SVG external, yang kedua dengan mendefinisikannya langsung di bagian akhir dokumen.Cara yang digunakan pada tutorial ini adalah yang kedua.
- Siapkan file Sprite, bisa download di Repository GitHub Font Awesome, atau melalui link di bawah laman ini.
- Buka menggunakan teks editor kesayangan.
- Pilih semua Ikon yang akan digunakan, yang tidak digunakan bisa dihapus.
Atau jika Font yang digunakan sedikit, buat file SVG baru lalu copy paste semua icon yang akan digunakan. Contoh format-nya seperti di bawah ini.
Keterangan:<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg"> <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <symbol id="blogger" viewBox="0 0 448 512"> <path d="M162.4 196c4.8-4.9 6.2-5.1 36.4-5.1 27.2 0 28.1.1 32.1 2.1 5.8 2.9 8.3 7 8.3 13.6 0 5.9-2.4 10-7.6 13.4-2.8 1.8-4.5 1.9-31.1 2.1-16.4.1-29.5-.2-31.5-.8-10.3-2.9-14.1-17.7-6.6-25.3zm61.4 94.5c-53.9 0-55.8.2-60.2 4.1-3.5 3.1-5.7 9.4-5.1 13.9.7 4.7 4.8 10.1 9.2 12 2.2 1 14.1 1.7 56.3 1.2l47.9-.6 9.2-1.5c9-5.1 10.5-17.4 3.1-24.4-5.3-4.7-5-4.7-60.4-4.7zm223.4 130.1c-3.5 28.4-23 50.4-51.1 57.5-7.2 1.8-9.7 1.9-172.9 1.8-157.8 0-165.9-.1-172-1.8-8.4-2.2-15.6-5.5-22.3-10-5.6-3.8-13.9-11.8-17-16.4-3.8-5.6-8.2-15.3-10-22C.1 423 0 420.3 0 256.3 0 93.2 0 89.7 1.8 82.6 8.1 57.9 27.7 39 53 33.4c7.3-1.6 332.1-1.9 340-.3 21.2 4.3 37.9 17.1 47.6 36.4 7.7 15.3 7-1.5 7.3 180.6.2 115.8 0 164.5-.7 170.5zm-85.4-185.2c-1.1-5-4.2-9.6-7.7-11.5-1.1-.6-8-1.3-15.5-1.7-12.4-.6-13.8-.8-17.8-3.1-6.2-3.6-7.9-7.6-8-18.3 0-20.4-8.5-39.4-25.3-56.5-12-12.2-25.3-20.5-40.6-25.1-3.6-1.1-11.8-1.5-39.2-1.8-42.9-.5-52.5.4-67.1 6.2-27 10.7-46.3 33.4-53.4 62.4-1.3 5.4-1.6 14.2-1.9 64.3-.4 62.8 0 72.1 4 84.5 9.7 30.7 37.1 53.4 64.6 58.4 9.2 1.7 122.2 2.1 133.7.5 20.1-2.7 35.9-10.8 50.7-25.9 10.7-10.9 17.4-22.8 21.8-38.5 3.2-10.9 2.9-88.4 1.7-93.9z"></path> </symbol> </svg> </svg>
-id="blogger"
adalah nama ID Icon, nama pemanggil.
-<symbol> ... </symbol>
adalah satu Icon.
- Setelah semua Icon terdefinisikan, sekarang masukkan seluruh definisi tersebut ke akhir Template Blogger atau Website, di atas
</body>
- Atur Styling untuk Container Icon-nya dengan cara menambahkan kode CSS ini di-atas kode
</head>
atau</b:skin>
.
.icon { display:inline-block; } .icon svg { width:1rem; height:1rem; fill:#000000; }
- Untuk memanggil, menggunakan format sebagai berikut.
Keterangan:<div class="icon"> <svg> <!-- Call ID --> <use href="#blogger";/> </svg> </div>
- Tambahkan pembungkus Icon tersebut (.icon) agar tampilan Icon-nya tidak rusak.
- Untuk memanggil Icon tertentu, tinggal ganti kodehref="#id-icon"
menjadi ID Icon yang diinginkan.
- Sebelum template di-upload, jangan lupa untuk backup terlebih dahulu.
- Simpan
Download Links
Download | Type | Size |
---|---|---|
brands.svg | SVG | 450 KB |
regular.svg | SVG | 50 KB |
solid.svg | SVG | 610 KB |
Referensi:
[1] https://fontawesome.com/how-to-use/on-the-web/advanced/svg-sprites