Impor SVG Penpot: Masukkan Bentuk yang Bisa Diedit

Untuk mengimpor SVG ke Penpot, buka file desain dan seret .svg ke kanvas, atau pilih alat penyisipan gambar di toolbar untuk memilih file. Perintah Import files pada dashboard digunakan untuk file proyek Penpot. Jika ingin menempatkan ikon, mulailah di dalam desain. Panduan penyisipan layer dan dokumentasi impor proyek Penpot menjelaskan jalur terpisah ini.

Setelah grafis muncul, periksa apakah Anda bisa mengubah satu area warna dan mengedit satu kontur. Ikon bisa tampak benar tetapi tetap sulit dimodifikasi. Jika sumber sudah berupa vektor, perbaiki atau ekspor ulang jika perlu. Trace PNG atau JPG hanya jika Anda perlu memulihkan bentuk dari piksel.

Periksa impor sebelum menggunakannya kembali

Pertahankan SVG asli, impor satu ikon yang mewakili, dan kerjakan duplikat. Uji tampilan, satu fill, satu kurva, dan teks yang bisa diedit. Ekspor SVG terpisah dan bandingkan dengan aslinya sebelum mengulangi alur pada seluruh kit.

Mulailah di kanvas, lalu periksa layer

Buka file Penpot tempat grafis akan digunakan. Sisipkan SVG yang disimpan ke area kosong agar bisa diperiksa terpisah dari desain lain. Jika penyeretan gagal, gunakan pemilih file alat penyisipan gambar untuk mengeluarkan perilaku drag-and-drop dari diagnosis.

Pilih grafis impor dan buka entrinya dalam panel Layers. Grup merupakan organisasi yang berguna, bukan bukti SVG menjadi bitmap. Anda bisa memilih anak dari panel atau mengeklik dua kali ke dalam grup; Penpot juga mendukung seleksi mendalam dengan Ctrl-click atau Command-click. Kontrol ini dibahas dalam panduan pemilihan layer.

Konten SVG yang berbeda bisa menjadi jenis objek berbeda. Dalam importer Penpot yang dirilis, bentuk umum seperti path, persegi panjang, dan elips memiliki handler bentuk native; elemen lain bisa dipertahankan sebagai SVG mentah. Importer juga menangani elemen gambar secara terpisah. Karena itu, nama file saja tidak bisa memastikan cara pengeditan setiap bagian. Lihat importer bentuk SVG.

Hindari memisahkan grup atau meratakan semuanya sejak awal. Kenali dahulu bagian yang ingin diubah. Pertahankan grup jika anak-anaknya sudah memberi kontrol yang dibutuhkan.

Uji satu fill dan satu kurva

Gunakan ikon kecil dengan bagian yang tampak terpisah. Tanaman dalam pot merupakan contoh berguna: pot harus menerima warna berbeda tanpa mengubah daun, dan satu daun harus bisa diedit tanpa mendistorsi seluruh tanaman.

Pada duplikat ikon impor:

1. Pilih layer pot dan ubah fill-nya menjadi warna kontras. Pastikan hanya area tujuan yang berubah.
2. Pilih satu path daun. Tekan Enter untuk mengedit node, gerakkan sedikit satu titik, lalu batalkan. Penpot mendokumentasikan ini dalam petunjuk pengeditan node.
3. Bandingkan duplikat dengan impor yang belum diubah. Pastikan siluet asli, celah kecil, dan ketebalan stroke tetap utuh setelah pengujian dibatalkan.

Jika pot dan daun berubah bersama, periksa pilihan dan struktur sumber. Anda mungkin memilih grup luar, atau sumber mungkin menggabungkan beberapa area menjadi satu path. Perubahan warna yang berhasil tidak membuktikan setiap kontur merupakan path native terpisah.

