Tools 4 All
Beranda
Alat Pencitraan

Editor SVG Online

Editor vektor profesional yang cepat di browser Anda: menggambar dengan pena, mengedit titik, menggabungkan bentuk, menata dengan gradien, menganimasikan, lalu mengekspor SVG atau PNG yang dioptimalkan. Tidak ada yang diunggah.

GratisTanpa daftarBerjalan secara lokal — berkas tidak pernah meninggalkan perangkat Anda

Mulai cepat dan pintasan

Pilih alat di sebelah kiri (atau tekan tombolnya), seret di kanvas untuk menggambar, dan gunakan panel Desain di sebelah kanan untuk menata pilihan. Tekan ? kapan saja untuk daftar pintasan lengkap.

  • Navigasi: gulir untuk menggeser, Ctrl/⌘ + gulir atau cubit untuk zoom, tahan Space dan seret untuk menggeser. Shift+1 zoom agar pas.
  • Pilih: klik, Shift-klik, atau seret kotak pilihan. Klik dua kali grup untuk masuk ke dalamnya, jalur untuk mengedit titiknya, atau teks untuk mengetik.
  • Transformasi: seret pegangan untuk mengubah skala (Shift menjaga proporsi, Alt menskalakan dari tengah), seret kenop bulat untuk memutar, dan Ctrl/⌘-seret pegangan sisi untuk memiringkan.
  • Pena: klik untuk sudut, seret untuk kurva, klik titik pertama untuk menutup jalur, dan tekan Enter untuk selesai.
  • Berkas: letakkan SVG atau gambar di mana saja di editor, tempel kode SVG atau tangkapan layar, dan simpan otomatis menjaga pekerjaan Anda.
Untitled
Guide, features and FAQ

Cara menggunakan editor SVG

  1. Buka atau mulai menggambar

    Letakkan SVG, PNG, atau JPEG di kanvas, buka berkas, atau mulai dengan halaman kosong. Tidak ada yang diunggah: editor berjalan sepenuhnya di browser Anda.

  2. Gambar dan edit

    Gunakan alat pena, pensil, dan bentuk, lalu sempurnakan jalur titik demi titik, gabungkan bentuk dengan operasi boolean, dan tata isian, garis tepi, serta gradien.

  3. Atur

    Kelompokkan, atur urutan, dan kunci objek di panel Lapisan, ratakan dan sebarkan, gunakan ulang karya sebagai simbol, dan edit kode SVG secara langsung.

  4. Ekspor

    Unduh SVG, PNG, JPEG, atau WebP yang dioptimalkan pada skala apa pun, atau salin hasilnya sebagai kode SVG, data URI, komponen React, atau SVG siap Tailwind yang mengambil warnanya dari CSS.

Editor SVG profesional yang berjalan sepenuhnya di browser Anda

Editor SVG Tools 4 All adalah aplikasi grafik vektor lengkap yang langsung terbuka tanpa unduhan, akun, atau unggahan. Gunakan untuk menggambar logo, ikon, ilustrasi, diagram, dan aset UI, atau untuk merapikan dan menyempurnakan berkas SVG yang sudah Anda miliki. Editor ini dibangun di sekitar format SVG itu sendiri, sehingga berkas yang Anda ekspor adalah dokumen yang sama dengan yang Anda edit: tanpa format eksklusif, tanpa konversi tersembunyi.

