Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Visualisasi dan Editor SVG Path

WarnaPengembangGambar

IKLAN · HAPUS?

MEMASUKKAN

Proses Otomatis

Data Path SVG (atribut d)

Lihat

viewBox

Empat angka: min-x min-y lebar tinggi

Gaya

Garis

Lebar Garis

Isi

Warna Isi

Tranformasi

Koordinat

Presisi

Tempat desimal yang dipertahankan saat membulatkan koordinat.

Lapisan

Tampilkan grid

Nomor titik perintah

Tampilkan titik kendali Bezier

Animasi penggambaran path

KELUARAN

Sisi klien

#	Perintah	Parameter	Titik akhir
Hasilnya akan muncul di sini

Atribut d yang telah ditransformasikan

SVG mandiri

IKLAN · HAPUS?

Memandu

Visualisasi dan Editor SVG Path

Tempelkan isi atribut d dari path SVG Anda dan lihat hasilnya secara langsung. Alat ini memecah setiap perintah menjadi parameter dan titik akhir absolut, menggambar garis kendali Bezier di atas tampilan, serta menulis ulang path antara koordinat absolut dan relatif dengan presisi yang dapat dikonfigurasi. Alat ini dirancang khusus untuk penulis SVG yang ingin memahami, membersihkan, atau menyesuaikan secara manual string d tanpa meninggalkan browser.

Cara Penggunaan

Tempel isi atribut d dari path Anda (atau klik “Coba contoh”) ke kotak masukan.
Atur viewBox agar sesuai dengan canvas di mana path tersebut dibuat. Default 0 0 200 200 berlaku untuk contoh bawaan.
Atur warna garis, lebar garis, dan isi untuk melihat bagaimana path akan ditampilkan.
Pilih mode koordinat — tetap seperti aslinya, konversi ke absolut, atau konversi ke relatif — dan presisi dari 0 hingga 6 tempat desimal.
Aktifkan lapisan untuk menampilkan atau menyembunyikan grid, titik akhir perintah yang diberi nomor, garis kendali Bezier, dan animasi penggambaran.
Salin atribut d yang telah ditransformasikan, atau unduh SVG lengkap yang mandiri.

Fitur

Tampilan langsung path – mengubah string d menjadi canvas SVG dengan stroke, isi, dan viewBox yang dapat dikonfigurasi.
Tabel pemecahan perintah – daftar setiap perintah secara berurutan dengan parameter, argumen terlabel, dan titik akhir absolut.
Lapisan titik kendali Bezier – menggambar garis bintang dan titik kendali oranye untuk perintah C, S, Q, dan T sehingga Anda dapat melihat bagaimana kurva dibentuk.
Titik akhir yang diberi nomor – menandai awal path dalam warna hijau dan setiap titik akhir perintah selanjutnya dalam warna biru dengan label indeks.
Konversi absolut ↔ relatif – menulis ulang seluruh string d dalam sistem koordinat yang sesuai tanpa mengubah bentuk yang ditampilkan.
Pembulatan koordinat – memotong presisi desimal dari 0 hingga 6 tempat untuk mempersempit dan mempernormalisasi data path.
Lapisan grid – garis grid otomatis dan penekanan sumbu nol yang terhubung dengan viewBox.
Panjang path – menggunakan API getTotalLength browser untuk melaporkan panjang total yang digambar dalam satuan viewBox.
Animasi penggambaran – animasi opsional stroke-dashoffset yang menggambar path secara berulang untuk debugging visual.
Ekspor SVG mandiri – salin atau unduh file SVG lengkap dengan pengaturan viewBox dan gaya saat ini yang diterapkan.

Perintah Path yang Didukung

M / m – moveto: memulai sub-path baru di titik yang diberikan.
L / l – lineto: menggambar garis lurus ke titik yang diberikan.
H / h – horizontal lineto: menggambar garis horizontal ke x yang diberikan.
V / v – vertical lineto: menggambar garis vertikal ke y yang diberikan.
C / c – cubic Bezier: dua titik kendali ditambah titik akhir.
S / s – smooth cubic Bezier: memantulkan titik kendali kubik sebelumnya secara otomatis.
Q / q – quadratic Bezier: satu titik kendali ditambah titik akhir.
T / t – smooth quadratic Bezier: memantulkan titik kendali kuadrat sebelumnya secara otomatis.
A / a – elliptical arc: jari-jari, rotasi sumbu x, flag besar-arc dan sweep, ditambah titik akhir.
Z / z – closepath: menggambar garis lurus kembali ke awal sub-path.

 Tanya Jawab Umum

Apa yang dimaksud dengan atribut d pada path SVG?

Atribut d adalah string dari perintah satu huruf yang diikuti oleh argumen koordinat. Setiap perintah memindahkan pena virtual: M menetapkan posisi awalnya, L menggambar garis lurus, C dan Q menggambar kurva Bezier, A menggambar busur, dan Z menutup sub-path kembali ke awalnya.
Apa perbedaan antara perintah absolut dan relatif?

Perintah kapital seperti M, L, dan C mengatur koordinatnya sebagai posisi absolut di ruang pengguna SVG. Perintah huruf kecil seperti m, l, dan c mengatur koordinatnya sebagai pergeseran dari posisi pena saat ini, yang membuatnya lebih kecil saat path digambar relatif terhadap titik awal yang bergerak.
Mengapa perintah Bezier yang halus hanya membutuhkan setengah argumen?

Perintah S dan T memantulkan titik kendali kubik atau kuadrat sebelumnya di atas posisi pena saat ini secara otomatis. Renderer sudah tahu di mana titik kendali pertama harus berada, sehingga hanya titik kendali yang tersisa dan titik akhir yang perlu disediakan.
Apa dua angka flag pada perintah busur?

Perintah busur elips memiliki dua argumen flag antara rotasi dan titik akhir. Flag besar-arc memilih antara busur pendek dan panjang yang menghubungkan dua titik, dan flag sweep memilih antara dua arah kemiringan yang mungkin di sekitar pusat elips.
Apakah pembulatan koordinat mengubah bentuk yang ditampilkan?

Pembulatan memotong jumlah desimal yang dipertahankan oleh setiap koordinat. Nilai presisi yang sangat kecil dapat secara visual memindahkan titik kendali dan titik akhir kurva, sedangkan presisi dua atau tiga desimal biasanya tidak terlihat perbedaannya dari aslinya sambil menghasilkan string d yang jauh lebih pendek.