Pemformatan kode / MULTIVERTO
Indent pohon elemen SVG sederhana untuk penyuntingan.
Terapkan setiap alat teks pada hasil sebelumnya. Alur kerja teks ↗
Hanya nama rangkaian dan urutan alat yang disimpan di peramban ini. Masukan dan hasil Anda tidak pernah disimpan.
01 / Contoh
<svg xmlns="http://www.w3.org/2000/svg"><circle cx="25" cy="25" r="20"/></svg><svg xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="20"/>
</svg>02 / Panduan
Indent sebuah pohon elemen SVG sederhana untuk penyuntingan. Indentasi dan pembagian baris mengungkapkan struktur sementara mempertahankan token input yang didukung. Sebuah kelompok SVG yang bersarang di dalam kelompok lain menjadi lebih mudah dibaca ketika indentasi mengungkapkan hierarki. Geometri, koordinat, isi dan transformasi ditinggalkan seperti yang ditulis. Keluaran dapat membantu penyuntingan manual tetapi tidak akan menyederhanakan jalur atau mengurangi gambar vektor secara agresif.
SVG adalah sebuah XML kosakata untuk grafik vektor. Elemen-elemennya dapat menggambarkan geometri, teks, cat, transformasi dan definisi yang dapat digunakan kembali, sementara atribut menentukan gambar yang sebenarnya. SVG yang diformat lebih mudah untuk diperiksa karena kelompok dan bentuk bersarang terlihat; versi kompak dapat mengurangi ruang putih antara node elemen-hanya. Tidak ada operasi yang mengubah koordinat jalur, menyederhanakan geometri atau menghapus definisi yang tidak digunakan.
Pemformatan paling berguna selama tinjauan atau debugging, ketika indentasi dapat mengungkapkan tingkat bersarang yang hilang atau saudara yang tidak terduga. Tempelkan sebuah fragmen yang lengkap dan mewakili dan jalankan formater sekali. Baca keluaran dari struktur paling luar ke dalam, memperhatikan di mana setiap elemen, blok atau klausa dimulai dan berakhir. Halaman ini sengaja menghindari berpura-pura menjadi kompiler untuk setiap ekstensi bahasa yang mungkin. Dalam contoh ini, “<svg xmlns="http://www.w3.org/2000/svg"><circle cx="25" cy="25" r="20"/></svg>” menghasilkan pratinjau ringkas “<svg xmlns="http://www.w3.org/2000/svg"> ⏎ <circle cx="25" cy="25" r="20"/> ⏎ </svg>” (⏎ menandai baris baru).w3.org/2000/svg"> <circle cx="25" cy="25" r="20"/> </svg>". Baca tanda baca serta kata-kata yang terlihat: sampel kecil itu adalah hasil yang dapat diamati dari operasi tertentu ini. Ubah satu fitur yang Anda pedulikan di sumber dan bandingkan tempat yang sama di hasil. Letakkan dua bentuk SVG dalam kelompok dengan transformasi terpisah. Baca berkas berformat untuk melihat transformasi yang diterapkan pada setiap bentuk, lalu render kedua versi pada viewBox dan ukuran pixel yang sama. Keluaran membantu inspeksi tetapi tidak dapat mendeteksi jalur di luar viewport yang terlihat.
Kembangkan SVG kecil untuk menemukan kelompok, bentuk dan atributnya sebelum mengedit koordinat. Bandingkan ikon yang dirender dengan ukuran layar sebenarnya setelah penyuntingan. Alat ini mengubah tata letak dari markup sumber, bukan geometri jalur, koordinat viewBox atau urutan cat; animasi SVG dan skrip tertanam memerlukan validasi mereka sendiri. Simpan asli di samping keluaran dan uji contoh kecil yang diketahui sebelum mengendalikan dokumen besar. Bandingkan konten yang berarti, bukan hanya ukuran file atau jumlah baris. Periksa nama, string kutipan, karakter non-ASCII, akhir baris dan semua bidang berulang setelah transformasi.
Jelajahi panduan