Yang dapat Anda lakukan

  • Menggambar dengan presisi: alat pena dengan kurva Bézier, pensil bebas dengan penghalusan, persegi panjang dengan sudut bulat, terpotong, atau terbalik secara terpisah, elips, garis, kuas blob, penghapus, pisau dan gunting, serta bentuk yang dapat diedit: poligon, bintang, segitiga, salib, bingkai, cincin, pai, bulan sabit, panah, balon percakapan, roda gigi, hati, awan, bunga dan spiral, serta teks.
  • Edit jalur titik demi titik: pindahkan titik dan pegangan, ubah antara titik sudut, halus, dan simetris, tambah dan hapus titik, gabung dan putus jalur, tekuk segmen secara langsung, dan tempelkan pegangan ke garis singgung.
  • Gabungkan bentuk: satukan, kurangi, iris, kecualikan, dan bagi, ditambah kerangka garis tepi, offset jalur, sederhanakan, dan balik arah, semuanya dihitung oleh mesin geometri kami sendiri yang mempertahankan kurva di worker latar belakang.
  • Tata gaya segalanya: warna solid, gradien linear dan radial dengan pegangan di kanvas, pola, opasitas per isian dan per garis tepi, putus-putus, ujung, sambungan, penanda kepala panah, mode paduan, efek blur dan bayangan jatuh, jalur klip, dan masker.
  • Tetap teratur: panel lapisan dengan seret untuk mengatur urutan, ganti nama dan penyusunan bertingkat, kunci dan sembunyikan, grup dan pisahkan grup, ratakan dan sebarkan terhadap pilihan, papan gambar, atau objek kunci, contoh warna dokumen, dan simbol yang dapat digunakan ulang.
  • Bekerja seperti profesional: panduan cerdas dengan label jarak dan petunjuk jarak sama, tempel ke kisi, piksel, panduan penggaris, titik dan jalur, kolom numerik X/Y/W/H/rotasi, urungkan tanpa batas, serta pintasan bergaya Figma dan Illustrator.
  • Kode dan ekspor: tampilan kode SVG dua arah, ekspor SVG yang dioptimalkan dengan tampilan ukuran, PNG/JPEG/WebP pada skala apa pun, serta salin sebagai SVG, data URI, React (JSX atau TSX), SVG Tailwind, atau latar CSS.
  • Dibuat untuk produksi web: warna dokumen dengan ganti sekali klik dan Ubah ke currentColor, teks ke kerangka, kerangka garis tepi, ratakan transformasi dan pisahkan grup, sesuaikan kanvas dengan konten, dan sederhanakan jalur yang berderau.
  • Ruang kerja sungguhan: beberapa gambar dalam tab, masing-masing dengan riwayat urungkan sendiri, menu ringkas dengan submenu, panel samping yang dapat dilipat (Ctrl/⌘+B), dan pengeditan layar penuh di ponsel maupun desktop.

Mengapa editor yang native SVG itu penting

Banyak alat desain memperlakukan SVG sebagai format ekspor: Anda menggambar dalam model mereka sendiri, dan SVG dibuat di akhir. Cara itu berhasil untuk ikon sederhana, tetapi gagal ketika Anda perlu mengedit berkas yang sudah ada, mempertahankan id yang dibutuhkan CSS atau JavaScript Anda, atau memahami mengapa sebuah berkas sepuluh kali lebih besar dari seharusnya. Editor ini bekerja langsung pada dokumen SVG. Grup tetap grup, gradien tetap gradien, dan <symbol> yang digunakan lima kali tetap satu simbol. Saat Anda mengganti nama lapisan, Anda sedang mengatur id elemen tersebut.

Cepat dengan berkas besar

Kecepatan menjadi tujuan desain sejak baris kode pertama. Gambar dirender secara native oleh browser Anda di dalam lapisan terisolasi. Pegangan pilihan, kerangka saat diarahkan, dan panduan digambar di lapisan atas terpisah, sehingga menggerakkan mouse tidak pernah menyentuh dokumen Anda. Indeks spasial (R-tree) menemukan apa yang ada di bawah penunjuk dalam hitungan mikrodetik, bahkan dengan puluhan ribu bentuk. Pada dokumen berat, penggeseran dan zoom diserahkan ke kompositor GPU dan vektor dirender ulang dengan tajam saat Anda berhenti. Pekerjaan berat seperti operasi boolean, offset jalur, dan optimasi SVG berjalan di Web Worker, sehingga antarmuka tetap responsif.

Alat presisi untuk pekerjaan vektor

Gunakan alat pena untuk mengklik sudut dan menyeret kurva halus. Tahan Shift untuk menjaga sudut 45° dan Alt untuk memutus pegangan. Dengan alat titik, Anda dapat menyeret segmen untuk menekuknya, mengklik dua kali untuk menambah titik, atau memilih beberapa titik dan meratakannya. Panduan cerdas menunjukkan saat objek sejajar dengan tepi atau tengah objek di sekitarnya, dan saat jarak antarobjek sama. Anda juga dapat menyeret panduan keluar dari penggaris. Untuk nilai yang tepat, ketik X, Y, lebar, tinggi, dan rotasi di panel Desain. Kolom menerima aritmetika seperti 120+16 atau 200/3.

Ekspor yang bersih dan kecil