Konten SVG mentah merupakan kemungkinan lain. Penpot memiliki panel opsi terpisah untuknya, termasuk kontrol tampilan elemen yang didukung. Karena itu, keberadaan kontrol fill atau stroke tidak menjamin pengeditan node biasa. Jika bagian tidak bisa diedit sesuai kebutuhan, sederhanakan atau gambar ulang bagian itu di editor sumber dan impor salinan baru. Perbedaan ini terlihat dalam implementasi opsi SVG mentah Penpot.

Diagnosiskan gejala sebelum mengubah file

Gunakan SVG yang belum diubah sebagai referensi. Buka di browser dan bandingkan rendering tersebut dengan impor Penpot. Jika sudah terlihat salah di browser, kembali ke ekspor sumber sebelum mencoba memperbaiki salinan Penpot.

Stroke hilang dan grafis tidak terlihat

Periksa pengaturan fill dan stroke layer terpilih sebelum menghapusnya. Penpot menyediakan warna stroke, opasitas, lebar, gaya, dan visibilitas, serta kontrol end cap untuk path terbuka. Tanda pendek dengan stroke bisa terlihat sangat berbeda dengan cap lain, jadi bandingkan bentuk alih-alih menganggap garis tidak ada. Kontrol yang tersedia dijelaskan dalam Color and Strokes.

Untuk objek tidak terlihat, periksa juga layer tersembunyi dan clipping. Jika browser merender sumber dengan benar tetapi Penpot tidak, isolasi elemen yang gagal dalam salinan sumber. Ekspor ulang sampel lebih sederhana dan bandingkan lagi. Ini memberi file dan gejala spesifik untuk diselidiki alih-alih mengubah beberapa pengaturan sekaligus.

Jangan menghapus semua style, mask, atau definisi hanya karena solusi lama menyarankannya. Elemen itu bisa membawa informasi tampilan. Jika konstruksi stroke sumber menjadi masalah, ikuti diagnosis stroke SVG hilang yang lebih mendalam dan pertahankan master yang bisa diedit sebelum memperluas stroke menjadi outline.

Teks yang terlihat benar tetapi tidak bisa diedit

Untuk label tombol, coba ubah satu kata. Untuk logo, tentukan apakah mempertahankan bentuk huruf sudah cukup. Ini persyaratan berbeda.

Huruf impor mungkin sudah berupa outline, atau tetap sebagai konten SVG alih-alih layer teks native. Jangan menganggap setiap elemen teks SVG impor menjadi teks Penpot yang bisa diedit. Jika kata perlu sering diubah, buat kembali dengan alat teks Penpot, pilih font tujuan, dan bandingkan spasi serta pergantian baris. Panduan teks Penpot menjelaskan pembuatan layer teks dan pengeditan isinya.

Ketika bentuk huruf berubah atau pemenggalan baris berbeda, gunakan panduan masalah font SVG. Simpan salinan dengan teks yang bisa diedit meskipun versi serah membutuhkan huruf outline.

Kapan PerfectVector berguna dalam alur

PerfectVector berguna ketika Anda memiliki ikon atau ilustrasi raster dan membutuhkan kontur yang bisa diedit di Penpot. Konversikan PNG atau JPG menjadi path SVG, periksa siluet dan area warna, lalu impor hasil dan jalankan pengujian satu fill dan satu kurva. Trace tetap perlu dinilai terhadap grafis yang ingin digunakan.

Gambar raster yang ditempatkan di dalam SVG tidak memperoleh kontur daun atau pot yang bisa diedit hanya karena wadahnya berubah. Importer Penpot memiliki handler gambar terpisah; handler itu tidak mengubah gambar menjadi objek path native yang ditangani bagian lain dalam kode importer.

Gunakan ekspor vektor asli jika tersedia. Untuk simbol antarmuka sederhana, menggambarnya dengan bentuk native Penpot mungkin memberi geometri yang lebih disengaja daripada tracing. Pertahankan foto dan grafis kaya tekstur sebagai gambar jika pikselnya bagian desain. Penjelasan vektorisasi gambar membahas hal yang bisa dipulihkan tracing dan hal yang diubahnya.

