SVG ke HTML

Konversi SVG ke HTML secara online

Pilih file SVG atau tempel markup-nya untuk menghasilkan SVG inline bagi halaman HTML. Lihat pratinjau hasilnya, sesuaikan pengaturan optimasi, lalu salin kodenya. Semua proses parsing, optimasi, dan konversi berjalan secara lokal di browser Anda tanpa mengirim SVG ke server.

Siapkan SVG inline yang responsif

Pertahankan viewBox untuk menjaga sistem koordinat SVG. Hapus lebar dan tinggi tetap jika SVG memiliki viewBox yang dapat digunakan, lalu atur ukurannya di CSS Anda sendiri.

Memahami ukuran dan penghematan SVG

“Ukuran asli” adalah ukuran SVG yang Anda masukkan. “Ukuran SVG setelah optimasi” adalah ukurannya setelah diproses dengan opsi yang Anda pilih, seperti menghapus komentar, membulatkan koordinat, dan memadatkan kode. Ukuran ditampilkan dalam kB, dengan 1 kB sama dengan 1.000 byte. “Penghematan” adalah persentase pengurangannya: dari 10 kB menjadi 7 kB berarti hemat 30%. Jika output lebih besar, misalnya karena format yang mudah dibaca, yang ditampilkan adalah “Kenaikan ukuran”. Angka-angka ini membandingkan markup SVG, bukan ukuran ekspor JSX, React, Data URI CSS, atau Base64.

Presisi desimal dan indentasi

Presisi desimal menentukan berapa digit yang dipertahankan setelah titik desimal pada koordinat dan atribut numerik. Dengan presisi 2, 12.34567 menjadi 12.35. Lebih sedikit angka desimal dapat memperkecil ukuran file, tetapi bisa mengubah detail halus; nilai bawaan 3 hanyalah titik awal, jadi periksa pratinjaunya. Indentasi menggunakan 2 spasi, 4 spasi, atau tab agar kode HTML dan JSX lebih mudah dibaca tanpa mengubah gambar. “Minifikasi SVG” menghapus spasi pemformatan yang tidak perlu untuk memadatkan output, sehingga indentasi dinonaktifkan selama minifikasi aktif.

HTML, JSX, React, dan Data URI SVG

Output HTML berupa markup SVG inline dan diunduh sebagai file SVG. JSX menyesuaikan nama atribut dan gaya inline untuk React. Komponen React membungkusnya dalam fungsi TypeScript yang menerima props SVG standar. Data URI CSS menghasilkan deklarasi background-image; Base64 menghasilkan URI gambar SVG yang dienkode. Statistik ukuran menggambarkan SVG yang telah dioptimalkan, bukan format terenkode yang lebih besar. Periksa ID sebelum memakai beberapa salinan inline di satu halaman.

Alur kerja SVG yang statis dan lokal

Pratinjau berupa gambar terisolasi, bukan markup halaman yang dapat dieksekusi. Skrip, HTML tersemat, animasi, gambar eksternal, dan style sheet dihapus. Gaya presentasi inline yang didukung dan referensi fragmen lokal tetap dipertahankan. Alat ini ditujukan untuk gambar statis; fitur yang tidak didukung dapat mengubah tampilannya. currentColor mengubah warna isian dan garis tepi yang solid serta mewarisi warnanya saat digunakan inline; pratinjau gambar memakai konteks warnanya sendiri.