Editor sering meninggalkan metadata, definisi yang tidak digunakan, grup berlebih, dan angka yang terlalu presisi dalam berkas yang mereka simpan. Dialog ekspor menjalankan pengoptimal bergaya SVGO di latar belakang. Pengoptimal membulatkan angka ke presisi yang Anda pilih, mengubah data jalur ke bentuk terpendeknya, menghapus metadata editor dan definisi yang tidak digunakan, mempersingkat id dan warna, serta meleburkan grup yang tidak berguna. Setiap optimasi dapat dimatikan, dan dialog menampilkan ukuran berkas sebelum dan sesudahnya. Untuk keluaran raster, pilih PNG, JPEG, atau WebP pada 1×, 2×, 4×, atau ukuran piksel tertentu, dengan atau tanpa latar transparan.

Dibuat untuk produksi web

SVG yang digunakan di situs web dan aplikasi membutuhkan hal yang berbeda dari karya cetak. Daftar Warna dokumen menampilkan setiap warna yang digunakan berkas: ubah satu dan semua yang memakainya ikut berubah, atau ubah ke currentColor agar ikon React atau Tailwind mengambil warnanya dari CSS. Berkas impor sering membawa grup bertingkat dan transformasi yang membuat jalur sulit diedit: Ratakan transformasi & pisahkan grup memasukkannya ke koordinat dalam satu langkah, dan Sesuaikan dengan konten memangkas viewBox sesuai karya, termasuk garis tepi. Teks ke kerangka dan Kerangka garis tepi mengubah huruf dan ketebalan garis menjadi jalur biasa yang tampil sama di mana pun, dan Sederhanakan menghilangkan ratusan titik dari bentuk hasil jiplakan atau gambar bebas.

Berkas Anda tetap di perangkat Anda

Tidak ada server di balik editor. Membuka berkas berarti membacanya dari disk Anda ke halaman, dan mengekspor membuat berkas di perangkat Anda. Simpan otomatis menulis ke penyimpanan IndexedDB privat browser Anda, yang juga menyimpan daftar berkas terbaru Anda. Jika Anda tidak sengaja menutup tab, dokumen terakhir Anda dipulihkan saat kunjungan berikutnya.

Jelajahi alat pencitraan lainnya

Pertanyaan yang sering diajukan

