PerfectVector
Oleh Claire Yoon9 menit baca

Cara Mengurangi Warna SVG Tanpa Merusak Gambar

Kurangi palet SVG berdasarkan peran visual, bukan angka sembarang. Gabungkan warna serupa sambil mempertahankan kontras, ruang negatif, lapisan potong, dan warna operasi.

Di halaman ini

Untuk mengurangi warna SVG dengan aman, kelompokkan berdasarkan perannya dalam gambar, lalu gabungkan warna hampir sama dalam setiap kelompok. Pertahankan warna yang membawa makna berbeda, seperti sorotan dan bayangan, depan dan latar, atau operasi potong dan gurat.

Kesalahan umum adalah memilih target seperti “empat warna” dan membiarkan alat pengelompokan menentukan semuanya. Itu dapat berguna sebagai tahap awal, tetapi palet akhir membutuhkan pemeriksaan visual serta produksi. Dua biru yang hampir identik mungkin aman digabung. Dua abu-abu yang sama miripnya mungkin satu-satunya kontras yang memisahkan mata dari wajah.

Tahap pengurangan palet yang aman
  • Simpan salinan tanpa perubahan.
  • Catat isian, stroke, gradien, dan opasitas.
  • Beri nama warna berdasarkan peran sebelum mengubah nilai heksadesimal.
  • Gabungkan warna serupa satu peran setiap kali.
  • Periksa kontras, lubang, dan detail kecil pada ukuran akhir.
  • Untuk file Cricut atau produksi, pastikan warna operasi serta lapisan tetap bermakna sama.

Mengubah warna dan mengurangi warna adalah pekerjaan berbeda

Mengubah warna mengganti satu nilai dengan nilai lain. Jika logo biru menjadi hijau tetapi tetap menggunakan jumlah isian sama, ukuran palet tidak berubah.

Pengurangan warna menggabungkan beberapa nilai menjadi lebih sedikit. Penelusuran mungkin memiliki #173f75, #184076, dan #194177 karena piksel antialiasing menjadi area terpisah. Memetakan ketiganya ke satu biru mengurangi palet dan, setelah pembersihan geometri, jumlah fragmen yang harus dikelola.

PekerjaanSebelumSesudah
Perubahan warnaTiga biruTiga hijau
Pengurangan paletTiga biru hampir identikSatu biru
Pengurangan lapisanBeberapa bentuk atau lapisan dengan peran samaSatu lapisan produksi jika geometri memungkinkan

Ketiganya dapat terjadi bersama, tetapi tidak saling menggantikan. Panduan mengubah warna SVG membahas penggantian warna langsung. Artikel ini berfokus menentukan warna yang dapat menjadi satu.

Setelah palet yang diinginkan selesai, alur pemisahan warna dengan artboard sama mengekspor satu file selaras per warna yang sama persis tanpa membatalkan keputusan palet tersebut.

Pertama, temukan warna yang benar-benar digunakan file

Buka SVG di editor vektor yang dapat mencantumkan warna dokumen atau memilih objek berdasarkan isian. Illustrator, misalnya, mendokumentasikan pemilihan objek dengan isian dan stroke sama. Untuk file sederhana, editor teks juga memperlihatkan nilai fill serta stroke eksplisit.

Hitung lebih dari kode heksadesimal:

  • Isian padat pada bentuk
  • Warna stroke pada kontur
  • Titik warna gradien
  • Opasitas yang membuat satu warna terlihat lebih terang di atas latar
  • Gaya dalam kelas, bukan langsung pada bentuk
  • Gambar raster tertanam, yang warna pikselnya bukan palet SVG

Sepuluh nilai heksadesimal tidak selalu berarti sepuluh warna terlihat. Nilai sama pada opasitas berbeda dapat terlihat berbeda. Gradien mungkin hanya memiliki dua titik warna tetapi merender banyak warna perantara. Raster <image> dapat memperlihatkan ribuan warna sementara SVG di sekitarnya memiliki satu isian. Spesifikasi pewarnaan SVG membedakan warna padat, gradien, pola, opasitas isian dan stroke, serta perilaku pewarnaan lainnya.

Jika file berisi wadah raster, bukan bentuk yang dapat diedit, pengurangan warna dilakukan sebelum atau selama penelusuran baru. Pemeriksaan SVG berpiksel menunjukkan apakah ada path nyata untuk diedit.

Beri nama warna berdasarkan peran

Sebelum mengubah nilai, buat peta palet kecil:

PeranWarna saat iniPertahankan terpisah?
Siluet utamaBiru navy gelap, hampir navyBiasanya digabung
SorotanBiru pucatPertahankan jika membentuk volume
KonturHitamPertahankan jika tepi disengaja
LatarPersegi panjang putihHapus jika transparansi diinginkan
Operasi potongMerahPertahankan terpisah dari gurat atau ukir

Ini mencegah kesamaan otomatis membuat keputusan keliru. Jarak warna berguna, tetapi konteks lebih penting. Sorotan kecil di samping bentuk gelap mungkin membutuhkan selisih numerik lebih kecil daripada dua area latar besar, tetapi memberi kontribusi lebih besar terhadap keterbacaan.

Petakan warna serupa ke tugasnya sebelum memilih yang dipertahankan. Tint latar, isian utama, kontur, dan aksen fokus mungkin secara numerik dekat dengan warna lain, tetapi masing-masing memiliki alasan berbeda untuk tetap terpisah.

Peta palet konseptual yang menghubungkan banyak warna hampir sama ke peran latar, isian utama, kontur, dan detail fokus, lalu memilih satu warna yang disengaja untuk setiap peran
Ilustrasi konseptual: kurangi warna serupa dalam satu peran, bukan lintas peran yang membawa makna visual atau produksi berbeda.

Untuk file potong, peran dapat bersifat literal. Dalam Cricut Design Space, SVG impor mempertahankan lapisan terpisah dan kontrol Operation menetapkan perilaku seperti Basic Cut, Draw, Score, dan Engrave pada lapisan pilihan. Dalam alur laser atau CNC lain, warna juga dapat digunakan untuk mengatur operasi. Jangan gabungkan lapisan yang menentukan operasi hanya karena warnanya terlihat mirip di layar.

Gabungkan warna serupa di editor vektor

Mulai dari pasangan dengan risiko paling kecil menuju yang paling terlihat.

  1. Duplikat file atau artboard.
  2. Pilih satu warna kandidat dengan Select Same Fill atau perintah setara editor.
  3. Ganti sementara dengan warna palet di dekatnya.
  4. Periksa fitur kecil, persilangan, dan ruang negatif pada ukuran pandang normal.
  5. Beralih antara salinan asli dan yang dikurangi.
  6. Pertahankan penggabungan hanya jika hierarki bentuk serta makna produksi tetap ada.
  7. Ulangi dengan pasangan berikutnya.

Setelah warna sama, bentuk berdekatan tidak otomatis menjadi satu path. Satukan hanya ketika seharusnya menjadi satu bentuk yang dapat diedit atau dipotong. Dua objek dapat berbagi isian sambil tetap terpisah untuk animasi, tata letak, atau pengeditan.

Di sini kualitas node serta fragmen juga penting. Jika satu biru visual terpecah menjadi ratusan serpihan, pemilihan berdasarkan isian membantu, tetapi file mungkin tetap sulit diedit. Penelusuran lebih bersih dapat lebih cepat daripada memperbaiki setiap fragmen.

Kemampuan dan batasan pengelompokan otomatis

Alat palet sering mengelompokkan warna berdasarkan jarak numerik. K-means dan metode serupa dapat mengubah daftar panjang nilai berdekatan menjadi sejumlah warna representatif pilihan. Itu berguna untuk ilustrasi dari sumber raster dengan noise.

Pengelompokan otomatis tidak mengetahui:

  • fitur mana berupa wajah, huruf, lubang, atau kontur;
  • warna mana menunjukkan operasi mesin;
  • apakah aksen kecil membawa makna merek;
  • apakah transparansi di atas latar menghasilkan warna yang terlihat;
  • apakah dua bentuk harus tetap dapat diedit sendiri.

Gunakan hasil sebagai draf. Bandingkan pada ukuran keluaran akhir, bukan hanya saat diperbesar. Penggabungan yang terlihat aman pada 800% dapat menghapus mata kecil atau ruang dalam huruf pada ukuran stiker.

Kapan merasterkan dan menelusuri ulang masuk akal

Mengekspor SVG ke PNG, mengurangi palet raster, lalu menelusurinya lagi merupakan reset yang membuang struktur. Proses ini meratakan grup, nama, simbol yang dapat digunakan ulang, struktur teks, dan path yang ditempatkan teliti menjadi piksel sebelum membangunnya ulang.

Gunakan hanya ketika struktur SVG saat ini sudah tidak dapat digunakan dan tidak ada sumber lebih bersih. Cara ini dapat membantu hasil penelusuran otomatis yang terpecah buruk dan satu-satunya sifat bergunanya hanya tampilan. Simpan SVG saat ini sebagai acuan, ekspor raster besar dengan transparansi, kurangi warna secara sengaja, lalu telusuri ulang dan periksa path baru.

