Penulis Scaleable Vector Graphic (SVG) adalah format gambar yang menggunakan XML (Extensible Markup Language) sebagai dasar untuk membentuk gambar vektor 2 dimensi. SVG sendiri dikembangkan oleh Word Wide Web Consortium (W3C) sejak tahun 1999 - Wikipedia.
Dalam sejarah format SVG masih jarang digunakan untuk kepentingan web karena ada browser yang tidak support. Namun sekarang sudah banyak yang menggunakannya untuk pembuatan web, karena icon SVG sudah mendukung hampir semua browser seperti Mozila Firefox, Internet Explorer, Google Chrome, Opera dan Safari sudah mendukung format SVG. Bahkan format SVG merupakan recomendasi dari W3C yang didukung browser versi desktop maupun mobile.
Sebenarnya ada beberapa cara untuk menggunakan icon seperti Font Awesome, Font Material dan lainya yang masih sejenis. Namun keduanya masih menggunakan script external yang nanti tentu akan mempengaruhi kecepatan loading blog Anda.
Untuk itu menggunakan icon SVG bisa menjadi solusi agar kecepatan blog lebih ringan karena tidak membutuhkan script external namun bahasa markup atau XML saja pada HTML maupun CSS situs Anda.
2. Pilihlah salah satu icon lalu akan muncul dialog box seperti gambar berikut.
3. Kemudian klik icon </> dan pilih menu "View SVG" untuk mendapatkan kodenya.
4. Copy kode tersebut untuk nantinya dipasang pada HTML.
Anda dapat mengubah langsung ukuran Width dan Height sesuai keinginan dan mengganti nilai warna pada atribut Fill.
2. Caranya masih sama dengan yang pertama, cuma CSS inline nya kita pindahkan pada CSS internal blog, sehingga menjadi seperti berikut.
HTML
CSS
3. Jika Anda ingin langsung menggunakan icon SVG pada penggunaan CSS, misalnya sebagai "background-image" atau pseudo-element :before atau :after lakukan seperti dibawah ini.
Silahkan ganti nilai path dan fill nya dengan kode yang akan digunakan.
Nilai path biasanya seperti d='M........Z'
Nilai fill adalah warna fill='#fff'
Catatan :
kode < diganti %3C
kode > diganti %3E
kode # diganti %23
Tujuan mengganti kode adalah agar di terima dan tampil pada semua Browser. Sekian dulu semoga bermanfaat dan penulis minta maaf jika ada kesalahan atau kekeliruan.
Dalam sejarah format SVG masih jarang digunakan untuk kepentingan web karena ada browser yang tidak support. Namun sekarang sudah banyak yang menggunakannya untuk pembuatan web, karena icon SVG sudah mendukung hampir semua browser seperti Mozila Firefox, Internet Explorer, Google Chrome, Opera dan Safari sudah mendukung format SVG. Bahkan format SVG merupakan recomendasi dari W3C yang didukung browser versi desktop maupun mobile.
Keuntungan Menggunakan SVG
- Gambar SVG tidak akan pecah dan bisa di besarkan ukuranya sampai tak terhingga tanpa mengurangi kualitas dan resolusi.
- Ukuranya kecil bahkan masih bisa dikompres lagi serta tampil baik pada layar retina sehingga aman untuk di zoom.
- Lebih ringan kecepatan loadingnya karena menggunakan XML atau tanpa memanggil script external.
Sebenarnya ada beberapa cara untuk menggunakan icon seperti Font Awesome, Font Material dan lainya yang masih sejenis. Namun keduanya masih menggunakan script external yang nanti tentu akan mempengaruhi kecepatan loading blog Anda.
Untuk itu menggunakan icon SVG bisa menjadi solusi agar kecepatan blog lebih ringan karena tidak membutuhkan script external namun bahasa markup atau XML saja pada HTML maupun CSS situs Anda.
Cara Mendapatkan Icon SVG
1. Pertama kunjungi website Material Design Icons. Web ini menyediakan banyak pilihan icon material desain jenis SVG yang nantinya dapat disimpan dan digunakan di blog.
2. Pilihlah salah satu icon lalu akan muncul dialog box seperti gambar berikut.
3. Kemudian klik icon </> dan pilih menu "View SVG" untuk mendapatkan kodenya.
4. Copy kode tersebut untuk nantinya dipasang pada HTML.
Cara Menggunakan icon SVG
1. Caranya cukup mudah, letakan kode icon SVG tadi pada HTML yang di kehendaki di template blog Anda sesuai kebutuhan. Dan sebagai contoh saya meletakan kode untuk icon search box di blog, maka tag HTML nya sebagai berikut.
<div class='icon-search'> <svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="#000000" d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" /> </svg> </div>
Anda dapat mengubah langsung ukuran Width dan Height sesuai keinginan dan mengganti nilai warna pada atribut Fill.
2. Caranya masih sama dengan yang pertama, cuma CSS inline nya kita pindahkan pada CSS internal blog, sehingga menjadi seperti berikut.
HTML
<div class='icon-search'>
<svg viewBox="0 0 24 24">
<path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
</svg>
</div>
CSS
<style>
.icon-search svg{width:24px;height:24px"}
.icon-search svg path{fill="#000000"}
</style>
3. Jika Anda ingin langsung menggunakan icon SVG pada penggunaan CSS, misalnya sebagai "background-image" atau pseudo-element :before atau :after lakukan seperti dibawah ini.
<style>
.icon-search {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z' fill='%23fff'/%3E%3C/svg%3E");
background-color:#008c5f;
background-repeat: no-repeat;
background-position: center center;
background-size: 25px;
}
</style>
Silahkan ganti nilai path dan fill nya dengan kode yang akan digunakan.
Nilai path biasanya seperti d='M........Z'
Nilai fill adalah warna fill='#fff'
Catatan :
kode < diganti %3C
kode > diganti %3E
kode # diganti %23
Tujuan mengganti kode adalah agar di terima dan tampil pada semua Browser. Sekian dulu semoga bermanfaat dan penulis minta maaf jika ada kesalahan atau kekeliruan.
EmoticonEmoticon