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

Cách tách màu SVG thành từng tệp riêng

Tách SVG nhiều màu thành một tệp giữ đúng vị trí cho từng màu chính xác, giữ viewBox và kích thước, đồng thời tránh lệch layer cùng vấn đề chuyển sắc, chữ và tệp cắt.

Trên trang này

Để tách màu SVG thành tệp riêng, nhóm hình theo giá trị màu tô chính xác và xuất từng nhóm trên cùng artboard đầy đủ kích thước với bản gốc. Đừng cắt mỗi màu sát giới hạn riêng. Khoảng trống giúp các mảnh giữ căn chỉnh khi bạn nhập, cắt, in lụa hoặc ráp lại.

Với SVG tô màu đặc được hỗ trợ, Công cụ tách màu SVG miễn phí của PerfectVector làm việc này cục bộ trong trình duyệt. Với đồ họa phức tạp, bạn có thể chọn đối tượng theo màu tô trong trình chỉnh sửa vector và xuất từng màu thủ công.

Quy tắc tách màu an toàn
  • Tạo bản sao SVG nguồn chưa chỉnh.
  • Quyết định có gộp màu gần trùng hay không trước khi tách.
  • Nhóm theo màu tô chính xác; đừng coi chuyển sắc, họa tiết hoặc ảnh là màu đơn giản.
  • Giữ chiều rộng, chiều cao và viewBox gốc trong mọi đầu ra.
  • Giữ vị trí gốc của từng hình và thứ tự tô giữa các hình cùng màu.
  • Nhập mọi tệp cùng nhau và xác minh kích thước, căn chỉnh trước khi cắt vật liệu.

Vì sao mỗi tệp màu nên giữ toàn artboard

Hãy hình dung bông hoa có cánh xanh gần góc trên trái và cánh đỏ gần góc dưới phải. Nếu cả hai tệp được cắt sát, mỗi cánh chuyển tới góc trên trái của tài liệu mới. Hai SVG không còn dùng chung hệ tọa độ, nên ráp lại phải đoán.

Khi mọi tệp giữ artboard gốc, mỗi màu ở đúng tọa độ của nó. Tệp chỉ có xanh có thể chứa nhiều khung trống. Đó là dữ liệu căn chỉnh có chủ ý, không phải lãng phí.

Khái niệm khung vẽ dùng chung
Bông hoa nhiều màu khái niệm tách thành artboard trong suốt cùng kích thước, mỗi màu chính xác một bản, với góc căn chỉnh dùng chung
Mỗi màu giữ khung vẽ và tọa độ gốc. Cắt sát các layer sẽ loại bỏ mốc căn chỉnh chung.

viewBox SVG xác định không gian tọa độ bên trong. Giữ nó cùng chiều rộng và cao vật lý đáng tin cậy khi máy cắt, nhà in hoặc đối tác sản xuất quan tâm kích thước thực.

Màu chính xác khác với màu nhìn thấy

SVG có thể chứa #ff0000 và #fe0000. Chúng trông gần giống hệt nhưng là hai giá trị chính xác và tạo hai tệp trong quy trình tách theo màu chính xác. Điều đó an toàn hơn âm thầm đoán nhà thiết kế muốn chúng là một màu sản xuất.

Trước tách, kiểm tra bảng màu:

Tình huốngViệc cần làm
Hai giá trị gần trùng ngoài ý muốn từ truy vết nhiễuChủ động gộp rồi tách
Màu tương tự biểu diễn điểm sáng và bóngGiữ riêng
Màu biểu diễn thao tác cắt, tạo nếp hoặc in khác nhauGiữ riêng và đặt nhãn tệp
Đồ họa dùng chuyển sắcChủ động làm phẳng, thay bằng màu đặc đã chọn hoặc giữ quy trình gốc
SVG chứa ảnh rasterTách ảnh nguồn trước vector hóa hoặc dựng lại thành đường dẫn

Quy trình giảm bảng màu giải thích cách gộp màu gần nhau theo vai trò thị giác và sản xuất. Thực hiện quyết định đó trước. Công cụ tách không nên quyết định thay bạn.

Phương pháp 1: dùng công cụ tách miễn phí trên trình duyệt

Công cụ tách màu SVG chấp nhận một tập con SVG được chủ động giới hạn để bảo toàn tệp thay vì trả layer trông hợp lý nhưng sai.

1. Chọn SVG

Chọn SVG tối đa 5 MiB. Tài liệu được kiểm tra trong worker trình duyệt dùng một lần trước khi tạo bản xem trước hoặc tệp tải an toàn. Nội dung SVG, tên tệp, đường dẫn, màu, bản xem trước và tệp được tạo không gửi đến PerfectVector.

