PerfectVector
Bởi Claire Yoon12 phút đọc

Cách giảm màu trong SVG mà không làm hỏng hình

Giảm bảng màu SVG theo vai trò trực quan, không theo con số tùy ý. Gộp màu gần nhau mà vẫn giữ tương phản, khoảng trống, lớp cắt và màu chỉ thao tác.

Trên trang này

Để giảm màu trong SVG an toàn, nhóm màu theo chức năng của chúng trong hình, rồi gộp các màu gần trùng trong từng nhóm. Giữ riêng những màu mang ý nghĩa khác nhau, chẳng hạn vùng sáng và vùng tối, tiền cảnh và hậu cảnh, hoặc thao tác cắt và rạch nét (score).

Sai lầm thường gặp là chọn mục tiêu như “bốn màu” rồi để công cụ phân cụm quyết định mọi thứ. Cách đó có thể hữu ích ở lượt đầu, nhưng bảng màu cuối cần được kiểm tra về hình ảnh và sản xuất. Hai màu xanh lam gần như giống nhau có thể gộp an toàn. Hai màu xám tương tự có thể lại là độ tương phản duy nhất tách mắt khỏi khuôn mặt.

Một lượt giảm bảng màu an toàn
  • Lưu bản sao nguyên trạng.
  • Kiểm kê màu tô, nét viền, chuyển sắc và độ không trong suốt (opacity).
  • Đặt tên màu theo vai trò trước khi đổi mã hex.
  • Gộp các màu gần nhau theo từng vai trò.
  • Kiểm tra tương phản, lỗ và chi tiết nhỏ ở kích thước cuối.
  • Với tệp Cricut hoặc tệp sản xuất, xác nhận màu chỉ thao tác và các lớp vẫn mang cùng ý nghĩa.

Đổi màu và giảm màu là hai việc khác nhau

Đổi màu thay một giá trị bằng giá trị khác. Nếu logo xanh lam chuyển thành xanh lá nhưng vẫn dùng cùng số màu tô, kích thước bảng màu chưa thay đổi.

Giảm màu gộp nhiều giá trị thành ít giá trị hơn. Kết quả đồ lại có thể chứa #173f75, #184076 và #194177 vì các pixel khử răng cưa trở thành những vùng riêng. Ánh xạ cả ba sang một màu xanh lam làm giảm bảng màu và, sau khi dọn hình học, giảm số mảnh bạn cần quản lý.

Công việcTrướcSau
Đổi màuBa màu xanh lamBa màu xanh lá
Giảm bảng màuBa màu xanh lam gần như giống nhauMột màu xanh lam
Giảm lớpNhiều hình hoặc lớp cùng vai tròMột lớp sản xuất nếu hình học cho phép

Các việc này có thể diễn ra cùng nhau nhưng không thay thế cho nhau. Hướng dẫn đổi màu SVG đề cập thay màu trực tiếp. Bài này tập trung vào quyết định màu nào có thể gộp làm một.

Khi bảng màu mong muốn đã hoàn tất, quy trình tách màu trên cùng vùng vẽ xuất một tệp thẳng hàng cho mỗi màu chính xác mà không đảo ngược những quyết định về bảng màu đó.

Trước tiên, tìm màu tệp thực sự sử dụng

Mở SVG trong trình chỉnh sửa vector có thể liệt kê màu tài liệu hoặc chọn đối tượng theo màu tô. Chẳng hạn, Illustrator có tài liệu về chọn đối tượng có cùng màu tô và nét viền. Với tệp đơn giản, trình chỉnh sửa văn bản cũng cho thấy các giá trị fill và stroke được khai báo rõ.

Đừng chỉ đếm mã hex:

  • Màu tô đặc trên các hình
  • Màu nét viền trên đường viền
  • Các điểm dừng chuyển sắc
  • Độ không trong suốt (opacity) làm một màu trông nhạt hơn trên nền
  • Kiểu được lưu trong lớp CSS thay vì trực tiếp trên hình
  • Ảnh raster nhúng, có màu pixel không thuộc bảng màu SVG

Mười mã hex được liệt kê không phải lúc nào cũng là mười màu nhìn thấy. Cùng mã hex ở độ không trong suốt (opacity) khác nhau có thể trông khác nhau. Chuyển sắc có thể chỉ có hai điểm dừng nhưng kết xuất nhiều sắc độ trung gian. Raster <image> có thể hiển thị hàng nghìn màu trong khi SVG xung quanh có một màu tô. Đặc tả tô vẽ SVG phân biệt màu đặc, chuyển sắc, mẫu, độ không trong suốt (opacity) của tô màu và nét viền, cùng các cách tô vẽ khác.

Nếu tệp chỉ bọc raster thay vì chứa hình chỉnh sửa được, nên giảm màu trước hoặc trong lúc đồ lại mới. Kiểm tra SVG vỡ hạt giúp biết có đường dẫn thật để chỉnh hay không.

Đặt tên màu theo vai trò

Trước khi đổi giá trị, lập một bảng màu nhỏ:

Vai tròMàu hiện tạiGiữ riêng?
Hình bóng chínhXanh navy đậm, gần xanh navyThường nên gộp
Vùng sángXanh lam nhạtGiữ nếu giúp xác định hình khối
Đường viềnĐenGiữ nếu mép là chủ đích
NềnHình chữ nhật trắngXóa nếu cần nền trong suốt
Thao tác cắtĐỏGiữ riêng với rạch nét (score) hoặc khắc

Cách này ngăn tính tương đồng tự động đưa ra quyết định sai. Khoảng cách màu hữu ích, nhưng ngữ cảnh quan trọng hơn. Vùng sáng nhỏ cạnh hình tối có thể cần độ chênh số học thấp hơn hai vùng nền lớn, nhưng đóng góp nhiều hơn cho khả năng nhận diện.

Gắn màu gần nhau với chức năng trước khi chọn màu giữ lại. Sắc nền, màu tô chính, đường viền và màu nhấn trọng tâm có thể gần các ô màu khác về số học, nhưng mỗi màu có lý do riêng để giữ khác biệt.

Bảng màu minh họa nối nhiều ô màu gần trùng với vai trò nền, màu tô chính, đường viền và chi tiết trọng tâm, rồi chủ động chọn một màu cho mỗi vai trò
Minh họa: giảm các màu gần nhau trong cùng vai trò, không gộp xuyên các vai trò mang ý nghĩa hình ảnh hoặc sản xuất khác nhau.

Với tệp cắt, vai trò có thể là chức năng thực tế. Trong Cricut Design Space, SVG nhập vào giữ các lớp riêng và điều khiển Operation gán thao tác như Basic Cut, Draw, Score và Engrave cho lớp đã chọn. Trong các quy trình laser hoặc CNC khác, màu cũng có thể được dùng để tổ chức thao tác. Đừng gộp các lớp mang thao tác chỉ vì màu trông gần nhau trên màn hình.

Gộp màu gần nhau trong trình chỉnh sửa vector

Bắt đầu từ cặp ít rủi ro nhất đến cặp dễ nhận thấy nhất.

  1. Nhân đôi tệp hoặc vùng vẽ.
  2. Chọn một màu ứng viên bằng Select Same Fill hoặc chức năng tương đương.
  3. Tạm thay nó bằng màu lân cận trong bảng màu.
  4. Kiểm tra chi tiết nhỏ, chỗ giao nhau và khoảng trống ở kích thước xem thông thường.
  5. Chuyển qua lại giữa bản gốc và bản giảm màu.
  6. Chỉ giữ việc gộp nếu thứ bậc hình và ý nghĩa sản xuất vẫn còn.
  7. Lặp lại với cặp kế tiếp.

Sau khi màu khớp, các hình kề nhau không tự động trở thành một đường dẫn. Chỉ hợp nhất khi chúng cần là một hình chỉnh sửa hoặc cắt duy nhất. Hai đối tượng có thể cùng màu tô nhưng vẫn giữ riêng cho hoạt họa, bố cục hoặc chỉnh sửa.

Đây cũng là lúc chất lượng nút và mảnh hình quan trọng. Nếu một màu xanh lam nhìn thấy bị chia thành hàng trăm mảnh mỏng, chọn theo màu tô có ích, nhưng tệp vẫn có thể khó chỉnh. Đồ lại sạch hơn có thể nhanh hơn sửa từng mảnh.

Phân cụm tự động làm được và không làm được gì?

Công cụ bảng màu thường phân cụm màu theo khoảng cách số học. K-means và các phương pháp tương tự có thể biến danh sách dài các giá trị gần nhau thành số màu đại diện đã chọn. Điều đó hữu ích cho minh họa tạo từ raster nhiều nhiễu.

Phân cụm tự động không biết:

  • chi tiết nào là mặt, chữ, lỗ hoặc đường viền;
  • màu nào chỉ thao tác máy;
  • màu nhấn nhỏ có mang ý nghĩa thương hiệu không;
  • độ trong trên nền có tạo ra màu nhìn thấy không;
  • hai hình có phải giữ khả năng chỉnh sửa độc lập không.

Dùng kết quả như bản nháp. So sánh ở kích thước đầu ra cuối cùng, không chỉ khi phóng lớn. Việc gộp tưởng vô hại ở 800% có thể xóa mắt nhỏ hoặc khoảng rỗng trong chữ ở kích thước nhãn dán.

Khi nào raster hóa rồi đồ lại là hợp lý?

Xuất SVG thành PNG, giảm bảng màu raster rồi đồ lại là cách làm lại từ đầu có mất thông tin. Nó gộp nhóm, tên, ký hiệu tái sử dụng, cấu trúc chữ và đường dẫn được đặt cẩn thận thành pixel trước khi dựng lại.

Chỉ dùng cách này khi cấu trúc SVG hiện tại đã không dùng được và không có nguồn sạch hơn. Nó có thể giúp với kết quả đồ lại tự động bị phân mảnh nặng mà giá trị duy nhất còn lại là hình thức. Giữ SVG hiện tại để tham chiếu, xuất raster lớn có nền trong suốt, chủ động giảm màu rồi đồ lại và kiểm tra đường dẫn mới.

