Ikuti kami di Blogger atau di Google News
...
Cara Paling Mudah Merubah SVG ke CSS Siap Pakai

Cara Paling Mudah Merubah SVG ke CSS Siap Pakai

Dalam tutorial berikut akan dijelaskan cara paling mudah merubah file svg yang siap digunakan untuk css dengan tools SVG Encoder

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.

Baca juga

Advertisement

Dare to be Different!

Posting Komentar

Tuliskan pertanyaan seputar topik artikel diatas! Atau pertanyaan out of topic di .
Use this tools to convert basic comment to html characters, then copy it to comment form


image quote pre code