Impor SVG Excalidraw: Bagian Mana Bisa Diedit?

Memasukkan SVG ke Excalidraw dengan drag-and-drop dapat memberi gambar tajam yang dapat diubah ukurannya tanpa memberi akses untuk menyunting path individualnya. Jika Anda perlu mewarnai ulang atau memindahkan bagian, Anda memerlukan scene Excalidraw yang terdiri atas elemen native. Konverter SVG ke Excalidraw dapat membuat elemen tersebut, tetapi hasilnya tetap perlu pemeriksaan visual. Diskusi Excalidraw tentang impor SVG menjelaskan persis masalah satu objek versus bagian yang bisa diedit ini.

Kami menguji ikon kecil dua warna dengan lubang transparan. Konverter dengan versi tetap menghasilkan tiga elemen Excalidraw yang dapat dipilih, tetapi mengisi lubang yang terlihat jelas dalam SVG. Ini adalah pengingat yang berguna: bisa diedit dan setia pada sumber adalah pemeriksaan terpisah.

Tiga arti “SVG dalam Excalidraw”

Kasus ketiga berjalan ke arah sebaliknya. Alat dapat memasukkan data sumber Excalidraw ke dalam ekspor SVG agar gambarnya sendiri dapat dibuka kembali untuk diedit. Ekstensi Excalidraw VS Code, misalnya, mendokumentasikan file .excalidraw.svg dengan data scene tertanam. Itu tidak berarti sembarang ilustrasi SVG sudah berisi bentuk Excalidraw.

Jika grafik impor tidak dapat di-ungroup, pertama identifikasi struktur objek yang dipilih. Panduan ungroup SVG kami membedakan objek gambar, path majemuk, dan grup sesungguhnya; Excalidraw menambahkan format scene-nya sendiri di atas pertanyaan tentang file sumber tersebut.

Jika Anda hanya perlu menyunting path SVG, ikuti pemeriksaan trace atau impor Boxy SVG dan simpan master SVG. Konversikan ke scene Excalidraw ketika Anda membutuhkan elemen scene native.

Pengujian konversi kecil: bentuk bertahan, lubang tidak

Sumber kami adalah SVG yang dibuat manual: satu cincin hijau kebiruan dari path majemuk even-odd, ditambah lingkaran emas. Bagian tengah cincin benar-benar transparan dalam aslinya, bukan dicat putih. Kami menjalankannya melalui repositori resmi svg-to-excalidraw memakai paket npm versi 0.0.2, menyimpan scene yang dikembalikan sebagai file .excalidraw, membuka file itu di Excalidraw, dan mengekspor PNG transparan untuk dibandingkan.

Sumber asli versus scene hasil konversi

Konversi melaporkan tidak ada error dan membuat tiga elemen native: dua elemen draw hijau kebiruan dan satu elips emas. Aksen emas dapat dipilih secara terpisah. Namun, bagian tengah transparan gagal dalam pemeriksaan tampilan. Dalam render asli, piksel tengahnya transparan; dalam ekspor PNG transparan Excalidraw, piksel yang bersesuaian berwarna hijau kebiruan opak. Respons konversi tanpa error tidak menjamin gambar yang cocok.

Ini adalah satu pengujian yang sengaja dibatasi, bukan klaim tentang setiap SVG atau jalur konversi. Eksperimen SVG Chop yang terpisah juga memperlakukan struktur SVG kompleks sebagai tantangan konversi. Sekadar melihat jumlah objek tidak cukup. Lubang, mask, pemotongan, gradasi, teks, dan grup bersarang layak mendapat pengujian sendiri ketika desain Anda memakainya.

Cara memeriksa SVG Anda sendiri