Phiên bản hiện tại dành cho đồ họa vector tô màu đặc, không trong suốt: đường dẫn, hình chữ nhật, đường tròn, elip, đa giác và đường đa đoạn được hỗ trợ với phép biến đổi phổ biến. Nó xử lý màu tô đặc nội tuyến và kế thừa được hỗ trợ.

2. Xem lại tương thích và kích thước

Kiểm tra bản tổng hợp được chấp nhận, kích thước vật lý, viewBox, số đường dẫn, bảng màu chính xác và cảnh báo. Nếu tệp có viewBox nhưng không có chiều rộng, cao vật lý đáng tin cậy, xác nhận một chiều; chiều kia giữ tỷ lệ.

Xử lý dừng thay vì loại bỏ nội dung không được hỗ trợ. Điều kiện dừng hiện tại gồm nét nhìn thấy, chuyển sắc, họa tiết, bộ lọc, đường cắt xén, mặt nạ, văn bản chỉnh sửa được, ảnh nhúng, tham chiếu tái sử dụng, SVG lồng nhau, tài nguyên bên ngoài, stylesheet hoặc class, script, trình xử lý sự kiện và màu cắt trong suốt.

Giới hạn đó tuân theo chính mô hình SVG. Đặc tả tô màu SVG 2 phân biệt màu đặc với chuyển sắc, họa tiết, độ không trong suốt của màu tô và hành vi nét. ‘Màu’ nhìn thấy không phải lúc nào cũng là một giá trị phẳng có thể chuyển an toàn sang tệp.

3. Kiểm tra bản xem trước của từng màu chính xác

Công cụ tạo một bản xem trước cho mỗi màu chính xác không trong suốt. Xác minh:

  • hình mong đợi xuất hiện trong đúng tệp màu;
  • không thiếu nội dung nét, chữ hoặc ảnh dự kiến;
  • kích thước tổng hợp khớp nguồn;
  • mỗi layer giữ vị trí gốc;
  • bảng màu chứa số màu sản xuất bạn dự tính.

SVG một màu vẫn hợp lệ; nó đã được tách sẵn. Tệp có từ hai đến 24 màu chính xác nhận chế độ xem layer thông thường. Số lượng cao hơn được hỗ trợ vẫn đủ điều kiện tới giới hạn an toàn, nhưng hàng chục màu thường báo hiệu nên dọn bảng màu trước. Hơn 256 màu chính xác bị từ chối.

4. Tải tệp

Tải riêng từng tệp màu cần thiết hoặc dùng tệp nén tạo cục bộ. Mọi đầu ra giữ cùng chiều rộng, cao, viewBox và hệ tọa độ. Tên tệp cùng thứ tự layer được xác định nhất quán, nên bàn giao có thể lặp lại.

Công cụ tách và tải layer không cần đăng ký hoặc credit. Nó riêng với quy trình tải raster sang vector có trả phí của PerfectVector.

Phương pháp 2: tách màu trong trình chỉnh sửa vector

Dùng Illustrator, Inkscape, Affinity hoặc trình chỉnh sửa vector khác khi SVG cần sửa trước tách.

  1. Mở bản sao và ghi chiều rộng, cao tài liệu cùng viewBox hoặc artboard.
  2. Chuyển văn bản chỉnh sửa được thành đường dẫn nếu nơi sử dụng yêu cầu hình dạng.
  3. Mở rộng hoặc chủ động thay nét, chuyển sắc, họa tiết, mặt nạ và cấu trúc cắt xén không được hỗ trợ.
  4. Chọn một hình đại diện, rồi dùng lệnh Select Same Fill Color của trình chỉnh sửa.
  5. Sao chép hình được chọn sang artboard nhân đôi có cùng kích thước và gốc tọa độ.
  6. Xóa hoặc ẩn màu khác mà không di chuyển hình được chọn.
  7. Xuất tệp màu thành SVG và lặp lại.
  8. Nhập lại mọi tệp cùng nhau để xác minh chúng chồng khớp chính xác.

Đừng tạo tài liệu mới vừa sát cho mỗi vùng chọn. Nhân đôi artboard gốc hoặc dùng thiết lập xuất giữ giới hạn của nó.

Chỉnh thủ công cũng cho phép kết hợp hình cùng màu khi hữu ích cho sản xuất. Đừng tự động hợp nhất nếu lỗ, chồng lấp, thứ tự tô nguồn hoặc chỉnh sửa sau này phụ thuộc vào đối tượng riêng.

Chuẩn bị tệp cho Cricut

Hướng dẫn tải ảnh lên hiện tại của Cricut cho biết SVG có layer được tải đúng thiết kế và xuất hiện như ảnh được nhóm, với layer có thể di chuyển, đổi kích thước riêng sau bỏ nhóm. Nó cũng mô tả giới hạn 5.000 đường dẫn SVG.

