Penampil SVG

Input SVG
0 karakter
Pratinjau lokal, jangan tempelkan konten skrip dari sumber yang tidak dipercaya

Penampil SVG online. Tempel kode SVG untuk merender dan melihat pratinjau gambar vektor secara instan secara real-time. Mendukung penyalinan dan pengunduhan file .svg. Pemrosesan lokal — aman digunakan.

Rekomendasi Terkait

Ubah Gambar

Kompres Gambar

Ubah Ukuran Gambar

Potong Gambar

editor gambar

Generator ICO

Apa itu SVG?

SVG (Scalable Vector Graphics, grafik vektor yang dapat diskalakan) adalah format gambar yang mendeskripsikan bentuk geometris menggunakan XML. Berbeda dengan JPG dan PNG yang merupakan bitmap (matriks piksel), SVG menggunakan tag seperti <rect>, <circle>, <path> untuk mendeskripsikan jalur matematis bentuk, sehingga gambar tidak kabur saat diperkecil atau diperbesar ke ukuran apa pun.

**Untuk skenario apa SVG cocok?** Logo, ikon UI, diagram alir, penanda peta, bagan, dekorasi animasi, ilustrasi yang dapat digunakan kembali — skenario ini memiliki tuntutan tinggi pada ketajaman, kemampuan mengubah warna, skalabilitas, dan kontrol melalui CSS, sehingga SVG adalah pilihan alami.

**Perbedaan dengan Canvas:** Canvas adalah API menggambar imperatif, setelah menggambar semuanya menjadi piksel; SVG adalah node DOM deklaratif, atribut dan gaya CSS dapat diubah kapan saja dan acara dapat diikat. Oleh karena itu, untuk ikon, UI, dan skenario interaktif gunakan SVG, untuk game, partikel, dan seni piksel gunakan Canvas.

**Struktur tipikal:** &lt;svg&gt; node akar, &lt;g&gt; pengelompokan, &lt;path&gt; jalur (paling sering digunakan, berisi atribut d), gradien (&lt;linearGradient&gt;/&lt;radialGradient&gt;), filter (&lt;filter&gt;), animasi (SMIL/CSS/JS).

**Cara melihat pratinjau:** Dengan alat ini, tempel kode sumber SVG ke editor — sebelah kanan akan merender secara real-time. Berkat pembatas yang dapat diseret, Anda dapat memeriksa kebenaran kode SVG dan kesesuaian efek tampilan dengan harapan dalam beberapa detik.

Kasus penggunaan

  • Saat pengembang frontend perlu melihat pratinjau hasil render kode ikon SVG dengan cepat
  • Memverifikasi efek tampilan SVG setelah disalin dari Figma, Sketch, dan alat desain lainnya
  • Melihat perubahan secara real-time saat men-debug jalur, warna, atau atribut viewBox SVG
  • Memeriksa dan memverifikasi kode SVG sebelum diintegrasikan ke kode proyek

Cara Penggunaan

  1. Tempel kode sumber SVG ke editor sebelah kiri atau klik «Muat Contoh» untuk melihat demonstrasi
  2. Hasil render gambar vektor akan ditampilkan secara instan di sebelah kanan, saat mengedit kode, pratinjau akan diperbarui secara real-time
  3. Setelah diperiksa, klik tombol salin untuk menyalin kode atau unduh sebagai file .svg dengan nama kustom

Fitur

  • Pratinjau real-time: tempel atau edit kode SVG — gambar vektor dirender secara instan, WYSIWYG
  • Tata letak terbagi: di desktop seret untuk menyesuaikan lebar panel, di seluler beralih antara input dan pratinjau melalui tab
  • Ekspor satu klik: salin kode sumber SVG ke clipboard atau unduh sebagai file .svg standar dengan nama kustom
  • Pemrosesan lokal: semua parsing dan rendering SVG dilakukan di browser, kode tidak diunggah ke server — lebih aman
  • Latar belakang transparan: latar kotak-kotak memungkinkan melihat area transparan dan detail tepi SVG dengan jelas
  • Penghitung karakter: menampilkan jumlah karakter dalam kode secara real-time, contoh bawaan untuk memulai dengan cepat

Pertanyaan Umum

Bagaimana cara melihat pratinjau efek kode SVG secara online?

Tempel kode sumber SVG ke editor sebelah kiri, gambar vektor akan dirender secara instan di sebelah kanan. Anda dapat mengedit kode langsung di editor, area pratinjau akan diperbarui secara real-time — nyaman untuk debugging ikon dan verifikasi efek.

Bagaimana cara mengunduh dan menyimpan SVG yang telah dipratinjau?