1. Simpan SVG asli. Simpan salinan sebelum mengimpor atau mengonversi. Periksa apakah wilayah yang ingin diubah sudah merupakan path atau bentuk terpisah. Satu path majemuk dapat memiliki lubang tanpa bagian-bagian terpisah yang dapat dipilih.
2. Tentukan arti “bisa diedit” untuk gambar ini. Jika Anda hanya perlu menskalakan dan menempatkan ilustrasi, gambar mungkin cukup. Jika Anda perlu memindahkan atau mewarnai ulang bagian, bagian itu perlu ada sebagai elemen scene native.
3. Coba jalur konversi pada salinan. Proyek SVG ke Excalidraw sumber terbuka mengonversi geometri SVG menjadi konten scene Excalidraw. Periksa pengaturannya saat ini dan catat versi paket yang Anda gunakan. Impor atau buka scene yang dihasilkan, jangan menganggap penempatan gambar biasa akan membuka akses ke path.
4. Hitung dan pilih bagian-bagiannya. Bisakah Anda memilih aksen tanpa badan? Bisakah Anda mewarnainya ulang sementara warna lain tetap? Buka lagi scene tersimpan dan ulangi penyuntingan.
5. Bandingkan gambar, bukan hanya objek. Letakkan asli dan ekspor Excalidraw di atas latar kontras. Periksa lubang, tumpang tindih, tepi, teks, dan efek yang Anda andalkan. Pengujian kami akan lolos pemeriksaan “tiga elemen”, tetapi gagal di sini.

Jika konversi memecah satu bagian yang dimaksud menjadi banyak elemen draw, pengelompokan dapat memudahkan pemindahan, tetapi tidak memulihkan struktur path asli. Jika lubang hilang, revisi sumber atau gunakan editor berbeda untuk karya tersebut. Simpan master yang bisa diedit dalam editor vektor ketika Excalidraw tidak dapat mempertahankan fitur yang Anda butuhkan.

Peran PerfectVector

PerfectVector membantu lebih awal dalam alur hanya ketika sumbernya karya raster, seperti ikon PNG datar yang belum memiliki path SVG. Konversikan clipart ke SVG, periksa apakah wilayah warna dan ruang negatif bertahan, lalu bersihkan geometri sebelum mencoba konversi Excalidraw. Panduan persiapan ikon kecil membahas kejelasan dan konsistensi sumber. Vektorisasi sendiri tidak dapat mengubah gambar yang ditempatkan dalam Excalidraw menjadi elemen scene native, dan SVG yang baru di-trace tetap membutuhkan pemeriksaan aplikasi tujuan di atas.

Untuk SVG yang sudah berisi bentuk vektor sesuai, lewati tracing ulang. Bandingkan asli dengan scene hasil konversi. Panduan bentuk SVG khusus draw.io terkait membedakan gambar versus bentuk native dengan cara serupa untuk editor diagram berbeda.

FAQ

Bisakah saya meng-ungroup gambar SVG yang ditempatkan menjadi bentuk Excalidraw? Pilihan pada tingkat gambar tidak membuka bagian SVG asli sebagai elemen Excalidraw native. Gunakan alur konversi ketika Anda memerlukan bentuk scene terpisah, lalu periksa hasilnya.

Apakah konversi SVG ke Excalidraw mempertahankan setiap lubang? Jangan menganggap demikian. Dalam pengujian versi 0.0.2 kami, cincin even-odd menjadi elemen draw yang bisa diedit tetapi tengah transparannya terisi. Bandingkan sumber dan scene tersimpan Anda sendiri, terutama ketika ruang kosong penting.

Haruskah saya memvektorisasikan SVG sebelum mengimpornya? Tidak. Jika SVG sudah memiliki bentuk yang Anda perlukan, periksa struktur dan konversi Excalidraw-nya. Vektorisasi relevan ketika gambar awal Anda berupa karya raster, seperti PNG atau JPG.

Sources

1. Diskusi Excalidraw #6082 — Pertanyaan pengguna tentang SVG impor yang berperilaku sebagai satu blok, bukan bagian-bagian yang bisa diedit.
2. Excalidraw — svg-to-excalidraw — Jalur konversi sumber terbuka resmi yang digunakan untuk pengujian ikon asli dengan versi tetap.
3. Ekstensi Excalidraw Editor untuk VS Code — Mendokumentasikan file scene Excalidraw dan ekspor SVG/PNG dengan data scene tertanam.
4. Minixcali — SVG Chop — Eksperimen independen mengonversi bagian SVG menjadi elemen Excalidraw, dengan catatan batasan geometri.

Jika titik awal Anda adalah ikon PNG, buat kandidat SVG dengan PerfectVector, periksa wilayah terpisah dan lubangnya, lalu uji scene Excalidraw tersimpan sebelum menggunakannya dalam gambar.