Cara Paling Mudah Merubah SVG ke CSS Siap Pakai

Cara Paling Mudah Merubah uri SVG ke CSS Siap Pakai - Sebelumnya sudah sempat kami bahas mengenai Cara Menggunakan Gambar SVG pada CSS dan HTML yang menjelaskan penggunaan SVG dari dasar

Berbeda dengan sebelumnya, pada artikel kali ini membahas cara paling mudah menggunakan file SVG sehingga bisa digunakan langsung pada CSS yang sedang Anda buat

Menggunakan file SVG pads CSS

Berbeda dengan penggunaan SVG secara inline. Pada CSS file SVG biasanya diletakan dalam property background dengan format penulisan seperti ini.

.your-class {
  background-image: url('data:image/svg+xml,...');
}

Namun sebelum bisa dipasang pada CSS dan bisa tampil data URI original harus di-Encode. Perbedaanya bisa dilihat dibawah ini.

Data URI SVG Original

<svg class='line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g><circle cx='17.47857' cy='17.49096' r='4.5'></circle><circle cx='6.50904' cy='6.52143' r='4.5'></circle><circle cx='5.00904' cy='18.99096' r='3'></circle><circle cx='18.99096' cy='5.00904' r='3'></circle></g></svg>

Data URI SVG setelah diencode

%3Csvg class='line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg%3E%3Ccircle cx='17.47857' cy='17.49096' r='4.5'%3E%3C/circle%3E%3Ccircle cx='6.50904' cy='6.52143' r='4.5'%3E%3C/circle%3E%3Ccircle cx='5.00904' cy='18.99096' r='3'%3E%3C/circle%3E%3Ccircle cx='18.99096' cy='5.00904' r='3'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E

Jika kita cermati bagian uri data yang ter-encode hanyalah beberapa bagian saja seperti <svg> kemudian <g> dan juga kode hex color #.

Cara Encode SVG secara manual

Merubah data uri SVG memang terlihat sedikit rumit tapi masih sangat memungkinkan untuk dilakukan. Caranya adalah merubah beberapa tag dan property menjadi . Apa saja yang perlu diubah? adalah berikut ini.

• Simbol< menjadi %3C
• Simbol > menjadi %3E
• Simbol # menjadi %23
• Supaya svg valid wajib menambahkan property xlmns seperti xmlns='http://www.w3.org/2000/svg' didalam tag pembuka SVG

Cara Encode SVG dengan Tools online

Melakukan Encode data uri SVG secara manual memang sedikit rumit dan butuh ketelitian. Apalagi jika datanya sangat kompleks.

Untuk mempermudah dalam meng-Encode SVG menjadi Anda bisa menggunakan Tools SVG to CSS Encoder yang kami sediakan. Caranya adalah sebagai berikut :

1. Pada Blog KuyMase Anda bisa membukanya dari menu Tools dan pilih SVG to CSS Encoder atau klik Tools SVG Encoder
2. Pada kolom Insert SVG silahkan Tempel/paste kode SVG yang ingin Anda Encode.
3. Secara otomatis hasil kode yang ter-encode akan tampil dan bisa Anda langsung Copydan pasang pada kode CSS.

Sekian cara mudah merubah dan menggunakan file svg pada CSS. Semoga bermanfaat dan jika ada pertanyaan jangan segan tuliskan komentar.