Klik tombol unduh di pojok kanan atas area pratinjau, tentukan nama file dan simpan sebagai file .svg standar. Anda juga dapat mengklik tombol salin untuk menyalin kode sumber SVG ke clipboard dan menempelkannya langsung ke kode proyek.

Apakah kode SVG diunggah ke server? Apakah aman?

Tidak. Semua parsing dan rendering SVG dilakukan secara lokal di browser, kode SVG tidak diunggah ke server mana pun. Setelah diproses, data akan segera dihapus dari memori, menghilangkan risiko kebocoran materi ikon dan draf desain yang belum dipublikasikan.

Apakah mendukung kode SVG yang disalin dari perangkat lunak desain?

Ya. Kode SVG yang disalin dari Figma, Sketch, Adobe Illustrator, dan perangkat lunak desain lainnya dapat ditempel langsung untuk pratinjau. Disarankan untuk memeriksa hasil render terlebih dahulu, kemudian mengintegrasikannya ke proyek jika tidak ada masalah.

Mengapa pratinjau SVG tidak muncul? Penyebab umum?

Penyebab umum: ① kurangnya deklarasi namespace xmlns="http://www.w3.org/2000/svg"; ② tag yang tidak tertutup dalam kode; ③ karakter khusus yang tidak diescape dengan benar; ④ kesalahan sintaksis dalam SVG itu sendiri. Silakan periksa poin-poin ini.

Dapatkah saya menyesuaikan nama file SVG yang diunduh?

Ya. Setelah mengklik tombol unduh, kotak input nama file akan muncul, masukkan nama yang diinginkan (default image.svg), tekan Enter atau konfirmasi — file akan diunduh. Alat akan secara otomatis menambahkan ekstensi .svg.

Glosarium

viewBox
Sistem koordinat internal SVG, ditentukan dalam format «x y width height». Yang umum «0 0 24 24» berarti lebar dan tinggi adalah 24 unit. Ukuran tampilan aktual SVG dikendalikan oleh atribut width/height atau CSS eksternal.
Namespace XML (namespace)
Agar browser mengenali SVG dengan benar sebagai dokumen SVG, perlu dideklarasikan xmlns="http://www.w3.org/2000/svg". Kurangnya namespace adalah penyebab paling umum SVG tidak muncul di HTML.MDN - Namespace SVG
Atribut d jalur path
Kumpulan perintah jalur yang terdiri dari huruf seperti M/L/C/Q/H/V/Z dan koordinat. M=bergerak, L=gambar garis, C=kurva Bezier kubik, Q=kurva Bezier kuadratik, Z=tutup jalur. Ikon kompleks sering kali hanya diekspresikan dengan satu elemen path dan atribut d-nya.
currentColor
Kata kunci CSS yang merujuk ke properti color dari elemen saat ini. Jika dalam SVG Anda mengatur fill atau stroke sebagai currentColor, perubahan color di CSS eksternal akan mengubah warna ikon — ini adalah praktik umum dalam sistem desain.

Referensi cepat elemen SVG umum

ElemenTipeTujuan
<svg>Node akarKontainer untuk semua SVG, wajib
<rect>Bentuk dasarPersegi panjang, persegi panjang sudut bulat
<circle> / <ellipse>Bentuk dasarLingkaran / Elips
<line> / <polyline>Bentuk dasarGaris lurus / Garis patah
<polygon> / <path>JalurPoligon / Kurva arbitrer (atribut d)
<text> / <tspan>TeksTeks tertanam dalam SVG
<g>PengelompokanMengelompokkan node untuk menerapkan transformasi seragam
<defs> / <symbol>DefinisiBentuk dan gradien yang dapat digunakan kembali
<linearGradient> / <radialGradient>GradienIsi gradien linear / radial
<use>Penggunaan kembaliMereferensikan elemen dalam defs
<filter>FilterKabur, bayangan, dan efek lanjutan lainnya

Perbandingan SVG dan format bitmap

ParameterSVG (vektor)PNG (bitmap)JPG (bitmap)
Cara representasiXML mendeskripsikan jalur geometrisMatriks pikselMatriks piksel (kompresi DCT)
Efek saat diperbesarTidak kabur di segala skalaKabur saat diperbesarKabur, bekas kompresi terlihat jelas
Ukuran fileTergantung kompleksitas jalur, logo biasanya < 10KBSedang (tanpa kehilangan)Kecil (dengan kehilangan)
Latar belakang transparan✅✅❌
Dukungan animasi✅ SMIL / CSS / JS❌ (butuh APNG)❌
Ubah warna dengan CSS✅ currentColor / variabel fill❌❌
Penggunaan yang cocokIkon, logo, vektor UIMateri latar transparan, tangkapan layarFoto, gradien besar

Authoritative References