How does HTML to SVG work?

Your HTML is placed inside an SVG foreignObject, which browsers render as part of the vector so it scales without pixelation.

Do external images and fonts work?

Inline CSS and data-URI images work best. External resources may not load when the SVG is opened outside your site.

Is my HTML uploaded anywhere?

No. The SVG is generated entirely in your browser.

Can I set the size of the SVG?

Yes. Enter any width and height in pixels before generating. They define the SVG canvas and its viewBox, and because the file is a vector you can scale it later without losing sharpness.

Why does my SVG look blank in some graphics apps?

foreignObject is rendered by web browsers, but many graphics editors such as Inkscape or Illustrator do not fully support it. For best results use the SVG on web pages or in browser-based tools.

Can I turn the result into a PNG or JPG instead?

This tool keeps your markup as a vector and never rasterizes it. If you need a pixel image, render the same HTML with our HTML to Image tool, which outputs PNG, JPG or PDF.

HTML ke SVG

Bungkus HTML dan CSS inline Anda dalam SVG yang dapat diskalakan menggunakan foreignObject. Pratinjau secara langsung, lalu unduh sebagai .svg, PNG, atau JPG. Semuanya berjalan di peramban Anda.

Markup HTML

Lebar

Tinggi

Format

Pratinjau

Sumber SVG

HTML di Dalam Vektor yang Dapat Diskalakan

Elemen foreignObject pada SVG memungkinkan Anda menyematkan HTML dan CSS aktif di dalam gambar vektor. Hasilnya dapat diskalakan dengan mulus dan bisa digunakan di mana pun SVG diterima — cocok untuk badge, kartu, dan label kaya konten.

Mengapa Membungkus HTML dalam SVG?

SVG yang dibuat dengan foreignObject bukanlah screenshot - markup Anda tetap aktif di dalam file. Teksnya tetap berupa teks sungguhan, inline CSS Anda tetap memberi gaya padanya, dan tidak ada yang dirasterisasi, sehingga grafiknya tetap tajam sempurna pada tingkat zoom berapa pun, sementara ukuran filenya biasanya hanya beberapa kilobyte. Ini menjadikan pendekatan ini sangat cocok untuk badge README, kartu profil, widget dashboard, dan tempat lain mana pun di mana Anda ingin potongan HTML bergaya berperilaku seperti satu file gambar yang bisa Anda hosting, sematkan, atau kelola versinya.

Vektor atau Screenshot - Mana yang Anda Butuhkan?

Gunakan alat ini bila hasilnya akan ditampilkan di peramban web, karena peramban merender foreignObject secara native dan menjaganya tetap tajam. Vektor menjaga markup Anda tetap hidup dan dapat diskalakan, sehingga tetap tajam pada ukuran berapa pun dan berkasnya tetap kecil. Sebaliknya, tangkapan layar membekukan markup yang sama menjadi kisi piksel tetap: praktis di tempat yang tidak mendukung SVG, tetapi setelah itu tidak dapat ditata ulang atau diperbesar.

Pertanyaan yang Sering Diajukan

Semua yang perlu Anda ketahui tentang mengonversi HTML ke SVG.

HTML Anda ditempatkan di dalam <foreignObject> SVG, yang dirender browser sebagai bagian dari vektor. Keseluruhannya dapat diskalakan tanpa pikselasi.

Inline CSS dan gambar data-URI bekerja paling baik. Sumber daya eksternal mungkin tidak dimuat saat SVG dibuka di luar situs Anda, jadi sematkan (inline) sebanyak mungkin.

Tidak. SVG dibuat sepenuhnya di browser Anda.

Ya. Masukkan lebar dan tinggi berapa pun dalam piksel sebelum membuat. Nilai ini menentukan kanvas SVG dan viewBox-nya, dan karena filenya berupa vektor, Anda bisa mengubah skalanya nanti tanpa kehilangan ketajaman.

foreignObject dirender oleh browser web, tetapi banyak editor grafis seperti Inkscape atau Illustrator belum mendukungnya sepenuhnya. Untuk hasil terbaik, gunakan SVG pada halaman web atau di alat berbasis browser.

Alat ini mempertahankan markup Anda sebagai vektor dan tidak pernah merasterisasinya. Jika Anda membutuhkan gambar piksel, render HTML yang sama dengan alat HTML ke Gambar kami, yang menghasilkan PNG, JPG, atau PDF.