SVG không bỏ nhóm được: xác định đối tượng và sửa đúng cách

Bỏ nhóm chỉ hoạt động khi đối tượng được chọn thật sự là một nhóm. SVG trông như có nhiều phần có thể thực chất là một đường dẫn phức hợp, một đường dẫn thông thường, đối tượng được giới hạn bằng mặt nạ cắt hoặc ảnh raster nằm trong vùng chứa SVG. Nhấp Ungroup thêm lần nữa không thể thay đổi những cấu trúc đó.

Câu hỏi hữu ích không phải “Lệnh Ungroup đúng nằm ở đâu?” mà là “Tôi đã chọn thứ gì?” Khi xác định được, cách sửa thường đơn giản: bỏ nhóm thật, tách đường dẫn phức hợp, chỉnh nút của đường dẫn đơn hoặc đồ lại raster nhúng thành các hình vector thật.

Chẩn đoán nhanh

• Nếu bảng đối tượng hiển thị nhóm hoặc nguồn SVG chứa <g>, dùng Ungroup.
• Nếu một vùng chọn có các lỗ hoặc phần rời riêng biệt, thử Break Apart hoặc Release Compound Path trên bản sao.
• Nếu chỉnh nút cho thấy một đường viền, không có gì để bỏ nhóm. Chỉnh hoặc tách đường dẫn đó.
• Nếu đối tượng là một hình chữ nhật và vỡ thành ô khi phóng lớn, có lẽ đó là ảnh nhúng. Lấy lại raster gốc và vector hóa đúng cách.

Trước hết, kiểm tra loại đối tượng bạn đã chọn

SVG là định dạng chứa nội dung, không phải lời hứa rằng mỗi phần nhìn thấy là một lớp riêng. Nó có thể chứa các phần tử vector được nhóm, đường dẫn riêng, đường dẫn phức hợp, văn bản, cấu trúc mặt nạ cắt và ảnh raster. Nếu đang xây dựng trình chỉnh sửa canvas, hướng dẫn nhập SVG trong Fabric.js chỉ cách phân tích các đối tượng riêng, đổi màu một phần có tên và kiểm tra SVG xuất ra.

Trong diagrams.net, hãy so sánh ảnh SVG draw.io và mẫu hình gốc trước khi thử bỏ nhóm thiết kế đã nhập. Ảnh có thể co giãn và hình sơ đồ có điểm kết nối được xác định có quy trình chỉnh sửa khác nhau.

Với cùng câu hỏi ảnh hay hình gốc trong một trình chỉnh sửa sơ đồ khác, xem những gì có thể chỉnh sửa sau khi nhập SVG vào Excalidraw.

Điều đó giải thích vì sao cùng triệu chứng xuất hiện trong Cricut Design Space, Silhouette Studio, LightBurn, Inkscape, Illustrator và ứng dụng văn phòng. Trong PowerPoint, trước hết phân biệt đồ họa SVG với hình Office bằng hướng dẫn chuyển đổi SVG và chỉnh từng phần trong PowerPoint. Mỗi chương trình đặt tên lệnh khác nhau, nhưng tệp bên dưới vẫn thuộc một số cấu trúc phổ biến.

Bốn cấu trúc, bốn cách sửa

Nhóm là trường hợp duy nhất Ungroup giải quyết được

Trong mã SVG, phần tử <g> là vùng chứa các phần tử SVG khác, và tiêu chuẩn cho phép nhóm lồng nhau ở độ sâu bất kỳ. Nhà thiết kế có thể nhóm hình tròn, chữ logo và nền để chúng di chuyển cùng nhau. Bỏ nhóm xóa vùng chứa nhóm của trình chỉnh sửa và để lộ các phần tử con.

Hãy thử:

1. Nhân bản tệp hoặc lưu một bản làm việc.
2. Chọn đối tượng một lần.
3. Xem bảng Layers hoặc Objects thay vì chỉ dựa vào canvas.
4. Nếu mục được chọn là nhóm, chạy Ungroup một lần.
5. Chỉ lặp lại nếu tệp có nhóm lồng nhau.

Nhóm lồng nhau rất phổ biến. Logo có thể có một nhóm cho biểu tượng, một nhóm cho chữ và một nhóm cha bao cả hai. Hai hoặc ba lần Ungroup có chủ đích là bình thường. Nhấp cho đến khi thiết kế rã ra thì không nên. Dừng ngay khi các phần bạn cần có thể chọn riêng.

Đường dẫn phức hợp trông tách biệt nhưng hoạt động như một đối tượng

Chữ “O”, hình bánh vòng và logo có khoảng trống khoét rỗng thường là đường dẫn phức hợp. Lỗ nhìn thấy không phải đối tượng trắng đặt bên trên. Nó được tạo bởi nhiều đường dẫn con và quy tắc tô của đường dẫn; đặc tả đường dẫn SVG hỗ trợ rõ ràng đường dẫn phức hợp cho các cấu trúc như lỗ bánh vòng.

Cấu trúc này hữu ích. Nó giữ nguyên khoảng rỗng trong chữ và phần khoét khi thiết kế di chuyển hoặc đổi màu. Tách nó có thể lấp lỗ, tách các phần rời hoặc thay đổi cách máy cắt hiểu bên trong và bên ngoài. Nếu lỗ đã bị đóng, dùng chẩn đoán lỗ bị tô kín trước khi áp dụng thêm lệnh đường dẫn.

Nếu thật sự cần tách các phần:

• nhân bản đối tượng trước;
• dùng Release Compound Path, Break Apart hoặc lệnh tương đương;
• kiểm tra mọi lỗ và khoảng rỗng trong chữ sau đó;
• khôi phục cấu trúc phức hợp nếu nơi sử dụng cần một hình bao sạch.

Với tệp cắt, tách các phần không tự động là cải thiện. Nếu đường dẫn phức hợp hiện tại cắt đúng, hãy giữ nguyên.

Đường dẫn đơn không có gì bên trong để lộ ra

Một đường dẫn có thể uốn quanh hình bao phức tạp nhưng vẫn là một đối tượng. Chuyển sang công cụ nút hoặc chọn trực tiếp. Nếu điểm neo xuất hiện dọc toàn bộ đường viền, bạn đã đang nhìn thấy hình học có thể chỉnh sửa.

Lựa chọn lúc này là thao tác đường dẫn, không phải thao tác nhóm:

• di chuyển nút để đổi hình đường viền;
• cắt đường dẫn tại các nút đã chọn;
• chia hình bằng đường dẫn khác;
• dùng Break Apart nếu đường dẫn chứa các đường dẫn con không nối nhau;
• vẽ lại một đoạn cục bộ khi kết quả đồ lại quá thô.

Sự khác biệt này quan trọng với thiết kế được đồ lại tự động. Công cụ chuyển đổi có thể tạo một hình cho mỗi màu, không phải một hình cho mỗi vật mà con người nhận ra. Áo xanh và mắt xanh có thể trở thành một đối tượng phức hợp vì cùng màu tô. Tệp đó là vector, nhưng cấu trúc không khớp các lớp theo ý nghĩa mà bạn kỳ vọng.

Để tạo hoạt ảnh trong Rive, quyết định phần nào cần chuyển động độc lập trước khi giải phóng hoặc gộp đường dẫn. Nhập SVG tạo các đối tượng Rive gốc, nên hãy kiểm tra Hierarchy thu được và thử chuyển động của một phần. Hướng dẫn chuẩn bị nhập SVG vào Rive liên hệ cách nhóm và thiết lập màu của nguồn với các phần được nhập, hiệu ứng không được hỗ trợ và tâm xoay cần cho hoạt ảnh.

SVG có thể chứa một ảnh raster

