Back

Pratinjau & Inspektur SVG

Tempelkan atau jatuhkan SVG dan lihat hasil render seketika, beserta panel statistik yang mencakup dimensi, viewBox, rincian elemen, warna unik, dan penanda keamanan. Pratinjau berjalan di dalam iframe sandbox dengan skrip dan akses same-origin dinonaktifkan, sehingga SVG berbahaya tidak bisa menjalankan kode. Ekspor gambar sebagai SVG atau PNG, beralih antara latar belakang putih, hitam, atau pola kotak-kotak transparan, atau beralih ke tampilan sumber untuk memeriksa markup.

Spesifikasi

Kasus Penggunaan Umum

  • Pratinjau ikon atau ilustrasi SVG dengan cepat sebelum menyematkannya
  • Periksa SVG yang tidak tepercaya untuk skrip atau event handler tersemat
  • Verifikasi viewBox dan dimensi intrinsik SVG
  • Hitung warna unik dalam SVG (berguna untuk ekstraksi palet atau optimasi)
  • Ubah SVG menjadi PNG dengan latar belakang berwarna atau transparan
  • Periksa rincian elemen untuk menemukan penggunaan <script> atau <foreignObject> yang tidak diharapkan

Fitur

  • Pratinjau langsung dalam sandbox — SVG dirender di dalam iframe dengan sandbox="" sehingga skrip dan event handler tidak dapat dieksekusi
  • Pengalih latar belakang: putih, hitam, atau pola kotak-kotak transparan
  • Panel statistik: dimensi, viewBox, rasio aspek, ukuran byte, jumlah elemen, elemen teratas, warna unik
  • Penanda keamanan menyorot SVG yang berisi <script>, event handler, referensi eksternal, atau animasi
  • Ekspor sebagai SVG atau PNG resolusi tinggi (2×) — latar belakang yang dipilih disematkan dalam ekspor PNG
  • Pratinjau layar penuh untuk memeriksa detail
  • Tampilan sumber dengan penyorotan sintaks
  • Salin SVG yang sudah dinormalisasi ke clipboard

Contoh

Ikon Sederhana

Coba →

Ikon tanda centang dalam lingkaran dengan gaya stroke

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>

Isi Gradien

Coba →

Persegi panjang yang diisi dengan gradien linear

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#0ea5e9"/></linearGradient></defs><rect width="100" height="100" fill="url(#g)"/></svg>

SVG dengan Animasi

Coba →

Lingkaran berdenyut menggunakan animasi SMIL — penanda Animations akan menyala

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><circle cx="50" cy="50" r="20" fill="#ef4444"><animate attributeName="r" from="20" to="40" dur="1s" repeatCount="indefinite"/></circle></svg>

Tips

  • Lebih baik gunakan viewBox daripada width/height tetap agar gambar dapat diskalakan dengan baik
  • Jika lencana Scripts atau Event Handlers menyala, SVG akan menjalankan kode saat disematkan — hapus terlebih dahulu sebelum memercayainya
  • Latar belakang kotak-kotak membantu mendeteksi transparansi yang tidak disengaja; alihkan ke putih atau hitam untuk melihat tampilan di halaman yang berbeda
  • Ekspor PNG dirender pada resolusi 2×; gunakan ekspor SVG untuk menjaga kualitas vektor
  • Referensi eksternal (href http://) tidak akan dimuat dalam pratinjau sandbox — ini memang disengaja
← Kembali ke semua alat