Zona LogoPeriksa logo sebelum digunakan
Buka SVG, bandingkan pada latar terang dan gelap, lalu periksa dimensi serta viewBox-nya. Perbesar pratinjau untuk melihat detail tanpa mengubah gambar yang disimpan.
Lihat dan edit SVG online
SVG viewer mengubah markup XML menjadi gambar; SVG editor memungkinkan Anda mengubah markup tersebut. Workspace online gratis ini menggabungkan keduanya dengan inspector, sehingga Anda dapat memahami isi file sebelum memasangnya di website, menyerahkannya ke developer, atau mengedit kodenya.
Edit warna yang diperlukan
Temukan deklarasi fill atau stroke di kode, ubah nilainya, lalu lihat pembaruan pratinjau. Salin deklarasi warna dari inspector saat ingin menggunakannya kembali.
Tinjau hasil ekspor desain
Periksa teks, deklarasi font, dan referensi gambar embedded. SVG dapat menggabungkan bentuk vektor dan gambar raster, sehingga ekstensi file saja belum menjelaskan bagaimana setiap bagiannya dibuat.
Temukan error XML
Gunakan informasi baris, kolom, dan Lompat ke error saat parser menyediakan lokasi. Perbaiki markup di editor sambil memakai pratinjau valid terakhir sebagai referensi.
Cara membuka dan mengedit file SVG
- 01
Pilih file atau tempel kode
Klik Unggah SVG, letakkan satu file .svg di workspace, atau pilih Tempel kode untuk memasukkan teks SVG dari clipboard. Jika akses clipboard ditolak, tempel secara manual ke editor yang sudah difokuskan. Batasnya 10 MB. Contoh di bawah menyediakan file siap pakai untuk dipelajari.
- 02
Periksa pratinjau langsung
Pakai latar kotak-kotak untuk melihat area transparan, atau pilih latar terang dan gelap. Beralih antara Pratinjau, Inspector, dan Data URI di panel kanan. Asli mempertahankan file atau contoh yang dibuka; untuk kode tempelan, versi pertama yang valid dan aman disimpan. Hasil edit mengikuti kode terbaru. Bandingkan menampilkan keduanya berdampingan di desktop dengan skala, latar, dan zoom bersama. Kontrol latar dan zoom berada di bawah pratinjau. Pas mengembalikan zoom pratinjau; kontrol latar dan zoom tidak mengubah sumber SVG.
- 03
Edit dan periksa
Ubah kode lalu berhenti sejenak agar analisis diperbarui. Rapikan kode menambahkan indentasi tanpa optimasi SVG; Undo mengembalikan kode sebelumnya. Di desktop, geser pembatas panel atau gunakan tombol panah. Pakai layar penuh untuk ruang lebih luas, lalu keluar melalui tombol atau Esc jika didukung.
- 04
Unduh SVG terbaru
Unduhan tersedia setelah kode terbaru lolos validasi. File berisi kode saat ini tanpa optimasi atau pemformatan; namespace root SVG yang hilang ditambahkan otomatis. Buka tab Data URI untuk memilih URL-encoded atau Base64, melihat ukurannya, lalu menyalinnya untuk HTML atau CSS. Keduanya memakai sumber tervalidasi yang sama dengan unduhan. Simpan salinan sebelum menutup halaman karena draft tidak disimpan.
Lihat pratinjau SVG langsung dari kode
Coba SVG sederhana berikut untuk memahami hubungan kode dengan hasil visualnya. Setiap contoh berisi markup lengkap yang dipakai pratinjau. Buka di editor, lakukan perubahan yang disarankan, lalu periksa hasilnya. Jika ada edit yang belum disimpan, tool meminta konfirmasi sebelum menggantinya.
Bentuk & warna
Dua bentuk, dua fill, dan satu sistem koordinat. Inspector menghitung nol path: rect dan circle adalah elemen SVG tersendiri.
Sumber SVG
<svg xmlns="http://www.w3.org/2000/svg"
width="240" height="160" viewBox="0 0 240 160">
<rect x="28" y="28" width="104" height="104"
rx="24" fill="#2563eb" />
<circle cx="160" cy="80" r="44" fill="#fbbf24" />
</svg>Pratinjau
Coba perubahan ini Ganti #2563eb menjadi #16a34a. Lalu ubah width ke 360 dan height ke 240 tanpa mengubah viewBox.
Gambar berbasis stroke
Satu grup membagikan pengaturan stroke ke dua path dan sebuah lingkaran. Fill kosong menjaga area di antara garis tetap transparan.
Sumber SVG
<svg xmlns="http://www.w3.org/2000/svg"
width="240" height="160" viewBox="0 0 240 160">
<g fill="none" stroke="#2563eb" stroke-width="4"
stroke-linecap="round" stroke-linejoin="round">
<path d="M24 124 80 48 128 104 160 64 216 124" />
<path d="M24 136H216" />
<circle cx="188" cy="36" r="12" />
</g>
</svg>Pratinjau
Coba perubahan ini Ubah stroke-width dari 4 ke 8 dan warna stroke menjadi #7c3aed. Bandingkan hasilnya pada latar terang dan gelap.
Gradient & teks
Persegi mengacu ke gradient di dalam defs, sementara teks memakai keluarga font generik lokal. Inspector menampilkan referensi warna, stop gradient, dan deklarasi teks.
Sumber SVG
<svg xmlns="http://www.w3.org/2000/svg"
width="240" height="160" viewBox="0 0 240 160">
<defs>
<linearGradient id="sky" x2="1" y2="1">
<stop offset="0" stop-color="#2563eb" />
<stop offset="1" stop-color="#7c3aed" />
</linearGradient>
</defs>
<rect x="16" y="24" width="208" height="112"
rx="24" fill="url(#sky)" />
<text x="120" y="88" text-anchor="middle"
font-family="sans-serif" font-size="24" fill="#ffffff">
Hello SVG
</text>
</svg>Pratinjau
%22%20%2F%3E%0A%20%20%3Ctext%20x%3D%22120%22%20y%3D%2288%22%20text-anchor%3D%22middle%22%0A%20%20%20%20font-family%3D%22sans-serif%22%20font-size%3D%2224%22%20fill%3D%22%23ffffff%22%3E%0A%20%20%20%20Hello%20SVG%0A%20%20%3C%2Ftext%3E%0A%3C%2Fsvg%3E)
Coba perubahan ini Ganti stop-color kedua menjadi #db2777 dan ubah Hello SVG dengan teks Anda. Coba font-family="serif" untuk melihat font fallback browser.
Pahami properti SVG Anda
Inspector melaporkan deklarasi yang ada di sumber. Informasi ini membantu memahami struktur, tetapi tidak menghitung seluruh pewarisan nilai CSS atau menjamin tampilan font yang sama di setiap perangkat.
| Properti | Informasi yang ditampilkan | Yang perlu diperiksa |
|---|---|---|
| Width & height | Atribut root asli, termasuk satuan atau persentase. Nilai yang kosong ditandai tidak ditentukan. | Bandingkan dengan viewport pratinjau yang dapat diturunkan dari viewBox. Atribut sumber tetap dipertahankan. |
| viewBox | Empat angka: koordinat minimum x dan y, lalu lebar serta tinggi area koordinat. | Pastikan gambar berada di dalam area ini. ViewBox yang hilang atau tidak valid dilaporkan, bukan diperbaiki otomatis. |
| Ukuran file | Ukuran byte UTF-8 kode saat ini, dengan ukuran unggahan awal ditampilkan terpisah. | Ukuran bisa bertambah setelah edit. Nilai ini berbeda dari jumlah karakter atau ukuran terkompresi yang mungkin dikirim server web. |
| Path | Jumlah elemen path, termasuk path di dalam defs. | Persegi dan lingkaran merupakan elemen tersendiri. Instans use yang berulang tidak digandakan menjadi path tambahan. |
| Fill & stroke | Deklarasi warna dari atribut, inline style, dan blok CSS. | Deklarasi bukan computed style. Inheritance, currentColor, dan variabel CSS dapat memengaruhi hasil tampilan. |
| Gradient & pattern | Referensi warna seperti url(#sky), serta deklarasi warna stop gradient. | Fill gradient bukan satu warna solid. Periksa definisi yang dirujuk dan stop-nya sebelum mengedit. |
| Teks & font | Elemen teks, cuplikan, serta deklarasi keluarga font atau shorthand font. | Font eksternal tidak dimuat. Teks yang telah menjadi path tidak lagi menyimpan deklarasi font yang dapat dikenali untuk bentuk tersebut. |
| Referensi gambar | Referensi embedded, eksternal, atau lokal pada elemen image dan feImage. | Gambar embedded PNG/JPEG/WebP yang didukung dapat diperiksa; gambar eksternal tetap diblokir. Referensi lokal juga bisa mengarah ke konten vektor. |
120 × 80
180 × 120
Koordinat sama, ukuran tampilan berbeda
Kedua gambar memakai viewBox="0 0 240 160". Width dan height berubah secara proporsional sehingga bentuknya tetap sama. Mengubah viewBox justru mengubah area koordinat yang ditampilkan. Jika dimensi tidak dapat ditentukan, tool memakai viewport pratinjau 300 × 150 dengan label yang jelas tanpa menulis ulang kode.
viewBox="0 0 240 160"Atasi masalah umum pada pratinjau SVG
Mulai dari gejala yang terlihat, lalu periksa properti sumber yang berkaitan. Viewer tidak memperbaiki atau menyanitasi file secara otomatis, dan pratinjau yang diblokir tidak selalu berarti gambar Anda rusak.
| Yang terlihat | Kemungkinan penyebab | Yang bisa dicoba |
|---|---|---|
| Gambar putih seolah menghilang | Gambar menyatu dengan latar pratinjau putih. | Pilih Gelap atau Kotak-kotak sebelum mengubah fill. Latar pratinjau tidak menghapus latar yang sudah digambar di dalam SVG. |
| XML SVG tidak valid | Tag belum ditutup, tanda kutip hilang, root tidak valid, atau namespace bermasalah. | Gunakan Lompat ke error jika lokasinya tersedia. Periksa elemen svg pembuka dan xmlns, lalu cocokkan tag serta tanda kutip atribut. |
| Pratinjau atau unduhan diblokir | Terdeteksi konten aktif atau referensi resource yang tidak didukung. | Periksa script, atribut event, dan tautan eksternal. Ekspor SVG mandiri dari aplikasi desain; jangan sekadar menonaktifkan validasi. |
| Tampilan teks berbeda | Font yang dideklarasikan tidak tersedia pada perangkat saat ini. | Coba keluarga font generik seperti sans-serif, atau ekspor teks sebagai path dari aplikasi desain jika bentuk huruf harus dipertahankan. |
| Gambar tampak terpotong | ViewBox mungkin tidak mencakup semua bentuk, atau SVG menggunakan clipping atau mask. | Bandingkan koordinat dengan viewBox dan periksa referensi clipPath atau mask. Zoom keluar tidak dapat menampilkan bagian yang dipotong oleh SVG itu sendiri. |
| Pratinjau belum mengikuti edit | Markup terbaru tidak valid sehingga gambar valid sebelumnya masih ditampilkan. | Perhatikan label Pratinjau valid terakhir dan pesan error. Perbaiki kode lalu tunggu analisis; unduhan tetap nonaktif sampai revisi terbaru valid dan aman. |
Gunakan SVG viewer melalui browser
Buka halaman ini melalui browser modern di Mac, Windows, Linux, atau Android, lalu pilih SVG lokal atau tempel kodenya. Anda tidak perlu memasang aplikasi SVG viewer khusus. Fitur yang tersedia bergantung pada browser; misalnya, layar penuh belum tentu tersedia di setiap lingkungan.
Di desktop
Lihat kode dan gambar berdampingan. Cari dengan Ctrl/Cmd + F dan batalkan edit dengan Ctrl/Cmd + Z di editor. Tab memindahkan fokus keluar editor agar kontrol lain dapat dijangkau melalui keyboard.
Di layar lebih kecil
Gunakan satu baris tab Kode, Pratinjau, Inspector, dan Data URI. Unggahan membuka Pratinjau; contoh dan navigasi error membuka Kode. Area kode dan tabel referensi yang lebar dapat digulir di dalam wadahnya. Pilih SVG melalui pemilih file perangkat Anda.
Pemrosesan dilakukan di browser, tetapi ini bukan janji bahwa website dapat digunakan secara offline. Simpan atau salin pekerjaan sebelum memuat ulang, menutup halaman, atau berganti perangkat.
Pertanyaan umum
Apakah SVG viewer ini gratis dan perlu akun?
SVG Viewer & Editor gratis digunakan tanpa akun. Anda dapat membuka satu SVG maksimal 10 MB, atau mengedit kode SVG yang ditempel dengan batas ukuran yang sama.
Apakah file SVG dikirim ke server?
Tidak. Pembacaan file, pemeriksaan, pengeditan, pembuatan pratinjau, dan unduhan dilakukan di browser. Contoh logo ZonaLogo diambil dari situs ini; tool tidak mengunggah SVG milik Anda.
Bisakah melihat SVG langsung dari kode?
Bisa. Pilih Tempel kode, masukkan markup dengan elemen root svg lalu tunggu pratinjau. Namespace root yang hilang ditangani otomatis untuk pratinjau dan unduhan; kode yang ditempel di editor tetap utuh. Contoh di atas menyediakan markup lengkap yang dapat dibuka dan diubah.
Bisakah mengubah warna SVG?
Bisa, melalui editor kode. Edit fill, stroke, deklarasi CSS, atau stop gradient yang sesuai. Tombol warna di inspector menyalin nilai; tombol tersebut tidak mengganti warna di dalam dokumen.
Bisakah dipakai di Mac, Windows, Linux, atau Android?
Gunakan browser modern di perangkat Anda, lalu pilih file atau tempel kode. Ini adalah tool web, bukan ekstensi thumbnail Windows Explorer atau aplikasi native. Beberapa fitur browser, termasuk layar penuh, mungkin tidak tersedia.
Bisakah membuka ekspor SVG dari Illustrator atau Inkscape?
Tool dapat membuka ekspor mandiri yang lolos pemeriksaan XML dan keamanan viewer. Metadata tampilan Inkscape tingkat atas yang tidak aktif dikecualikan dari pratinjau, tetapi tetap ada di sumber. Ekspor dengan resource eksternal, konten aktif, atau struktur yang tidak didukung masih dapat diblokir.
Apakah latar pratinjau dan zoom ikut diunduh?
Tidak. Kotak-kotak, Terang, Gelap, zoom, dan pilihan versi perbandingan hanya membantu pemeriksaan. Unduhan selalu memakai kode terbaru yang lolos validasi, termasuk saat melihat Asli. Unduhan berisi kode sumber saat ini, dengan penambahan namespace root SVG jika belum ada. Untuk mengubah gambarnya, edit kode SVG.
Apakah draft tetap ada setelah halaman ditutup?
Draft tidak disimpan otomatis. Unduh SVG atau salin kode sebelum memuat ulang atau meninggalkan halaman. Memuat file atau contoh lain meminta konfirmasi jika akan membuang edit Anda.