SVG được phép có phần tử <image>. Đặc tả nội dung nhúng SVG cho biết phần tử đó có thể tham chiếu nội dung raster PNG hoặc JPEG. Tệp ngoài có đuôi .svg, nhưng thiết kế bên trong vẫn là pixel.

Có ba cách kiểm tra nhanh:

1. Phóng to. Nếu cạnh vỡ thành ô, nội dung được chọn là raster.
2. Mở SVG trong trình chỉnh sửa văn bản. Tìm <image, data:image, .png hoặc .jpg.
3. Kiểm tra loại đối tượng. Đối tượng ảnh hình chữ nhật không có nút để chỉnh không phải nhóm hình vector.

Đừng đồ lại ảnh chụp màn hình SVG nếu PNG, JPG hoặc tệp thiết kế gốc vẫn còn. Dùng nguồn sạch nhất bạn tìm được. Mỗi lần xuất và chụp màn hình đều có thể thêm độ mờ do đổi tỷ lệ hoặc nhiễu nén.

Đây là trường hợp PerfectVector có thể giúp: chuyển ảnh thành vector có thể dựng lại thiết kế phẳng phù hợp thành đường dẫn có thể chỉnh sửa. Nếu là ảnh chụp, hãy giữ raster trừ khi mục tiêu là diện mạo vector được chủ động đơn giản hóa. Ảnh chụp không biến thành tập lớp sạch theo ý nghĩa chỉ vì nằm trong SVG.

Để tìm hiểu thêm đúng vấn đề vùng chứa này, xem hướng dẫn về SVG vẫn trông vỡ hạt.

Còn đường dẫn tạo mặt nạ cắt, mặt nạ và symbol thì sao?

Một số tệp là vector nhưng vẫn không thể bỏ nhóm theo cách thông thường:

• Đường dẫn tạo mặt nạ cắt che một phần đối tượng mà không xóa nó. Giải phóng vùng cắt để thấy toàn bộ hình học, rồi quyết định có giữ các phần bị cắt hay không.
• Mặt nạ kiểm soát khả năng nhìn thấy bằng giá trị sáng tối. Giải phóng nó có thể làm lộ thiết kế ngoài dự kiến hoặc thay đổi độ trong suốt.
• Symbol hoặc phiên bản liên kết có thể cần lệnh Expand, Detach hoặc Convert to Paths trước khi chỉnh trực tiếp.
• Lớp bị khóa là trạng thái của trình chỉnh sửa, không phải cấu trúc SVG. Mở khóa trước khi chẩn đoán tệp.

Nên giữ nguyên các cấu trúc này khi diện mạo đã đúng và bạn chỉ cần đổi kích thước hoặc đặt tệp. Mở rộng mọi thứ có thể khiến SVG nhỏ, có tổ chức trở nên khó bảo trì hơn nhiều.

Thứ tự sửa an toàn

Dùng thao tác ít phá vỡ nhất trước:

1. Lưu bản sao.
2. Mở khóa đối tượng hoặc lớp.
3. Kiểm tra loại đối tượng trong bảng lớp.
4. Bỏ nhóm khi đã xác nhận là nhóm.
5. Chỉ giải phóng vùng cắt hoặc mặt nạ khi hình học bị ẩn là vấn đề.
6. Chỉ tách đường dẫn phức hợp khi phải chỉnh từng phần riêng.
7. Chỉnh hoặc chia đường dẫn đơn thay vì cố bỏ nhóm.
8. Chỉ đồ lại khi tệp chứa pixel hoặc hình học không dùng được và còn raster gốc.

Thứ tự này giữ nguyên lỗ, phần chồng lấn và quan hệ lớp cho đến khi bạn biết chúng là nguyên nhân.

Cách ngăn vấn đề trong tệp bạn bàn giao

Trước khi gửi SVG cho người khác:

• đặt tên các nhóm và lớp quan trọng trong tài liệu nguồn;
• chỉ chuyển chữ thành đường dẫn vector trong bản bàn giao, còn bản gốc giữ chữ có thể chỉnh sửa;
• tránh nhúng raster khi người nhận mong đợi hình vector có thể chỉnh sửa;
• kèm PNG xem trước để không nhầm diện mạo với khả năng chỉnh sửa;
• mở SVG xuất ra trong trình chỉnh sửa thứ hai và chọn vài phần;
• cho người nhận biết tệp có nhiều lớp, đã gộp phẳng hay chủ ý là một hình phức hợp.

Nếu mua tệp, hãy giữ bộ tệp tải xuống. Người tạo có thể đã kèm SVG nhiều lớp, DXF, EPS hoặc tệp nguồn dù SVG đầu tiên bạn mở đã được gộp phẳng.

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

Vì sao Ungroup bị mờ với SVG của tôi? Đối tượng được chọn có lẽ không phải nhóm. Nó có thể là đường dẫn đơn, đường dẫn phức hợp, ảnh, vùng cắt hoặc đối tượng bị khóa. Kiểm tra bảng Layers hoặc Objects và dùng lệnh khớp loại đối tượng.

Vì sao SVG được nhập thành một đối tượng? Nó có thể đã được xuất thành một đường dẫn phức hợp, dựng một hình cho mỗi màu, gộp phẳng bởi ứng dụng nguồn hoặc lưu với ảnh raster bên trong. Một đối tượng không tự động nghĩa là tệp hỏng; hãy kiểm tra nút và mã nguồn trước khi thay đổi.

Làm sao tách SVG một lớp trong Cricut Design Space? Nếu chỉ có một màu và một đường dẫn, Design Space không có lớp ẩn nào để lộ ra. Tách thiết kế trong trình chỉnh sửa vector, quay lại nguồn gốc có nhiều lớp hoặc dựng lại các vùng màu trước khi nhập SVG lần nữa.

Tôi có thể bỏ nhóm SVG trong Inkscape hoặc Illustrator không? Có, khi vùng chọn là nhóm thật. Inkscape và Illustrator cũng có lệnh cho đường dẫn phức hợp, cấu trúc mặt nạ cắt và chia đường dẫn. Các lệnh đó giải quyết cấu trúc khác nhau, không nên xem là phiên bản mạnh hơn của Ungroup.

PerfectVector có thể làm ảnh nhúng chỉnh sửa được không? PerfectVector có thể đồ lại thiết kế raster gốc thành đường dẫn vector khi nguồn phù hợp, chẳng hạn logo phẳng, biểu tượng hoặc minh họa. Nó không khôi phục các lớp có tên hay văn bản còn chỉnh được của nhà thiết kế gốc, và ảnh chụp thường vẫn phù hợp hơn ở dạng raster.

Nguồn

1. W3C — Cấu trúc tài liệu SVG — vùng chứa <g> và mô hình nhóm lồng nhau.
2. W3C — Đường dẫn SVG — đường dẫn, đường dẫn con không nối nhau và hình học đường dẫn phức hợp.
3. W3C — Nội dung nhúng SVG — nội dung raster PNG và JPEG trong phần tử SVG <image>.
4. MDN — Mặt nạ cắt và mặt nạ SVG — sự khác nhau trong hoạt động của vùng cắt và mặt nạ.
5. Cricut — Tải ảnh lên: các thành phần không được hỗ trợ — cách một ứng dụng đích xử lý đường dẫn tạo mặt nạ cắt, chữ, ảnh liên kết và raster nhúng.

---

Đừng tiếp tục vật lộn với cùng lệnh bị vô hiệu hóa. Xác định cấu trúc trước. Nếu SVG hóa ra là pixel trong vùng chứa, hãy dựng lại thiết kế gốc thành đường dẫn vector có thể chỉnh sửa, rồi kiểm tra kết quả trước khi tiếp tục.