Jangan merasterkan SVG bersih teratur hanya untuk mengubah empat isian. Pengeditan vektor langsung mempertahankan jauh lebih banyak informasi.

Periksa file dengan warna dikurangi

Lakukan pemeriksaan berikut sebelum menimpa file apa pun:

  • Lihat pada latar terang dan gelap.
  • Periksa siluet serta ruang negatif.
  • Pastikan kontur tidak menghilang dalam isian.
  • Periksa gradien dan opasitas terpisah dari warna padat.
  • Hitung lapisan Cricut atau operasi produksi akhir.
  • Lihat teks kecil dan ikon pada ukuran keluaran nyata.
  • Buka SVG ekspor baru di penampil lain.

Jika file untuk Cricut, alur SVG berlapis menjelaskan pemetaan warna ke bahan serta penyusunan. Panduan sisa potongan sulit dibuang membahas masalah geometri yang tidak dapat diselesaikan hanya dengan mengurangi warna.

Peran PerfectVector

PerfectVector tidak mengedit SVG yang sudah ada. Alat ini membantu ketika ledakan jumlah warna dimulai dari raster. Alur SVG untuk Cricut mengonversi sumber menjadi path yang dapat diedit dan memungkinkan pemeriksaan serta penyesuaian area warna hasil penelusuran sebelum unduhan.

Gunakan ketika PNG atau JPG menghasilkan puluhan warna serupa dan lapisan terpecah di konverter lain. Mulai dari raster paling bersih, hapus bayangan atau variasi latar tidak perlu, lalu bandingkan pratinjau vektor. Gabungkan warna sesuai lapisan bahan yang benar-benar akan dipotong.

Tujuan tidak selalu warna paling sedikit. Tujuannya palet terkecil yang masih menyampaikan desain dan rencana produksi.

FAQ

Bagaimana mengurangi jumlah warna dalam SVG? Catat isian, stroke, gradien, dan opasitas file, kelompokkan berdasarkan peran visual atau produksi, lalu gabungkan warna hampir sama satu pasangan setiap kali. Gunakan pemilihan berdasarkan isian di editor vektor dan bandingkan dengan salinan tanpa perubahan setelah setiap penggabungan.

Apakah mengubah dua isian ke nilai heksadesimal sama menggabungkan lapisan SVG? Belum tentu. Bentuk kini berbagi warna tetapi tetap objek terpisah sampai geometri disatukan atau digabung. Mempertahankannya terpisah dapat berguna untuk pengeditan, animasi, atau tata letak meskipun dipotong dari bahan sama.

Bisakah SVG otomatis dibatasi menjadi empat warna? Alat pengelompokan palet dapat menghasilkan draf empat warna, tetapi tidak memahami detail berdasarkan makna atau operasi produksi. Tinjau fitur kecil, kontras, lubang, gradien, dan makna lapisan sebelum menggunakan hasil.

Mengapa penelusuran gambar empat warna menghasilkan puluhan warna? Raster mungkin memiliki antialiasing, bayangan, variasi kompresi, atau tepi lembut. Penelusur memperlakukan perbedaan piksel sebagai area terpisah. Bersihkan raster secara selektif atau gabungkan warna serupa pada hasil vektor.

Apakah warna SVG sebaiknya dikurangi sebelum diunggah ke Cricut? Biasanya ya ketika beberapa warna merupakan variasi hampir sama yang tidak disengaja. Rencanakan satu warna bermakna per bahan atau lapisan, pertahankan bagian yang harus dipotong terpisah, dan periksa jumlah lapisan setelah impor. Lapisan sengaja yang lebih sedikit lebih mudah dipotong serta disusun daripada penelusuran penuh variasi warna kecil.

Sources

  1. W3C — Pewarnaan SVG 2 — Mendefinisikan isian, stroke, gradien, pola, dan opasitas pewarnaan.
  2. Adobe Illustrator — Memilih objek dengan isian dan stroke sama — Mendokumentasikan alur praktis pemilihan berdasarkan tampilan.
  3. Cricut — Mengunggah gambar ke Design Space — Menjelaskan bagaimana lapisan SVG dipertahankan saat unggahan.
  4. Cricut — Memilih Operation — Mendefinisikan operasi mesin yang ditetapkan pada lapisan Design Space.

Jika masalah palet dimulai dari raster, siapkan untuk Cricut dan periksa warna hasil penelusuran. Simpan asli di samping pratinjau dan setujui setiap penggabungan berdasarkan bahan akhir, bukan hanya layar.

Lebih banyak dari blog

Mulai dengan SVG yang lebih rapi
dan lebih mudah diedit