Apakah editor SVG ini benar-benar gratis dan privat?
Ya. Gratis, tanpa akun, dan berjalan 100% di browser Anda. Gambar Anda tidak pernah diunggah: berkas dibaca secara lokal, simpan otomatis masuk ke penyimpanan browser Anda sendiri (IndexedDB), dan ekspor dibuat di perangkat Anda.
Bisakah editor ini membuka berkas SVG dari Illustrator, Inkscape, Figma, atau pustaka ikon?
Ya. Editor bekerja langsung pada dokumen SVG, sehingga berkas sungguhan tetap mempertahankan struktur, id, gaya, gradien, simbol, jalur klip, dan maskernya. Berkas yang berantakan atau tidak valid diperbaiki saat dibuka, skrip dinonaktifkan selama Anda mengedit, dan berkas .svgz didekompresi secara otomatis.
Apakah ada alat pena dan operasi boolean seperti Illustrator?
Ya. Alat pena menggambar jalur Bézier dengan titik sudut, halus, dan simetris, dan alat titik memungkinkan Anda menambah, menghapus, mengubah, menggabung, memutus, dan meratakan titik. Satukan, kurangi, iris, kecualikan, dan bagi bekerja pada kurva dan tetap mempertahankannya sebagai kurva, dan Anda juga dapat membuat kerangka garis tepi, offset, dan menyederhanakan jalur.
Bisakah saya menganimasikan SVG?
Ya. Buka ruang kerja Animasi, gerakkan playhead, dan ubah posisi, rotasi, skala, opasitas, atau warna objek: setiap perubahan menjadi bingkai kunci dengan kurva easing, dan properti yang sudah dianimasikan otomatis mendapat bingkai kunci baru. Animasi disimpan sebagai SVG standar (SMIL), sehingga dapat diputar di setiap browser tanpa skrip apa pun.
Bisakah saya mengedit kode SVG secara langsung?
Ya. Panel Kode menampilkan sumber SVG secara langsung dengan penyorotan sintaksis. Mengedit kode memperbarui gambar, dan mengedit gambar memperbarui kode. Setiap perubahan, dari sisi mana pun, dapat diurungkan.
Format ekspor apa saja yang didukung?
SVG yang dioptimalkan, dihasilkan oleh pengoptimal bawaan bergaya SVGO dengan tampilan ukuran sebelum/sesudah, serta PNG, JPEG, dan WebP pada 1×, 2×, 4×, atau ukuran khusus, dengan transparansi opsional. Anda juga dapat menyalin pilihan sebagai kode SVG, data URI, atau JSX untuk React.
Apakah pekerjaan saya akan hilang jika browser ditutup?
Tidak. Dokumen Anda disimpan otomatis ke penyimpanan lokal browser sesaat setelah setiap perubahan. Saat berikutnya Anda membuka editor, sesi terakhir Anda dipulihkan, dan dokumen lama tetap tersedia di Berkas → Berkas terbaru.
Bisakah saya membuat ikon menggunakan currentColor untuk React atau Tailwind?
Ya. Bagian Warna dokumen mencantumkan setiap warna dalam gambar (setiap penulisan warna dihitung sekali). Klik contoh warna untuk memilih semua yang menggunakannya dan mengubahnya sekaligus, atau pilih Ubah ke currentColor: ikon kemudian mengambil warnanya dari CSS, seperti kelas text-… Tailwind, sambil tetap mempertahankan tampilannya di editor. Salin sebagai komponen React atau SVG Tailwind dari menu Edit atau menu konteks.
Bagaimana cara mengubah teks menjadi jalur atau garis tepi menjadi bentuk berisi?
Pilih teks dan pilih Teks ke kerangka (Ctrl/⌘+Shift+O): setiap glif menjadi jalur tepat di tempat browser menggambarnya, termasuk teks pada jalur dan span bergaya. Untuk garis tepi, Kerangka garis tepi mengubah garis tepi menjadi bentuk berisi yang sesuai dengan lebar, ujung, sambungan, dan putus-putusnya, sehingga logo mempertahankan ketebalannya pada ukuran berapa pun.
Bisakah editor ini merapikan SVG impor yang berisi transformasi dan grup bertingkat?
Ya. Ratakan transformasi & pisahkan grup menulis setiap transformasi ke koordinat jalur dan membubarkan grup dalam satu langkah urungkan, hanya mempertahankan yang akan mengubah tampilan (grup yang diklip, dimasker, atau dirujuk). Sesuaikan dengan konten memangkas kanvas (viewBox, lebar, dan tinggi) sesuai karya, termasuk garis tepi, dengan bantalan opsional, dan Sederhanakan mengurangi jumlah titik pada jalur yang berderau.
Bisakah saya mengerjakan beberapa gambar sekaligus?
Ya. Setiap gambar terbuka di tabnya sendiri di atas kanvas, dengan riwayat urungkan, pilihan, dan zoom sendiri. Berpindahlah sesuka hati; menutup tab tetap menyimpan berkas di Berkas → Berkas terbaru, dan tab yang terbuka akan kembali saat kunjungan berikutnya.
Di mana semua perintahnya? Menunya ringkas.
Perintah terkait ada di submenu (Susun, Transformasi, Jalur, Klip & masker, Salin sebagai, Ratakan & sebarkan…). Arahkan kursor atau ketuk, atau gunakan tombol panah. Setiap perintah juga memiliki pintasan: tekan ? untuk daftar lengkap. Di desktop Anda dapat melipat panel samping dengan Ctrl/⌘+B agar kanvas lebih lapang.
Apakah editor ini berfungsi di ponsel dan tablet?
Ya. Di layar kecil, alat pindah ke bilah alat bawah dan panel terbuka sebagai lembar. Cubit untuk zoom, seret dengan dua jari untuk menggeser, dan tekan lama untuk menu konteks.
Seberapa besar gambar saya bisa dibuat?
Editor ini dibuat untuk berkas berat. Editor menggunakan indeks spasial untuk uji klik dan pilihan, lapisan atas terpisah untuk pegangan dan panduan, penggeseran dan zoom khusus kompositor pada dokumen besar, serta Web Worker untuk geometri dan optimasi. Dokumen dengan puluhan ribu elemen tetap responsif.
Semua alat pencitraan →
Kompresor Gambar Perkecil ukuran berkas gambar sambil mempertahankan kualitas visual. Pengonversi Gambar Konversi gambar antara PNG, JPEG, WebP, GIF, BMP, ICO, TIFF, dan lainnya. Pengubah Ukuran Gambar Ubah ukuran gambar ke dimensi yang tepat — sempurna untuk pasfoto. Gambar ke PDF Gabungkan satu atau beberapa gambar menjadi satu dokumen PDF.