PerfectVector
Oleh Claire Yoon9 menit baca

Cara Memisahkan Warna SVG Menjadi File Individual

Pisahkan SVG multicolor menjadi satu file sejajar per warna persis, pertahankan viewBox dan ukuran, serta hindari pergeseran layer, gradien, teks, dan masalah file potong.

Di halaman ini

Untuk memisahkan warna SVG menjadi file individual, kelompokkan bentuk berdasarkan warna isian yang persis sama dan ekspor setiap grup pada artboard ukuran penuh yang sama dengan aslinya. Jangan memangkas setiap warna mengikuti batasnya sendiri. Ruang kosong itulah yang menjaga potongan tetap sejajar saat Anda mengimpor, memotong, menyablon, atau merakitnya kembali.

Untuk SVG berisian solid yang didukung, SVG Color Separator gratis dari PerfectVector melakukan ini secara lokal di browser Anda. Untuk karya kompleks, Anda dapat memilih objek berdasarkan isian dalam editor vektor dan mengekspor setiap warna secara manual.

Aturan pemisahan yang aman
  • Buat salinan sumber SVG yang tidak diubah.
  • Tentukan apakah warna yang hampir sama perlu digabungkan sebelum pemisahan.
  • Kelompokkan berdasarkan warna isian yang persis sama; jangan perlakukan gradien, pola, atau gambar sebagai warna sederhana.
  • Pertahankan lebar, tinggi, dan viewBox asli pada setiap keluaran.
  • Pertahankan posisi asli setiap bentuk dan urutan pewarnaan untuk warna yang sama.
  • Impor semua file bersama-sama dan verifikasi ukuran serta kesejajarannya sebelum memotong bahan.

Mengapa setiap file warna harus mempertahankan artboard penuh

Bayangkan bunga dengan kelopak biru di dekat kiri atas dan kelopak merah di dekat kanan bawah. Jika kedua file dipangkas rapat, setiap kelopak berpindah ke sudut kiri atas dokumen barunya. Kedua SVG tidak lagi berbagi sistem koordinat, sehingga perakitan kembali menjadi pekerjaan menebak.

Ketika setiap file mempertahankan artboard asli, setiap warna tetap pada koordinat tempatnya berada. File khusus biru mungkin berisi banyak kanvas kosong. Itu merupakan data kesejajaran yang disengaja, bukan pemborosan.

Konsep kanvas bersama
Bunga multicolor konseptual yang dipisahkan menjadi artboard transparan berukuran sama, satu untuk setiap warna persis, dengan sudut registrasi bersama
Setiap warna mempertahankan kanvas dan koordinat asli. Memangkas layer dengan rapat akan membuang acuan kesejajaran bersama.

viewBox SVG menentukan ruang koordinat internal. Pertahankan bersama lebar dan tinggi fisik yang andal ketika mesin potong, printer, atau mitra produksi Anda membutuhkan dimensi nyata.

Warna persis berbeda dari warna yang tampak sama

SVG dapat berisi #ff0000 dan #fe0000. Keduanya terlihat hampir identik, tetapi merupakan dua nilai persis berbeda dan akan menghasilkan dua file dalam alur warna persis. Ini lebih aman daripada diam-diam menebak bahwa desainer menginginkannya sebagai satu warna produksi.

Sebelum memisahkan, periksa paletnya:

SituasiYang perlu dilakukan
Dua nilai hampir sama tidak sengaja muncul dari trace penuh noiseGabungkan secara sengaja, lalu pisahkan
Warna serupa mewakili highlight dan bayanganPertahankan terpisah
Warna mewakili operasi cut, score, atau cetak berbedaPertahankan terpisah dan beri label pada file
Karya memakai gradienRatakan secara sengaja, ganti dengan warna solid terpilih, atau pertahankan alur asli
SVG berisi gambar rasterPisahkan gambar sumber sebelum vektorisasi, atau bangun ulang sebagai path

Alur pengurangan palet menjelaskan cara menggabungkan warna yang berdekatan berdasarkan peran visual dan produksi. Tentukan hal itu terlebih dahulu. Alat pemisah tidak seharusnya memutuskan untuk Anda.

Metode 1: gunakan pemisah browser gratis

SVG Color Separator menerima subset SVG yang sengaja dibatasi agar bisa mempertahankan file, bukan mengembalikan layer yang tampak masuk akal tetapi salah.

1. Pilih SVG

Pilih SVG hingga 5 MiB. Dokumen diperiksa di dalam worker browser sementara sebelum pratinjau atau unduhan aman dibuat. Konten SVG, nama file, path, warna, pratinjau, dan file yang dihasilkan tidak dikirim ke PerfectVector.

