MoreOnlineTools
ESC

Pemapar Kod SVG - Periksa dan salin markup SVG yang bersih

Muat naik sebarang fail SVG untuk memvisualisasikan vektor, analisis strukturnya dan salin kod yang diformat dengan serta-merta.

Muat naik fail SVG anda

Letakkan SVG anda di sini

Hanya fail SVG sehingga 5MB disokong. Fail anda tidak meninggalkan penyemak imbas ini.

atau seret & lepaskan ke dalam kotak ini.

Markup SVG yang diformat

Contoh Penggunaan

Ikon SVG Ringkas

Bentuk bintang lima bucu yang dibina dengan satu elemen polygon.

<svg viewBox="0 0 100 100" xml...
Logo SVG dengan Kecerunan

Logo bulat yang menggunakan kecerunan linear untuk rupa moden.

<svg viewBox="0 0 100 100" xml...
Animasi SVG

Elemen segi empat berputar menggunakan SVG animateTransform.

<svg viewBox="0 0 100 100" xml...

Mengapa menggunakan Pemapar Kod SVG?

Pratonton segera

Render karya seni SVG dengan serta-merta untuk mengesahkan warna, lejang dan bentuk.

Markup yang boleh dibaca

Memformat XML secara automatik dengan inden yang bersih untuk semakan yang lebih mudah.

Pemeriksaan pantas

Mengira laluan, kumpulan dan mengesan viewBox / dimensi sepintas lalu.

Selamat & tempatan

Pemprosesan SVG berlaku dalam penyemak imbas anda, tiada apa yang dimuat naik atau disimpan.

Bagaimana untuk melihat kod SVG?

1

Muat naik SVG

Pilih fail SVG atau seretnya ke dalam kotak muat naik.

2

Semak pratonton & statistik

Periksa pratonton langsung dan pembilang struktur (laluan, kumpulan, viewBox).

3

Salin atau muat turun

Salin kod yang diformat atau muat turun SVG yang dibersihkan dengan serta-merta.

Soalan lazim

Tampal markup SVG anda ke dalam editor kod atau muat naik fail .svg. Panel pratonton langsung dikemas kini serta-merta semasa anda menaip. Anda boleh melihat grafik yang dirender dan kod sumber secara sebelah-menyebelah, memudahkan pengenalpastian elemen mana yang menghasilkan output visual yang mana.

Ya. Editor kod boleh diedit sepenuhnya — tukar mana-mana atribut, warna, laluan atau sifat dan pratonton dikemas kini dalam masa nyata. Berguna untuk penyesuaian pantas seperti menukar warna isian, lebar strok atau nilai viewBox tanpa membuka editor vektor penuh.

Anda boleh melihat markup berformat penuh, memeriksa elemen individu dan atributnya, menyemak tetapan viewBox, lebar dan tinggi, mengira elemen, dan melihat struktur SVG. Berguna untuk nyahpepijat masalah rendering atau memahami SVG yang dieksport dari Figma, Illustrator atau alat lain.

Punca paling biasa ialah atribut viewBox dan width/height yang hilang atau tidak sepadan. Jika viewBox tiada atau dimensi tidak sepadan, renderer yang berbeza menskala SVG secara berbeza. Semak atribut ini dahulu. Pastikan juga fon yang dirujuk, imej luaran atau gaya CSS disematkan dengan betul atau boleh diakses.

Ya. Gunakan butang Format untuk auto-inden dan memformat markup SVG mentah. Ini menjadikannya boleh dibaca apabila mengeksport dari alat yang menghasilkan output satu baris termampat (seperti Figma atau kebanyakan perpustakaan ikon). Kemudian anda boleh membuang atribut atau metadata yang tidak diperlukan secara manual.

Sehingga 5 MB. Ini merangkumi kebanyakan ikon, logo dan ilustrasi. SVG yang sangat besar (peta kompleks, ilustrasi terperinci dengan ribuan nod laluan) mungkin menghampiri had ini — anda mungkin perlu memudahkan atau mengoptimumkannya terlebih dahulu.

Ya. Klik butang Salin untuk menyalin markup SVG lengkap ke papan keratan anda. Anda juga boleh memuat turun fail yang diedit sebagai fail .svg menggunakan butang Muat turun.

