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

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.

Generator Kertas Bergaris

Buat kertas bergaris siap cetak secara gratis. Pilih garis college, lebar, atau sempit, atur jarak antargaris dalam mm, ukuran kertas, dan garis margin, lalu cetak atau unduh SVG.

Pembuat Undangan

Buat undangan pernikahan, ulang tahun, akikah, atau acara kantor. Sesuaikan tulisan dan warna, lihat pratinjau langsung, lalu unduh PNG siap cetak ukuran 5R.

Inversi Warna Gambar

Balikkan setiap saluran RGB dalam sebuah gambar untuk menghasilkan gambar negatif, berguna untuk pengeditan kreatif dan melihat hasil pemindaian film.

Pemisah Grid Instagram

Bagi gambar lebar menjadi grid Instagram 3×3, atau berapa pun jumlah barisnya. Setiap potongan diberi nomor sehingga mudah diunggah secara terbalik.

Konverter ARW ke JPG

Konversi foto RAW Sony ARW ke JPG. Dapatkan JPEG yang mudah dibagikan dan kompatibel secara universal dari file RAW kamera Anda tanpa membuka Lightroom.

Alat ini tersedia dalam bahasa lain