Visualisator & Pembuat Jalur SVG

Buat dan periksa data jalur SVG dengan rendering langsung, kontrol transformasi, dan markup SVG siap ekspor untuk ikon, bagan, dan aset UI vektor.

SVG Path Visualizer & Builder

Build and inspect SVG path commands with live rendering, transform controls, and export-ready SVG markup for icons, charts, and vector interface assets.

SVG Path Data

Canvas Width

Canvas Height

Stroke Color

Fill Color or none

Stroke Width

Scale

Rotate (deg)

Translate X

Translate Y

Live SVG Preview

Generated SVG Markup

<svg width="640" height="320" viewBox="0 0 640 320" xmlns="http://www.w3.org/2000/svg">
  <g
    transform="translate(0 0) rotate(0 320 160) scale(1)"
  >
    <path d="M 40 160 C 90 20,210 20,260 160 S 430 300,500 140" fill="none" stroke="#2596be" stroke-width="4" />
  </g>
</svg>

Path Analysis Report

SVG Path Builder Report
=======================
Normalized Length: 49 character(s)
Starts With Move Command: yes
Contains Unsupported Commands: no
Validation Status: valid-looking path

Command Frequency:
C: 1
M: 1
S: 1

Render Configuration
--------------------
Canvas: 640 x 320
Stroke: #2596be
Stroke Width: 4
Fill: none
Scale: 1
Rotate: 0deg
Translate: (0, 0)

Fitur

Visualisasi Perintah Jalur: Render data jalur SVG secara instan sehingga Anda dapat memeriksa kurva, segmen, dan kontinuitas bentuk saat mengedit string perintah mentah.
Kontrol Transformasi: Terapkan penyesuaian skala, rotasi, dan terjemahan untuk menguji kesesuaian ikon, penyelarasan koordinat, dan perilaku komposisi di dalam area pandang target.
Statistik Validasi dan Perintah: Mendeteksi pola perintah yang tidak didukung dan meninjau ringkasan frekuensi perintah untuk men-debug definisi jalur yang salah dengan cepat.
Keluaran Ekspor SVG: Ekspor markup SVG lengkap dan laporan analisis untuk diintegrasikan ke dalam kumpulan ikon, bagan, visual data, dan aset sistem desain.

Kasus Penggunaan

Debugging Jalur Ikon: Periksa data jalur ikon yang diekspor dari alat desain untuk memverifikasi kualitas perintah dan dengan cepat memperbaiki kumpulan koordinat yang salah format atau terlalu besar.
Pembuatan Bentuk Bagan: Buat prototipe jalur garis dan area khusus untuk komponen bagan, lalu sempurnakan perilaku guratan, pengisian, dan transformasi sebelum pengkodean.
Pengaturan Grafik Gerak: Mempersiapkan definisi jalur untuk sistem animasi dengan memvalidasi perintah dan menghasilkan markup SVG yang bersih dan dapat diprediksi.
QA Aset Sistem Desain: Tinjau konsistensi aset vektor di seluruh sistem desain dengan memeriksa kompleksitas jalur dan merender output dalam area pandang yang terkontrol.
Prototipe Frontend: Uji gaya jalur dengan cepat dan transformasi di browser tanpa membuka editor grafis kelas berat, lalu salin output ke dalam komponen.
Mempelajari Sintaks SVG: Gunakan umpan balik visual untuk memahami bagaimana M, C, Q, A, dan perintah terkait memengaruhi geometri, membuat sintaksis jalur lebih mudah dikuasai.

Bekerja Langsung dengan Data Jalur

Edit perintah jalur dalam teks biasa dan segera periksa keluaran yang diberikan, yang ideal untuk menyetel kurva, memperbaiki kesalahan koordinat, dan mengoptimalkan struktur vektor.

Kontrol Transformasi dan Styling

Terapkan pengaturan rotasi, penskalaan, terjemahan, guratan, dan pengisian untuk menguji perilaku jalur di dalam penampung target dan konteks UI.

Alur Kerja Browser Pribadi

Semua operasi berjalan secara lokal di browser Anda, menjadikan alat ini cepat dan cocok untuk aset vektor sensitif atau kepemilikan.

Pertanyaan yang Sering Diajukan

Visualizer mendukung perintah jalur SVG umum termasuk M, L, H, V, C, S, Q, T, A, dan Z dalam bentuk huruf besar dan kecil.

Ya. Anda dapat menerapkan kontrol skala, rotasi, dan terjemahan untuk memeriksa kesesuaian dan orientasi di berbagai area pandang.

Ya. Alat ini menghasilkan blok markup SVG lengkap termasuk atribut viewBox, grup transformasi, dan penataan gaya jalur agar mudah digunakan kembali.

Ini memberikan diagnostik tingkat perintah dan pemeriksaan validitas dasar, membantu Anda mengidentifikasi perintah yang tidak didukung dan masalah struktural dengan cepat.

Ya. Alat ini gratis, tidak memerlukan login, dan sepenuhnya berjalan di browser.

Perintah huruf besar seperti M dan L menggunakan koordinat absolut relatif terhadap asal SVG, sedangkan perintah huruf kecil seperti m dan l menggunakan koordinat relatif terhadap titik saat ini. Visualisator merender keduanya dengan benar dan menyorot setiap perintah di panel analisis.

Ya. Anda dapat membuat data jalur dari awal atau menempelkan string jalur yang ada, menerapkan gaya guratan dan isian, dan mengekspor markup SVG lengkap yang siap untuk disematkan dalam HTML atau diimpor ke dalam komponen React.