Versi saat ini dirancang untuk karya vektor dengan isian solid opak: path, persegi panjang, lingkaran, elips, polygon, dan polyline yang didukung dengan transformasi umum. Alat ini menangani isian solid inline dan inherited yang didukung.

2. Tinjau kompatibilitas dan ukuran

Periksa komposit yang diterima, dimensi fisik, viewBox, jumlah path, palet warna persis, dan peringatan. Jika file memiliki viewBox tetapi tidak memiliki lebar serta tinggi fisik yang andal, pastikan satu dimensi; dimensi lainnya tetap proporsional.

Pemrosesan berhenti alih-alih membuang konten yang tidak didukung. Kondisi penghentian saat ini mencakup stroke yang terlihat, gradien, pola, filter, clipping path, mask, teks yang bisa diedit, gambar tersemat, referensi yang dapat digunakan ulang, SVG bersarang, sumber daya eksternal, stylesheet atau class, script, event handler, dan warna potong transparan.

Batasan tersebut mengikuti model SVG itu sendiri. Spesifikasi painting SVG 2 membedakan warna solid dari gradien, pola, opasitas isian, dan perilaku stroke. “Warna” yang terlihat tidak selalu merupakan satu nilai datar yang dapat dipindahkan dengan aman ke suatu file.

3. Periksa pratinjau setiap warna persis

Alat membuat satu pratinjau per warna opak yang persis sama. Verifikasi bahwa:

  • bentuk yang diharapkan muncul dalam file warna yang benar;
  • tidak ada konten stroke, teks, atau gambar yang dimaksud hilang;
  • dimensi komposit sesuai dengan sumber;
  • setiap layer tetap pada posisi aslinya;
  • palet berisi jumlah warna produksi yang Anda maksud.

SVG satu warna tetap valid; file itu sudah terpisah. File dengan dua hingga 24 warna persis menerima tampilan layer normal. Jumlah lebih tinggi yang didukung tetap dapat diproses hingga batas keamanan, tetapi puluhan warna biasanya menandakan bahwa perapian palet sebaiknya dilakukan terlebih dahulu. Lebih dari 256 warna persis ditolak.

4. Unduh file

Unduh file warna yang diperlukan satu per satu atau gunakan arsip lokal. Setiap keluaran mempertahankan lebar, tinggi, viewBox, dan sistem koordinat yang sama. Nama file dan urutan layer bersifat deterministik, sehingga penyerahan dapat diulang secara konsisten.

Tidak diperlukan pendaftaran atau kredit untuk pemisah maupun unduhan layer-nya. Ini terpisah dari alur unduhan raster ke vektor berbayar PerfectVector.

Metode 2: pisahkan warna dalam editor vektor

Gunakan Illustrator, Inkscape, Affinity, atau editor vektor lain ketika SVG memerlukan perbaikan sebelum dapat dipisahkan.

  1. Buka salinan dan catat lebar, tinggi, serta viewBox atau artboard dokumen.
  2. Ubah teks yang bisa diedit menjadi kontur jika tujuan membutuhkan bentuk.
  3. Expand atau ganti secara sengaja stroke, gradien, pola, mask, dan struktur clipping yang tidak didukung.
  4. Pilih satu bentuk perwakilan, lalu gunakan perintah Select Same Fill Color dalam editor.
  5. Salin bentuk terpilih ke artboard duplikat dengan dimensi dan titik asal yang sama.
  6. Hapus atau sembunyikan warna lainnya tanpa memindahkan bentuk terpilih.
  7. Ekspor file warna sebagai SVG dan ulangi.
  8. Impor ulang setiap file bersama-sama untuk memverifikasi bahwa semuanya bertumpuk secara persis.

Jangan membuat dokumen baru yang pas rapat untuk setiap seleksi. Duplikasikan artboard asli atau gunakan pengaturan ekspor yang mempertahankan batasnya.

Pengeditan manual juga memungkinkan penggabungan bentuk berwarna sama ketika membantu produksi. Jangan menyatukannya otomatis jika lubang, tumpang tindih, urutan pewarnaan sumber, atau pengeditan berikutnya bergantung pada objek terpisah.

Siapkan file untuk Cricut

Panduan unggah gambar Cricut saat ini menyatakan bahwa SVG berlayer diunggah sesuai desain dan muncul sebagai gambar bergrup yang layer-nya bisa dipindahkan serta diubah ukurannya secara terpisah setelah ungrouping. Panduan itu juga mendokumentasikan batas SVG 5,000 path.

