Cara Mengedit SVG: Editor Visual atau Kode File

Untuk mengedit file SVG, buka salinannya di editor visual jika Anda ingin mengubah bentuk, warna, dan kurva, atau di editor teks untuk perubahan kecil pada markup. Simpan sebagai SVG, lalu buka kembali file yang disimpan untuk memeriksa hasilnya. Metode yang tepat bergantung pada perubahan yang dibutuhkan dan objek di dalam file.

Sebelum memilih perintah yang lebih banyak mengubah struktur, kenali objek yang Anda pilih. Grup, satu path dengan beberapa bagian, dan PNG tertanam semuanya bisa tampak sebagai satu objek di kanvas. Masing-masing perlu perbaikan berbeda.

Siapkan salinan dan kenali objek SVG

Anda memerlukan file SVG, salinan kerja, editor, dan penampil yang mendukung SVG. Simpan file asli sampai salinan hasil ekspor lolos pemeriksaan.

SVG adalah singkatan Scalable Vector Graphics. Markup XML-nya dapat menjelaskan bentuk dan path vektor, tetapi juga dapat memuat gambar tertanam. Path menjelaskan garis atau bentuk; node adalah titik pada path tersebut yang dapat diedit di editor vektor. Ekstensi SVG saja tidak memberi tahu apakah gambar yang terlihat menyediakan titik-titik itu.

Buka salinan dan periksa objek terpilih di panel Layers atau Objects. Jika perlu, lihat markup di editor teks. Kenali jenis objek sebelum mengubah strukturnya:

Elemen <image> dapat merujuk konten PNG atau JPEG. Piksel itu tidak menjadi path hanya karena file luarnya berakhiran .svg. Tepi kotak-kotak saat diperbesar merupakan petunjuk; panel objek dan referensi sumber memberi diagnosis yang lebih spesifik. Beberapa editor juga memasukkan SVG vektor yang valid sebagai satu objek grafis, jadi satu seleksi saja tidak membuktikan banyak hal.

Path gabungan dapat mempertahankan lubang, seperti bagian tengah huruf “O”. Memisahkannya dapat mengubah lubang tersebut. Gunakan diagnosis jenis objek SVG ketika Ungroup tidak tersedia atau tidak berpengaruh.

Pilih editor visual atau kode

Inkscape gratis dan bersumber terbuka, berjalan di macOS, Windows, dan Linux, serta menggunakan SVG sebagai format utama. Illustrator merupakan pilihan lain jika sudah menjadi bagian alur kerja Anda. Figma dapat memindahkan aset antartool desain sebagai SVG, meskipun panduan impornya tidak mendukung elemen SVG marker dan pattern. Periksa impor yang rumit sebelum menetapkan editor.

Alur editor SVG yang didokumentasikan Canva mencakup perubahan warna dan tata letak dasar. Editor browser dapat cocok untuk pekerjaan kecil. Periksa dukungan fill, stroke, teks, dan efek dalam file, beserta ketentuan ekspor saat ini. Untuk tugas khusus memisahkan fill solid yang didukung menurut warna persis menjadi file dengan posisi yang selaras, gunakan SVG Color Separator; gunakan editor vektor untuk mengubah bentuk path.

Edit bentuk secara visual, lalu periksa ekspor

Nama perintah berbeda menurut editor, tetapi urutan pekerjaannya seperti ini:

1. Buka salinan kerja. Bandingkan desain yang diimpor dengan aslinya. Berhenti jika huruf, pola, atau efek sudah berubah.
2. Pilih objek yang dimaksud. Masuk atau pisahkan grup hanya jika panel mengenalinya sebagai grup. Jika berupa path, gunakan alat node atau seleksi langsung.
3. Buat satu perubahan. Ubah fill, pindahkan bagian, atau sesuaikan beberapa node. Saat mengubah ukuran, pertahankan rasio aspek kecuali peregangan memang disengaja.
4. Periksa area yang berubah. Lihat kurva dan celah kecil dari dekat, lalu lihat seluruh desain pada ukuran penggunaannya.
5. Simpan atau ekspor SVG baru. Buka kembali file di penampil dan aplikasi tempat Anda akan menggunakannya. Pastikan bagian yang diedit, dimensi keseluruhan, dan objek yang perlu dapat dipilih sudah benar.

Untuk mengubah warna, bedakan fill, warna bagian dalam bentuk, dengan stroke, warna sepanjang garis luarnya. Satu warna yang terlihat dapat mencakup banyak objek. Seleksi dengan fill sama di editor bisa membantu, tetapi periksa seleksi sebelum mengubahnya; bagian lain mungkin berbagi warna tersebut. Panduan pengeditan warna SVG membahas gaya turunan dan warna yang tidak mau berubah.

