Apa itu Editor SVG?

Gambar bentuk, path, dan teks di kanvas visual, sesuaikan warna stroke dan fill, lalu ekspor kode SVG. Tanpa perlu software desktop.

Alat yang tersedia mencakup persegi, elips, garis, path bebas, teks, dan pustaka bentuk (segitiga, segi enam, bintang, panah). Teks diedit langsung di kanvas — pilih alat teks lalu ketik, atau klik dua kali teks yang sudah ada untuk mengubahnya. Setiap elemen punya isi, warna dan ketebalan garis, serta opasitas sendiri, dan Anda bisa mengetik nilai X, Y, lebar, dan tinggi yang persis di panel properti. Impor SVG yang sudah ada cukup dengan satu klik, kunci penggambaran ke kisi 10 piksel, dan lakukan undo atau redo hingga lima puluh langkah. Ekspor hasilnya sebagai kode SVG biasa untuk HTML dan React JSX, atau sebagai PNG raster untuk tempat yang tidak menerima SVG.

Cara menggunakan

1. Pilih alat gambar (persegi panjang, elips, garis, path, atau teks) dan gambar di kanvas.
2. Pilih elemen untuk memindahkan, mengubah ukuran, memutar, atau mengubah fill, stroke, dan opasitasnya.
3. Ekspor grafis yang sudah jadi sebagai file SVG, atau salin markup SVG mentahnya.

Kapan menggunakan

• Membuat logo, garis pemisah, atau bentuk hero sekali pakai untuk landing page.
• Mengutak-atik SVG yang sudah ada secara manual tanpa membuka aplikasi desktop berat.
• Mengajar dasar SVG sambil melihat kode berubah saat menggambar di kanvas.

Hasil

Seorang web developer membutuhkan logo mark sederhana — dua lingkaran yang saling tumpang tindih dengan isian gradien. Mereka menggambar bentuk di kanvas, menerapkan warna, dan menyalin kode SVG langsung ke HTML mereka.

FAQ

Aman tidak menempel SVG yang saya copy langsung ke JSX React?

Umumnya aman, dengan satu catatan: atribut seperti stroke-width dan stop-color perlu jadi strokeWidth dan stopColor di JSX. SVG yang di-copy di sini pakai kebab-case, cocok langsung untuk HTML dan mudah dikonversi dengan satu kali find and replace.

Bisakah saya mengimpor SVG yang sudah ada untuk dilanjutkan editannya?

Bisa — gunakan tombol Impor SVG untuk memuat berkas .svg apa pun dari perangkat Anda. Persegi, elips, lingkaran, garis, path, dan teks akan jadi elemen yang bisa diedit di kanvas. Gradien, filter, dan grup bersarang dilewati karena editor menyimpan tiap bentuk sebagai primitif tunggal.

Kenapa SVG saya terlihat beda di Illustrator atau Figma?

Tiap renderer memperlakukan perataan garis, gradien, dan filter sedikit berbeda. Hasil di sini sama persis dengan tampilan semua browser modern dan sesuai spesifikasi, jadi perbedaan biasanya berasal dari interpretasi aplikasi lainnya.

Apakah alat path mendukung kurva Bezier dengan titik kontrol?

Alat path bebas merekam titik yang kamu gambar dan mengeluarkannya sebagai polyline. Untuk kurva Bezier kubik sungguhan, ekspor SVG dan ubah atribut d secara manual, atau buka hasilnya di alat vektor yang menampilkan handle kontrol.

Berapa banyak elemen yang bisa ditambahkan sebelum kanvas melambat?

Beberapa ratus bentuk masih lancar di perangkat modern. Ribuan elemen (peta rumit atau grid ikon) mulai terasa berat karena setiap drag menggambar ulang seluruh kanvas. Gabungkan jadi path majemuk lebih sedikit kalau sudah sampai segitu.

Alat terkait