Softonic

Pembangun Path SVG

Langkah 1 / 2

Klik area kosong untuk menambahkan titik. Seret titik untuk memindahkan. Hapus yang terakhir dengan tombol.

Berikutnya

Atribut d pada <path> SVG adalah bahasa domain-spesifik mungil: M 10 10 L 100 10 C 120 10 120 60 100 60 Z. Setiap huruf adalah perintah (moveto, lineto, kubik Bézier, close-path), setiap angka adalah koordinat atau titik kontrol. Pembangun ini memungkinkan Anda mengeklik di kanvas untuk menempatkan titik jangkar dan menyeretnya untuk membentuk ulang, sambil menyaksikan path tergambar secara real time. Aktifkan penghalusan untuk mengubah segmen lurus menjadi kurva Bézier kubik, tutup bentuknya, lalu salin atribut d yang dihasilkan atau SVG lengkap.

Cara membangun path

  1. 1

    Klik untuk menambah titik

    Setiap klik menempatkan titik jangkar di kanvas; path menghubungkannya berurutan, dimulai dari `M` (moveto).

  2. 2

    Seret untuk membentuk ulang

    Seret titik mana pun untuk memindahkannya, dan hapus yang terakhir dengan tombol. Minimal dua titik.

  3. 3

    Lurus atau mulus

    Biarkan titik terhubung oleh segmen lurus `L`, atau aktifkan Mulus untuk mengubahnya menjadi kurva Bézier kubik `C`.

  4. 4

    Tutup atau biarkan terbuka

    Aktifkan Tutup path untuk menambahkan `Z` kembali ke awal, atau biarkan terbuka untuk polyline/stroke.

  5. 5

    Salin atribut d

    String `d` yang dihasilkan bersih dan dipisahkan spasi, siap ditempel ke SVG mana pun; Anda juga bisa menyalin atau mengunduh SVG lengkap.

Lembar contekan perintah path SVG

Pembangun visual di atas menghasilkan perintah M, L, C, dan Z (moveto, garis lurus, Bézier kubik, dan close-path). Sisa set perintah di bawah ini adalah referensi untuk membaca dan menyunting manual string d apa pun yang Anda tempel di tempat lain. Huruf besar menggunakan koordinat absolut; huruf kecil menggunakan offset relatif dari posisi pena saat ini.

Cmd Nama Sintaks
M / m Moveto M x y
L / l Lineto L x y
H / h Horizontal lineto H x
V / v Vertical lineto V y
C / c Kubik Bézier C x1 y1 x2 y2 x y
S / s Kubik Bézier mulus S x2 y2 x y
Q / q Kuadratik Bézier Q x1 y1 x y
T / t Kuadratik Bézier mulus T x y
A / a Arc A rx ry x-axis-rot lg sweep x y
Z / z Closepath Z

Contoh terselesaikan: centang membulat

M 4 12 L 10 18 L 20 6

Tiga perintah: pindah ke (4, 12), garis ke (10, 18), garis ke (20, 6). Tambahkan stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" ke path dan Anda punya glif centang yang bersih.

Perintah arc adalah yang tersulit

A rx ry x-axis-rotation large-arc-flag sweep-flag x y mengambil tujuh angka:

  • rx, ry, jari-jari elips
  • x-axis-rotation, rotasi elips dalam derajat
  • large-arc-flag, 0 untuk arc pendek, 1 untuk yang panjang
  • sweep-flag, 0 untuk berlawanan arah jarum jam, 1 untuk searah jarum jam
  • x, y, titik akhir

Balik flag satu per satu untuk melihat bagaimana dua titik akhir yang sama dapat terhubung dengan empat cara berbeda.

Tips

  • Jaga angka tetap kecil dan bulat. Snap koordinat ke grid piksel atau setengah-piksel; hindari 17 tempat desimal.
  • Lebih suka perintah huruf besar ketika path Anda berdiri sendiri. Huruf kecil (relatif) berguna ketika Anda akan menggeser path nanti.
  • Tutup hanya saat Anda mengisi. Jika path murni di-stroke, Z tidak menambah perubahan visual dan menghemat satu byte.
  • Jalankan melalui SVGO. Nol di belakang, spasi duplikat, dan perintah berulang akan menyusut dengan baik.

Pertanyaan yang Sering Diajukan

Koordinat dalam d berada dalam satuan yang sama dengan viewBox. Path yang dirancang untuk viewBox="0 0 24 24" yang ditempatkan pada viewBox="0 0 100 100" akan muncul di kuartal kiri atas. Skalakan koordinatnya atau ubah ukuran viewBox.

Ketika Anda berencana menggeser atau mengulang path. Perintah relatif menjaga bentuk tetap portabel, Anda dapat menambahkan M baru di mana saja dan semua di belakangnya ikut bergerak.

Bisa. <polyline points="0,0 10,10 20,0"> menjadi <path d="M 0 0 L 10 10 L 20 0" />. Polygon menambahkan Z di akhir. Sebagian besar optimizer melakukan ini otomatis karena path mengompresi lebih baik.

Untuk efek menggambar gunakan CSS stroke-dasharray + stroke-dashoffset. Untuk menggerakkan elemen sepanjang path gunakan SMIL <animateMotion> dengan href menunjuk ke id path.

Tidak. Perintah path dihitung di browser dan tidak pernah dikirim ke mana pun.

Alat Terkait

Pembuat Kertas Paranada

Buat kertas paranada siap cetak: paranada kosong, kunci G atau F, paranada ganda untuk piano, atau tablatur gitar. Atur jumlah, jarak garis, A4 atau Letter, dan margin, lalu unduh PDF atau SVG.

Pembuat Mosaik LEGO

Ubah foto menjadi rancangan mosaik persegi berukuran 16, 32, 48, atau 64 sel per sisi. Lihat perkiraan warna, hitung pelat 1×1, dan unduh panduan bernomor.

Pemilih Warna Material Design

Jelajahi palet warna Material Design. Salin nuansa mana pun (dari 50 hingga A700) dalam format HEX, RGB, atau HSL dengan sekali sentuh.

Pembuat kertas grafik

Buat kertas grafik siap cetak secara online: pilih kisi kotak atau titik, atur jarak dalam mm, pilih A4 atau Letter dan warna garis khusus, lalu cetak atau unduh SVG yang tajam.

Pembuat Avatar

Buat avatar ilustrasi datar di browser Anda. Pilih warna kulit, rambut, mata, mulut, pakaian, latar belakang, dan nama tampilan opsional, lalu unduh SVG atau PNG.

Pembuat Tiket Undian

Buat lembar tiket pribadi dua bagian bernomor berurutan untuk acara informal. Cetak semua halaman A4 atau US Letter, atau unduh halaman saat ini.

Alat ini tersedia dalam bahasa lain