Đừng raster hóa SVG sạch, có tổ chức chỉ để đổi bốn màu tô. Chỉnh vector trực tiếp giữ được nhiều thông tin hơn rất nhiều.

Xác minh tệp đã giảm màu

Thực hiện các kiểm tra sau trước khi ghi đè bất cứ tệp nào:

  • Xem trên cả nền sáng và tối.
  • Kiểm tra hình bóng và khoảng trống.
  • Xác nhận đường viền không hòa mất vào màu tô.
  • Kiểm tra chuyển sắc và độ không trong suốt (opacity) riêng với màu đặc.
  • Đếm số lớp Cricut hoặc thao tác sản xuất cuối cùng.
  • Xem chữ nhỏ và biểu tượng ở kích thước đầu ra thực tế.
  • Mở mới SVG đã xuất trong trình xem khác.

Nếu tệp dùng cho Cricut, quy trình SVG nhiều lớp giải thích cách màu tương ứng với vật liệu và lắp ghép. Hướng dẫn xử lý khó bóc phần thừa đề cập các vấn đề hình học mà giảm màu đơn thuần không giải quyết được.

PerfectVector phù hợp ở đâu?

PerfectVector không chỉnh SVG có sẵn. Công cụ hữu ích khi số màu tăng quá nhiều bắt đầu từ ảnh raster. Quy trình SVG cho Cricut chuyển ảnh nguồn thành đường dẫn chỉnh sửa được và cho phép kiểm tra, điều chỉnh các vùng màu đã đồ lại trước khi tải xuống.

Dùng cách này khi PNG hoặc JPG tạo hàng chục màu gần nhau và lớp phân mảnh trong công cụ chuyển đổi khác. Bắt đầu từ raster sạch nhất bạn có, xóa bóng hoặc biến thiên nền không mong muốn, rồi so sánh bản xem trước vector. Gộp màu theo các lớp vật liệu bạn thực sự định cắt.

Mục tiêu không phải lúc nào cũng là ít màu nhất có thể. Đó là bảng màu nhỏ nhất vẫn thể hiện được thiết kế và kế hoạch sản xuất.

Câu hỏi thường gặp

Làm sao giảm số màu trong SVG? Liệt kê màu tô, nét viền, chuyển sắc và độ không trong suốt (opacity) của tệp, nhóm theo vai trò trực quan hoặc sản xuất rồi gộp từng cặp gần trùng. Dùng chọn theo màu tô trong trình chỉnh sửa vector và so sánh với bản nguyên trạng sau mỗi lần gộp.

Đổi hai màu tô thành cùng mã hex có gộp lớp SVG không? Không nhất thiết. Các hình giờ có cùng màu nhưng vẫn là đối tượng riêng cho đến khi bạn hợp nhất hoặc kết hợp hình học. Giữ riêng có thể hữu ích cho chỉnh sửa, hoạt họa hoặc bố cục ngay cả khi chúng được cắt từ cùng vật liệu.

Có thể tự động giới hạn SVG còn bốn màu không? Công cụ phân cụm bảng màu có thể tạo bản nháp bốn màu, nhưng không hiểu chi tiết ngữ nghĩa hoặc thao tác sản xuất. Kiểm tra chi tiết nhỏ, tương phản, lỗ, chuyển sắc và ý nghĩa lớp trước khi dùng kết quả.

Vì sao đồ lại ảnh bốn màu lại tạo hàng chục màu? Raster có lẽ chứa khử răng cưa, bóng, biến thiên do nén hoặc mép mềm. Công cụ đồ lại coi các khác biệt pixel đó là vùng riêng. Làm sạch raster có chọn lọc hoặc gộp màu gần nhau trong kết quả vector.

Có nên giảm màu SVG trước khi tải lên Cricut không? Thường có nếu nhiều màu là các màu gần trùng ngoài ý muốn. Lập kế hoạch một màu có ý nghĩa cho mỗi vật liệu hoặc lớp, giữ mọi phần cần cắt riêng và xác minh số lớp sau khi nhập. Ít lớp có chủ đích dễ cắt và lắp ghép hơn kết quả đồ lại đầy biến thiên màu nhỏ.

Nguồn tham khảo

  1. W3C — Tô vẽ SVG 2 — định nghĩa tô màu, nét viền, chuyển sắc, mẫu và độ không trong suốt (opacity) tô vẽ.
  2. Adobe Illustrator — Chọn đối tượng có cùng màu tô và nét viền — mô tả quy trình chọn theo kiểu hiển thị thực tế.
  3. Cricut — Tải ảnh lên Design Space — giải thích cách các lớp SVG được giữ khi tải lên.
  4. Cricut — Chọn Operation — định nghĩa các thao tác máy được gán cho lớp Design Space.

Nếu vấn đề bảng màu bắt đầu từ ảnh raster, hãy chuẩn bị cho Cricut và kiểm tra các màu được đồ lại. Đặt bản gốc cạnh bản xem trước và duyệt từng lần gộp dựa trên vật liệu thành phẩm, không chỉ màn hình.

Thêm từ blog

Bắt đầu với SVG gọn sạch hơn
và dễ chỉnh sửa hơn