./prontouso.com

UTILITAS DESAIN

Pengonversi SVG ke Data URI

Konversi kode SVG mentah menjadi format Data URI CSS `url("data:image/svg+xml...")` yang dioptimalkan untuk digunakan langsung di stylesheet tanpa request HTTP tambahan.

Status alatBerjalan di browser Anda
Pratinjau

Konversi markup SVG menjadi data URI yang aman untuk CSS/HTML dan sebaliknya.

Cara kerja

  1. Masukkan data Anda

    Isi nilai yang diperlukan, tempel teks Anda, atau unggah file yang ingin diproses.

  2. Lihat hasil seketika

    Sebagian besar alat diperbarui secara langsung saat Anda mengetik; beberapa menggunakan satu tombol tindakan.

  3. Gunakan hasil Anda

    Salin, unduh, atau bagikan hasil yang dihasilkan — Anda selalu memiliki kendali penuh atas data Anda.

Privasi dan pemrosesan data — Berjalan secara lokal di browser Anda. Alat ini tidak mengunggah data Anda.

Apa itu Pengonversi SVG ke Data URI?

Encode SVG markup into a Data URI for CSS or HTML, or decode an existing SVG Data URI back to markup.

PAHAMI CARA KERJA ALAT

How to convert SVG to a Data URI

What it is for

SVG Data URIs are useful for small inline icons, CSS backgrounds, and compact prototypes.

Two-way conversion

  • Paste SVG markup to encode it.
  • Paste an SVG Data URI to decode it.
  • Copy the result for CSS or HTML.

Keep it small

Data URIs work best for small SVGs. Large illustrations are usually easier to maintain as separate files.

Data URI example

Inline a small SVG

A valid SVG starts with an svg element, comments are removed, and the remaining markup is percent-encoded after the data:image/svg+xml prefix.

<svg viewBox="0 0 10 10"> -> data:image/svg+xml,%3Csvg...

Data URI notes

Data URIs are convenient for small SVGs. Once the encoded string gets long, a separate .svg file is usually easier to cache, read, and maintain.

Pertanyaan yang Sering Diajukan (FAQ)

Can I use the result in CSS?

Yes. The encoded output is ready for CSS url(...) usage or HTML attributes.

Does it sanitize SVG?

No. It converts text only, so review SVGs from untrusted sources before using them.

Can it decode any Data URI?

It is focused on SVG Data URIs, not arbitrary file formats.

Does it minify the SVG?

Only comments and outer whitespace are removed. Internal text spacing is preserved so the SVG does not change visually.

Alat Terkait