Pengenkode URL SVG

Apa itu SVG?

SVG adalah singkatan dari Scalable Vector Graphics. SVG digunakan untuk mendefinisikan grafik berbasis vektor untuk Web dalam format XML. Setiap elemen dan atribut dalam file SVG dapat dianimasikan.

• Wikipedia - SVG

Bagaimana cara menggunakan SVG di CSS?

Untuk menggunakan kode SVG langsung di CSS, Anda perlu mengkodekan SVG terlebih dahulu. Anda dapat menggunakan alat SVG URL Encoder ini atau fungsi JavaScript encodeURIComponent(). URI data SVG yang telah dikodekan dapat digunakan dengan properti CSS background-image, border-image, dan mask melalui fungsi url(). Contoh: background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='red'/%3E%3C/svg%3E");

Bagaimana cara mengubah warna SVG di CSS?

Untuk mengubah warna SVG, Anda dapat menggabungkan properti CSS mask dan background-color. Contoh di bawah ini akan mengubah warna SVG menjadi biru. Contoh: mask: url(“data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='currentColor'/%3E%3C/svg%3E”); background-color: blue;

Apa itu URL?

URL (Uniform Resource Locator) adalah alamat dari sebuah sumber daya unik di internet. Ini adalah salah satu mekanisme utama yang digunakan browser untuk mengambil sumber daya seperti halaman HTML, dokumen CSS, gambar, dan sebagainya.

• MDN - What is a URL?

Bagaimana cara mengkodekan URL?

Untuk mengkodekan URL, Anda dapat menggunakan fungsi encodeURIComponent() yang mengkodekan URI dengan mengganti setiap kemunculan karakter tertentu dengan satu, dua, tiga, atau empat escape sequence yang mewakili pengkodean UTF-8 dari karakter tersebut. Dibandingkan dengan encodeURI(), fungsi ini mengkodekan lebih banyak karakter, termasuk yang merupakan bagian dari sintaksis URI.

• MDN - encodeURIComponent()

Bagaimana cara mendekode URL?

Untuk mendekode URL, Anda dapat menggunakan fungsi decodeURIComponent() yang mendekode URI dengan memperlakukan setiap escape sequence berformat %XX sebagai satu unit kode UTF-8 (satu byte). Dalam UTF-8, jumlah bit 1 terdepan pada byte pertama, yang bisa bernilai 0 (untuk karakter ASCII 1-byte), 2, 3, atau 4, menunjukkan jumlah byte dalam karakter tersebut.

• MDN - decodeURIComponent()