Sebelum memotong:

  1. Unggah semua file yang dipisahkan.
  2. Tambahkan ke Canvas yang sama tanpa mengubah dimensi.
  3. Pastikan setiap file melaporkan lebar dan tinggi yang sama.
  4. Gunakan kontrol posisi atau metode registrasi bersama jika alur membutuhkan penumpukan presisi.
  5. Tetapkan operasi dan warna bahan yang benar untuk setiap layer.
  6. Jalankan uji kecil dengan bahan murah.

Panduan item tidak didukung Cricut secara khusus menyebut isian pola, gradien, clipping path, teks yang bisa diedit, gambar tertaut, dan gambar tersemat yang tidak didukung sebagai masalah untuk unggahan vektor berlayer. Ubah teks menjadi bentuk dan sederhanakan fitur tersebut secara sengaja sebelum ekspor.

Untuk pemeriksaan lebih luas, ikuti cara memeriksa SVG sebelum pemotongan. Jika file terpisah diimpor pada ukuran tak terduga, gunakan diagnosis ukuran SVG yang salah sebelum mengubah ukuran layer satu per satu.

Kesalahan pemisahan yang umum

Layer tidak lagi sejajar

Setiap warna mungkin dipangkas mengikuti batasnya sendiri atau ditempelkan ke dokumen dengan titik asal berbeda. Ekspor ulang dengan artboard, lebar, tinggi, dan viewBox asli.

Satu “warna” menjadi beberapa file

SVG berisi nilai yang hampir sama. Tentukan nilai mana yang memiliki peran sama, gabungkan secara sengaja, lalu jalankan pemisahan ulang.

Gradien hilang atau ditolak

Gradien adalah paint server, bukan satu isian solid persis. Ganti dengan area solid yang disengaja, pertahankan alur gradien asli, atau gunakan metode produksi raster ketika ketepatan gradasi warna penting.

Teks atau stroke hilang

Teks yang bisa diedit dan stroke yang terlihat memiliki struktur berbeda dari path kontur berisi. Ubah menjadi bentuk dalam editor vektor hanya ketika sesuai dengan persyaratan tujuan.

Cricut menolak file

Periksa fitur tidak didukung dan jumlah path terlebih dahulu. File bisa valid sebagai SVG tetapi tetap berada di luar subset yang diterima Design Space.

FAQ

Bisakah SVG berisi banyak warna? Ya. Bentuk SVG dapat menggunakan isian dan stroke berbeda, dan SVG juga mendukung gradien, pola, opasitas, serta pewarnaan yang dirujuk. Pemisahan warna persis paling sederhana untuk isian solid opak.

Mengapa file yang dipisahkan memiliki begitu banyak ruang kosong? Ruang kosong mempertahankan artboard dan koordinat asli. Ini memungkinkan setiap warna tetap sejajar ketika file diimpor atau dirakit kembali.

Apakah warna SVG yang mirip akan digabungkan otomatis? Tidak. Pemisah PerfectVector hanya mengelompokkan warna yang persis sama. Gabungkan nilai yang hampir sama secara sengaja sebelum pemisahan jika seharusnya menjadi satu warna produksi.

Bisakah saya memisahkan gradien menjadi file warna? Tidak sebagai layer warna solid persis tanpa mengubah karya. Ganti gradien dengan area solid terpilih, pertahankan alur gradien asli, atau gunakan keluaran raster ketika detail gradasi warna halus penting.

Apakah SVG Color Separator gratis? Ya. SVG yang didukung diperiksa, ditampilkan dalam pratinjau, dipisahkan, dan diunduh secara lokal tanpa akun atau kredit. Aset halaman statis dimuat seperti biasa, tetapi data dokumen tetap di browser.

Sources

  1. PerfectVector — SVG Color Separator — Ketentuan pemrosesan lokal, warna persis, kesejajaran, kompatibilitas, dan unduhan saat ini.
  2. W3C — SVG 2 painting — Mendefinisikan isian, stroke, pewarnaan solid, gradien, pola, opasitas, dan pewarnaan yang dirujuk.
  3. Cricut — How to upload images into Design Space — Perilaku impor SVG berlayer dan batas path saat ini.
  4. Cricut — Image uploads: unsupported items — Keterbatasan gradien, pola, clip, teks, dan gambar saat ini untuk unggahan vektor berlayer.

Siap menjaga setiap warna tetap sejajar? Buka SVG Color Separator gratis, tinjau pratinjau warna persis dan dimensi, lalu unduh hanya setelah artboard bersama lolos pemeriksaan Anda.

Lebih banyak dari blog

Pisahkan SVG menjadi file warna dengan posisi yang tetap selaras