Ekspor satu sampel sebelum membangun kit

Simpan desain kerja di Penpot dan ekspor SVG serah terpisah. Pilih ikon atau board-nya, tambahkan preset ekspor dengan tombol plus pada bagian Export di panel Design, dan pilih SVG. Penpot mendokumentasikan ini dalam Exporting layers.

Buka file ekspor di browser. Bandingkan warna, stroke, tampilan teks, pemangkasan, dan ruang kosong dengan referensi. Jika file harus kembali ke editor desain, impor ekspor itu ke area terpisah dan ulangi pengujian pengeditan. Tampilan benar dan struktur pengeditan berguna masing-masing membutuhkan pemeriksaan.

Sebelum menambahkan sampel ke kit lebih besar, pastikan:

• Area yang membutuhkan warna terpisah bisa dipilih secara mandiri.
• Kontur yang diharapkan bisa diubah menyediakan kontrol pengeditan yang berguna.
• Label yang bisa diedit tetap sebagai teks dalam desain kerja.
• Ikon ekspor memiliki batas dan padding yang diinginkan.
• Ikon masih terbaca jelas pada ukuran antarmuka sebenarnya.

Lalu terapkan pemeriksaan yang sama pada seluruh set. Alur ikon PNG-ke-SVG untuk kit UI menambahkan grid bersama, ukuran optis, dan aturan penamaan setelah impor individual sudah baik.

FAQ

Mengapa dialog Import files Penpot menolak SVG saya? Dialog itu mengimpor file proyek Penpot. Untuk menempatkan grafis SVG, buka file desain dan gunakan alat penyisipan gambar atau seret SVG ke kanvas.

Apakah mengimpor SVG membuat semua bagian bisa diedit? Bentuk vektor umum bisa menjadi objek native Penpot, tetapi konten lain mungkin tetap sebagai SVG mentah atau gambar. Uji perubahan fill, kurva, atau teks tertentu yang dibutuhkan sebelum menggunakan kembali grafis.

Apakah saya perlu memisahkan grup SVG impor? Hanya jika mengubah struktur grup membantu tugas. Coba pilih anak dalam panel Layers terlebih dahulu. Mempertahankan grup yang berguna tidak menghalangi pengeditan anak yang bisa dipilih.

Haruskah saya memvektorisasi SVG yang diimpor secara salah? Mulailah dengan memperbaiki atau mengekspor ulang grafis vektor yang ada. Vektorisasi berguna ketika grafis yang tersedia berupa raster dan Anda membutuhkan path; itu bukan langkah perbaikan umum untuk SVG yang sudah ada.

Sources

1. Penpot: Layers — Penyisipan grafis, pemilihan anak, dan pengeditan node path.
2. Penpot: Ekspor dan impor file Penpot — Jalur impor proyek native, terpisah dari penyisipan grafis kanvas.
3. Penpot: Importer bentuk SVG — Penanganan terpisah bentuk native, gambar, dan konten SVG mentah dalam versi yang dirilis.
4. Penpot: Opsi SVG mentah — Kontrol tampilan sendiri tidak membuktikan path native bisa diedit.
5. Penpot: Color and Strokes — Kontrol fill, stroke, dan end cap yang digunakan dalam pemeriksaan diagnosis.
6. Penpot: Text and Typography — Pembuatan layer teks native dan pengeditan isinya.
7. Penpot: Exporting layers — Penambahan preset ekspor SVG untuk layer atau board.

---

Jika sumber berupa PNG atau JPG dan Anda membutuhkan bentuk yang bisa diedit, siapkan SVG dengan PerfectVector. Impor ke Penpot, ubah satu fill, dan uji satu kurva sebelum menggunakan grafis dalam kit desain Anda.