Simpan file kerja utama yang dapat diedit ketika editor menggunakan format sendiri atau metadata tambahan. Opsi penyimpanan SVG Adobe mencakup pengaturan font, properti CSS, gambar raster, dan data pengeditan Illustrator. File yang terlihat benar setelah ekspor tetap bisa memiliki markup berbeda atau konten yang dirasterisasi. Bandingkan objek dan pengait yang diperlukan, bukan hanya gambarnya.

Edit kode SVG untuk perubahan kecil yang terkendali

Buka salinan SVG di VS Code atau editor teks biasa lainnya. Pertahankan namespace, nama elemen, dan tanda kutip. Buat satu perubahan dan render file sebelum perubahan berikutnya.

Coba ubah fill tanpa mengubah path

Simpan contoh ini sebagai triangle.svg dan buka di penampil yang mendukung SVG:

<svg xmlns="http://www.w3.org/2000/svg"
     width="48" height="48" viewBox="0 0 48 48">
  <path id="triangle" class="icon-shape" fill="#3b82f6"
        d="M24 8 L40 40 H8 Z" />
</svg>

1. Ganti #3b82f6 dengan #f97316 pada atribut fill path.
2. Simpan dan buka kembali atau muat ulang file.
3. Periksa apakah segitiga menjadi oranye dan konturnya tidak berubah. Data path d, id, dan class harus tetap sama dengan aslinya.

Jika warna tidak berubah, periksa atribut style, aturan class, warna turunan, atau stroke yang mungkin mengendalikan tampilannya. Ubah aturan warna yang bertanggung jawab, bukan mengganti semua kemunculan warna di seluruh file.

Catatan metode: Kami merender contoh ini sebelum dan sesudah perubahan fill dengan renderer SVG serta memeriksa piksel hasilnya. Segitiga berubah warna sementara data path, ID, dan class tetap sama. Contoh kecil ini tidak menguji impor atau ekspor SVG rumit di aplikasi desain.

Hapus margin kosong dengan viewBox

viewBox pada elemen akar memiliki empat angka: minimum x, minimum y, lebar, dan tinggi. Angka-angka itu menetapkan persegi panjang dalam ruang koordinat SVG yang dipetakan ke viewport tampilannya.

Dalam contoh, segitiga menempati x=8 sampai 40 dan y=8 sampai 40. Ubah viewBox="0 0 48 48" menjadi viewBox="8 8 32 32", tanpa mengubah data path. Simpan dan render kembali. Segitiga kini memenuhi lebih banyak area viewport 48 × 48 yang sama karena margin kosong sudah dihapus.

Perubahan itu mengubah pemetaan kanvas, bukan geometri path atau width dan height elemen akar. Untuk gambar nyata, sisakan ruang bagi stroke dan efek; kotak geometri yang terlalu rapat bisa memotongnya. Pilihan visual yang lebih aman sering kali menyesuaikan halaman atau artboard dengan gambar, lalu memeriksa salinan ekspor. Jika file diimpor dengan ukuran fisik yang salah, ikuti panduan dimensi SVG dan viewBox.

Jika gambar menghilang, terpotong, atau meregang, pulihkan viewBox asli dan periksa keempat nilai serta rasio aspek. Jangan “memperbaiki” masalah kanvas dengan memindahkan semua node.

Ketika SVG hasil tracing perlu dirapikan

Gambar raster menyimpan piksel pada kisi. Vektorisasi membangun kembali geometri dari piksel itu, sehingga hasil tracing dapat mengatur warna dan kontur secara berbeda dari desain asli.

Satu bagian yang terlihat bisa tersebar dalam path kecil. Satu warna juga dapat mencakup beberapa wilayah terpisah. Node padat, bintik kecil, bentuk latar belakang, dan kontur bertumpuk dapat memperlambat pengeditan sederhana. Periksa sifat-sifat tersebut daripada menilai file hanya dari ketajamannya pada satu tingkat zoom.

Struktur terpecah

Struktur lebih sederhana

Ilustrasi ini menjelaskan usaha pengeditan; bukan sampel konversi atau perbandingan produk yang diukur. Jika hasil tracing layak dipertahankan, perbaiki bagian bermasalah dan sederhanakan hanya jika kontur tetap akurat. Jika berasal dari raster dan perapiannya terlalu banyak, coba vektorkan ulang gambar asli. Pertahankan geometri vektor asli yang masih berguna daripada melakukan tracing pada tangkapan layarnya.