Trước cắt:

  1. Tải tất cả tệp đã tách lên.
  2. Thêm chúng vào cùng Canvas mà không đổi kích thước.
  3. Xác nhận mỗi tệp báo cùng chiều rộng và cao.
  4. Dùng điều khiển vị trí hoặc phương pháp căn chỉnh chung nếu quy trình cần chồng khớp chính xác.
  5. Gán đúng thao tác và màu vật liệu cho từng layer.
  6. Chạy thử nhỏ với vật liệu rẻ.

Hướng dẫn nội dung không được hỗ trợ của Cricut nêu rõ màu tô họa tiết, chuyển sắc, đường cắt xén, văn bản chỉnh sửa được, ảnh liên kết và ảnh nhúng không được hỗ trợ là vấn đề khi tải vector có layer. Chuyển chữ thành hình và chủ động đơn giản hóa các tính năng đó trước xuất.

Để kiểm tra rộng hơn, thực hiện cách kiểm tra SVG trước khi cắt. Nếu tệp đã tách nhập ở kích thước bất ngờ, dùng chẩn đoán SVG sai kích thước trước đổi kích thước từng layer.

Lỗi tách màu thường gặp

Layer không còn khớp

Mỗi màu có thể đã được cắt theo giới hạn riêng hoặc dán vào tài liệu có gốc khác. Xuất lại với artboard, chiều rộng, cao và viewBox gốc.

Một ‘màu’ thành nhiều tệp

SVG chứa giá trị gần trùng. Quyết định giá trị nào có cùng vai trò, chủ động gộp rồi chạy tách lại.

Chuyển sắc biến mất hoặc bị từ chối

Chuyển sắc là bộ cung cấp màu, không phải một màu tô đặc chính xác. Thay bằng vùng đặc có chủ ý, giữ quy trình chuyển sắc gốc hoặc dùng phương pháp sản xuất raster khi độ trung thực sắc độ quan trọng.

Thiếu chữ hoặc nét

Văn bản chỉnh sửa được và nét nhìn thấy có cấu trúc khác đường dẫn đường viền tô màu. Chỉ chuyển chúng thành hình trong trình chỉnh sửa vector khi phù hợp yêu cầu nơi sử dụng.

Cricut từ chối tệp

Kiểm tra tính năng không được hỗ trợ và số đường dẫn trước. Tệp có thể là SVG hợp lệ nhưng vẫn ngoài tập con Design Space chấp nhận.

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

SVG có thể chứa nhiều màu không? Có. Hình SVG có thể dùng màu tô và nét khác nhau, đồng thời SVG hỗ trợ chuyển sắc, họa tiết, độ không trong suốt và màu tham chiếu. Tách màu chính xác đơn giản nhất với màu tô đặc, không trong suốt.

Vì sao tệp đã tách có nhiều khoảng trống? Khoảng trống giữ artboard và tọa độ gốc. Nó giúp mọi màu giữ căn chỉnh khi nhập hoặc ráp lại các tệp.

Màu SVG tương tự có tự động được gộp không? Không. Công cụ tách của PerfectVector chỉ nhóm màu chính xác. Chủ động gộp màu gần trùng trước tách nếu chúng cần thành một màu sản xuất.

Tôi có thể tách chuyển sắc thành tệp màu không? Không thể thành layer màu đặc chính xác mà không đổi đồ họa. Thay chuyển sắc bằng vùng đặc đã chọn, giữ quy trình chuyển sắc gốc hoặc dùng raster khi chi tiết sắc độ mượt quan trọng.

Công cụ tách màu SVG có miễn phí không? Có. SVG được hỗ trợ được kiểm tra, xem trước, tách và tải cục bộ mà không cần tài khoản hoặc credit. Tài nguyên trang tĩnh tải như bình thường, nhưng dữ liệu tài liệu ở lại trong trình duyệt.

Nguồn tham khảo

  1. PerfectVector — Công cụ tách màu SVG — Cam kết hiện tại về xử lý cục bộ, màu chính xác, căn chỉnh, tương thích và tải xuống.
  2. W3C — Tô màu SVG 2 — Định nghĩa màu tô, nét, màu đặc, chuyển sắc, họa tiết, độ không trong suốt và màu tham chiếu.
  3. Cricut — Cách tải ảnh lên Design Space — Hành vi nhập SVG có layer và giới hạn đường dẫn hiện tại.
  4. Cricut — Tải ảnh: nội dung không được hỗ trợ — Giới hạn hiện tại về chuyển sắc, họa tiết, cắt xén, chữ và ảnh khi tải vector có layer.

Bạn đã sẵn sàng giữ mọi màu căn chỉnh? Mở Công cụ tách màu SVG miễn phí, xem bản xem trước màu chính xác và kích thước, rồi chỉ tải sau khi artboard dùng chung vượt qua kiểm tra.

Thêm từ blog

Tách SVG thành các tệp màu giữ nguyên vị trí