Tidak. Semua pemprosesan berlaku secara tempatan dalam pelayar anda menggunakan JavaScript. Kod SVG dan fail anda tidak pernah dihantar ke mana-mana pelayan atau disimpan di mana-mana.

Apakah Pemapar Kod SVG?

Pemapar kod SVG membolehkan anda membuka fail vektor, melihat pratonton langsung dan menyalin markup yang diformat tanpa memasang Illustrator atau Figma. Sesuai untuk pembangun dan pereka yang perlu memeriksa ikon yang dieksport atau berkongsi potongan kod bersih dengan rakan sepasukan.

Ciri Utama

Muat naik sebarang SVG dan dapatkan pratonton yang dirender serta XML berinden kemas dengan serta-merta. Alat ini mengira laluan, kumpulan dan mengesan viewBox supaya anda boleh mengesahkan struktur sepintas lalu. Salin kod atau muat turun fail dengan satu klik.

Kes Penggunaan Biasa

Pembangun front-end menggunakannya untuk mengaudit eksport SVG sebelum memasukkannya ke dalam kod. Pereka berkongsi potongan kod yang diformat dalam pull request bukannya tangkapan skrin. Penyelenggara perpustakaan ikon menyemak kumpulan tidak perlu yang ditinggalkan oleh alat reka bentuk.

Petua

Jika SVG anda kelihatan besar, cari kumpulan kosong atau transformasi berlebihan dalam kod yang diformat. Bersihkan dan muat turun semula. Untuk pengeluaran, jalankan hasil melalui minifier selepas semakan.

Privasi

Fail tidak pernah meninggalkan penyemak imbas anda. Semua penghuraian dan pemformatan berlaku di sisi pelanggan, jadi anda boleh memeriksa aset proprietari dengan selamat.

Keselamatan dan Privasi

Keselamatan data anda adalah keutamaan kami

Pemprosesan Tempatan

Semua pemprosesan berlaku dalam pelayar anda

Tiada Pemindahan Data

Data anda tidak dihantar ke pelayan kami

Tiada Penyimpanan Data

Tiada data disimpan atau dikongsi

Penyulitan SSL

Penyulitan SSL untuk sambungan selamat

Pemapar Kod SVG Dalam Talian - Periksa dan Pratonton SVG
Artikel Blog Berkaitan
Pemapar Kod SVG Dalam Talian - Periksa dan Pratonton SVG

Pelajari apa itu kod SVG, cara membaca markup SVG dan cara menggunakan pemapar SVG percuma.

Baca Artikel 8 min bacaan

Langkah Seterusnya

Pengoptimum SVG

Optimumkan dan kecilkan fail SVG

Penukar SVG ke Imej

Tukar fail SVG kepada format PNG, JPG, GIF atau WebP

Alat Berkaitan

Pencari Laluan JSON

Tampal JSON dan klik mana-mana nilai untuk mendapatkan ekspresi JSONPath serta-m...

Penjana Robots.txt

Jana fail robots.txt untuk laman web anda

Penyemak Perbezaan Kod

Bandingkan dua coretan kod bersebelahan dan serlahkan perbezaan baris demi baris

Penjana Meta Tag

Jana tag meta HTML untuk pengoptimuman SEO

Penjana CSS Grid

Taman permainan visual CSS Grid dengan pratonton langsung dan penjanaan kod

Pemformat YAML

Cantikkan dan sahkan kod YAML

Lebih Banyak di MoreOnlineTools

Alat Dalam Talian Percuma

109 alat untuk teks, imej, keselamatan dan pembangunan

Semak Semua Alat →
Helaian Rujukan Pembangun

Rujukan pantas untuk Regex, Git, kod HTTP, CSS, Markdown dan lagi

Semak Helaian Rujukan →
Kalkulator Dalam Talian

BMI, pinjaman, peratusan, tip, umur dan kalkulator praktikal lain

Semak Kalkulator →
Koleksi Alat

Aliran kerja terpilih: pembangunan API, saluran imej, audit keselamatan dan lagi

Semak Koleksi →