Seperti apa prosesnya dengan PerfectVector?

PerfectVector cocok ketika Anda perlu membuat path dari raster, seperti PNG atau JPEG asli maupun konten raster di dalam SVG. Gunakan metode editor umum di atas untuk gambar vektor yang sudah ada dan ingin dipertahankan.

Untuk konversi Anda sendiri, ikuti urutan ini:

1. Unggah sumber raster dan bandingkan pratinjau vektor. Cari detail hilang, wilayah tak diinginkan, dan kontur yang berbeda dari sumber.
2. Buka kunci hasil sebelum mengedit atau mengekspor. Konversi dan pratinjau gratis tanpa batas; kebijakan harga publik saat ini menyatakan satu kredit membuka setiap hasil unik, dan pengunduhan ulang hasil yang sudah dibuka gratis.
3. Periksa dan edit geometri yang sudah dibuka. Periksa bentuk serta node yang diperlukan, sesuaikan palet bila berguna, dan bandingkan hasil edit pada ukuran tujuan.
4. Ekspor dan periksa di aplikasi berikutnya. Buka kembali SVG, pilih bagian yang dimaksud, lalu periksa dimensi dan detail kecil. Pratinjau saja tidak membuktikan file siap untuk setiap editor, printer, atau mesin potong.

Huruf raster dibangun ulang sebagai geometri, jadi jangan mengharapkannya menjadi teks ketikan yang dapat diedit. Siapkan koreksi manual atau penggambaran ulang ketika huruf penting, kurva, atau celah kecil tidak bertahan dalam tracing.

Pertanyaan umum

Bagaimana mengedit SVG secara gratis? Gunakan Inkscape untuk pengeditan visual atau editor teks biasa untuk perubahan markup. Tool browser juga dapat menyediakan fitur gratis; periksa ketentuan ekspor saat ini dan dukungan terhadap fitur SVG yang dipakai file Anda.

Bisakah saya mengedit SVG di VS Code? Ya. Edit markup XML untuk perubahan fill kecil, dimensi, viewBox, atau ID dan class yang diperlukan. Simpan salinan dan render sesudahnya. Gunakan editor visual untuk mengubah bentuk kurva.

Mengapa saya tidak bisa memilih bentuk satu per satu dalam SVG? Periksa jenis objek. Bisa berupa grup, satu path dengan beberapa subpath, gambar yang di-clip, atau gambar tertanam. Masuk atau pisahkan grup yang sebenarnya; edit node path untuk geometri; vektorkan konten raster hanya jika perlu path.

Bisakah saya mengedit SVG di Canva? Alur SVG yang didokumentasikan Canva mencakup perubahan warna dan tata letak dasar. Periksa file yang diimpor dan ketentuan unduhan SVG saat ini. Gunakan editor vektor atau markup untuk perubahan kontur yang presisi maupun kendali ID dan class.

Bisakah saya mengedit hasil PerfectVector sebelum membuka kuncinya? Untuk konversi sendiri, bandingkan pratinjau dahulu, lalu buka kunci hasil sebelum memakai kontrol pengeditan dan ekspor. Periksa SVG hasil ekspor di aplikasi tempat file akan digunakan.

Sumber

1. W3C — Scalable Vector Graphics (SVG) 2 — model dokumen, bentuk, path, dan gaya SVG.
2. W3C — Konten Tertanam SVG — gambar raster dapat tetap tertanam dalam dokumen SVG.
3. W3C — Sistem koordinat, transformasi, dan satuan SVG — pemetaan viewBox dan perbedaan geometri dengan dimensi viewport.
4. Inkscape — Tentang — informasi resmi platform editor, format SVG, dan sumber terbuka.
5. Adobe — Cara menyimpan gambar di Illustrator — pengaturan ekspor SVG dan data pengeditan Illustrator yang dipertahankan.
6. Figma — Menyalin aset antartool desain — alur transfer SVG dan batas impor marker/pattern.
7. Canva — Editor SVG — alur warna, perubahan ukuran, dan tata letak dasar yang didokumentasikan.
8. PerfectVector — Kebijakan harga — ketentuan pratinjau, pembukaan hasil, dan unduhan ulang saat ini.

Pertahankan SVG yang berguna dan edit geometri yang sudah ada. Jika sumber Anda raster atau hasil tracing perlu diganti, coba gambar asli Anda di PerfectVector, bandingkan pratinjau dengan sumber, buka kunci sebelum mengedit, dan periksa bentuk serta dimensi hasil ekspor di aplikasi berikutnya.