SVG mở ra trống: bảy bước kiểm tra trước khi dựng lại

Nếu SVG mở ra trống, nhân bản tệp trước khi lưu hoặc xuất bất cứ thứ gì. Thiết kế có thể vẫn còn nhưng nằm ngoài viewBox nhìn thấy, được tô trong suốt hoặc trắng, bị vùng cắt hay mặt nạ che, hoặc dựng bằng tính năng một ứng dụng không hỗ trợ. Lưu lại tài liệu trống có thể biến tệp còn cứu được thành tệp thật sự rỗng.

Mở bản sao trong trình duyệt và trình chỉnh sửa vector. So sánh đó là nhánh chẩn đoán đầu tiên: thấy ở một nơi nhưng trống ở nơi kia thường là vấn đề hỗ trợ ứng dụng hoặc cấu trúc tài liệu; trống ở mọi nơi nghiêng nhiều hơn về vùng nhìn, màu tô, giới hạn bằng mặt nạ cắt, mã không hợp lệ hoặc nội dung thiếu.

Đây là bản đồ chẩn đoán, không phải bảy cách sửa rời rạc. Xác nhận hình học tồn tại, rồi kiểm tra giới hạn, tỷ lệ, màu, giới hạn bằng mặt nạ cắt, hiệu ứng được hỗ trợ và tài nguyên phụ thuộc trước khi thay bất cứ thứ gì.

1. Giữ tệp và kiểm tra xem có dữ liệu không

Tạo bản sao với tên mới. Sau đó kiểm tra kích thước tệp và mở trong trình chỉnh sửa văn bản thuần.

Tệp 0 byte hoặc tài liệu chỉ có phần tử gốc <svg> rỗng có rất ít thứ để khôi phục từ bản sao đó. Tệp chứa đường dẫn, nhóm, kiểu dáng hoặc khối dữ liệu mã hóa lớn không phải rỗng chỉ vì canvas trông trống.

Đừng suy luận quá nhiều từ kích thước lớn. Tệp có thể chứa ảnh nhúng độ phân giải cao, kiểu dáng lặp lại hoặc dữ liệu sai cấu trúc. Kích thước chỉ cho biết đáng kiểm tra thêm.

2. So sánh trình duyệt và trình chỉnh sửa vector

Kéo SVG vào trình duyệt hiện đại, rồi mở cùng bản sao trong Inkscape, Illustrator, Figma hoặc trình chỉnh sửa vector khác.

Trình duyệt hiển thị tệp không chứng minh tệp có đường dẫn vector dễ chuyển giữa ứng dụng. Trình duyệt có thể dựng ảnh raster nhúng và nội dung web mà CAD hoặc trình chỉnh sửa vector bỏ qua.

3. Chọn tất cả và kiểm tra giới hạn

Trong trình chỉnh sửa vector, dùng Select All. Tìm khung chọn, tọa độ, chiều rộng và chiều cao.

• Khung chọn xa ngoài trang nghĩa là thiết kế nằm ngoài canvas.
• Vùng chọn khổng lồ có thể chỉ ra điểm thừa, đối tượng giới hạn bằng mặt nạ cắt hoặc hình chữ nhật nền.
• Khung chọn bình thường nhưng thiết kế vô hình hướng đến màu, độ không trong suốt (opacity) hoặc giới hạn bằng mặt nạ cắt.
• Không có đối tượng chọn được gợi ý nội dung không hỗ trợ, tài liệu rỗng hoặc nhập thất bại.

Nếu đối tượng ngoài canvas, chuyển vùng chọn vào trang hoặc đổi kích thước trang theo bản vẽ. Tránh co giãn đường dẫn trừ khi kích thước thực tế cũng sai.

4. So sánh thiết kế với viewBox

Mở SVG dưới dạng văn bản và kiểm tra phần tử gốc:

<svg xmlns="http://www.w3.org/2000/svg"
  width="800" height="600" viewBox="0 0 800 600">

Bốn số viewBox là x nhỏ nhất, y nhỏ nhất, chiều rộng và chiều cao, như đặc tả hệ tọa độ SVG xác định. Thiết kế quanh tọa độ 10000,10000 sẽ không xuất hiện trong viewBox="0 0 800 600". Chiều rộng hoặc cao viewBox bằng không hay âm vô hiệu hóa việc hiển thị phần tử đó.

Sửa giới hạn nhìn thấy dựa trên hình học thực. Đừng dán viewBox ngẫu nhiên từ tệp khác. Hướng dẫn SVG sai kích thước giải thích tương tác giữa viewBox và kích thước vùng nhìn khi thiết kế hiện nhưng tỷ lệ sai.

5. Kiểm tra màu và khả năng nhìn thấy

Chọn đối tượng và kiểm tra cả màu tô lẫn nét viền. Các trạng thái vô hình phổ biến gồm:

• fill="none" và không có nét viền;
• màu tô trắng trên canvas trắng;
• opacity="0", fill-opacity="0" hoặc stroke-opacity="0";
• display="none" hoặc visibility="hidden";
• lớp CSS có bảng kiểu áp dụng một giá trị trên;
• nét viền cực mảnh ở tỷ lệ hiện tại.

Tạm đặt hình chữ nhật có màu sau thiết kế hoặc gán màu tô thử thật nổi cho bản sao một đường dẫn. Nếu nó hiện, khôi phục kiểu dáng dự định thay vì giữ màu chẩn đoán trong tệp cuối.

Nếu màu tô vẫn hiện nhưng từng nét biến mất sau khi xuất, dùng hướng dẫn nét SVG biến mất để thử màu nét, giới hạn bằng mặt nạ cắt, tỷ lệ và diện mạo không được hỗ trợ mà không đồ lại hình học tốt.

6. Kiểm tra các tính năng nơi sử dụng có thể không hỗ trợ

Tìm trong mã clipPath, mask, pattern, filter, <image> và <foreignObject>.

Vùng cắt và mặt nạ có thể che mọi thứ khi hệ tọa độ hoặc tham chiếu lỗi; mô hình dựng hình SVG đặt giới hạn bằng mặt nạ cắt, mặt nạ, lọc và tổng hợp trong quy trình dựng hình. Họa tiết và bộ lọc có thể hiển thị khác nhau giữa các công cụ nhập. Phần tử <image> nhúng nội dung ảnh trong vùng chứa SVG, còn <foreignObject> có thể chứa nội dung từ không gian tên XML khác, như đặc tả nội dung nhúng SVG mô tả.

Nếu hình còn nhưng nhãn HTML biến mất, hãy so sánh foreignObject với văn bản SVG gốc và chỉ thay nhãn bị lỗi.

Nếu đường dẫn hiện nhưng bóng đổ bị cắt, chẩn đoán bóng SVG bị cắt bằng cách thử riêng vùng bộ lọc và vùng nhìn ngoài.

Tham chiếu cũng có thể lỗi. Kiểm tra các ID dùng trong url(#name) thật sự tồn tại và là duy nhất. Nếu SVG phụ thuộc ảnh, phông, bảng kiểu hoặc tệp liên kết bên ngoài, việc di chuyển SVG có thể đã làm hỏng tài nguyên đó.

Với ứng dụng Qt, hướng dẫn dựng SVG trong Qt tách kiểm tra mô-đun và tải tệp khỏi giới hạn tính năng hỗ trợ. So sánh nguồn nhỏ trước, rồi kiểm tra thiết kế trong cách dựng hình đã chọn.

Khi trình duyệt hiện thiết kế nhưng CAD không nhập gì, tìm hình học vector thông thường như <path>, <rect>, <circle> và các hình tương tự. PNG nhúng nhìn thấy được không có đường cong cho CAD sử dụng.

7. Xác thực hoặc xuất lại tệp

XML sai cấu trúc, thuộc tính không hợp lệ và cấu trúc riêng của công cụ xuất có thể được một bộ dựng chấp nhận nhưng bộ khác từ chối. Nếu có thiết kế nguồn, mở lại trong ứng dụng tạo nó và xuất bản SVG thuần hoặc đơn giản hóa. Chỉ mở rộng tính năng nơi sử dụng không xử lý được và so sánh tệp mới với nguồn.

Nếu không có nguồn, dùng công cụ xác thực SVG/XML hoặc trình chỉnh sửa văn bản báo lỗi cú pháp. Làm trên bản sao và sửa lỗi cấu trúc đầu tiên trước, vì thông báo sau có thể chỉ là hệ quả của nó.

Đừng chạy công cụ tối ưu trên bản duy nhất. Tối ưu viết lại cấu trúc và có thể làm khôi phục khó hơn khi chưa hiểu vấn đề.

Khi nào nên dựng lại hoặc vector hóa lại

Vector hóa lại phù hợp khi tệp chỉ chứa ảnh raster nhúng, cấu trúc SVG tạo ra không dùng được ngoài trình duyệt hoặc không còn nguồn có thể chỉnh sửa. Trích xuất hoặc tìm raster chất lượng cao nhất, rồi đồ lại thành đường dẫn thật.

Đó không phải cách sửa đúng cho đường dẫn ngoài canvas, viewBox lỗi, màu tô trắng hay một mặt nạ không hỗ trợ. Những tệp đó đã có hình học, và giữ nó tránh mất chất lượng không cần thiết.

Nếu toàn thiết kế được chọn như một ảnh pixel hoặc vỡ thành ô khi phóng lớn, dùng chẩn đoán pixel ẩn trước khi dựng lại.

PerfectVector phù hợp ở đâu

Quy trình chuyển ảnh thành vector của PerfectVector dành cho nhánh chỉ có raster. Tải lên ảnh có chất lượng tốt nhất ở dạng PNG, JPG hoặc định dạng được hỗ trợ khác và kiểm tra bản xem trước vector về hình thật, cạnh sạch, khoảng trống và đường dẫn dễ xử lý.

Nó không sửa mã SVG bất kỳ hay khôi phục tài nguyên ngoài. Nếu tệp đã có đường dẫn tốt, sửa vùng nhìn, kiểu dáng hoặc tính năng không hỗ trợ trong trình chỉnh sửa vector. Nếu chỉ là raster trong vỏ SVG, dựng lại thiết kế nhìn thấy bằng đường dẫn sẽ cho vector dễ chuyển giữa ứng dụng thay vì một lớp vỏ khác.

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

Vì sao SVG trống trong Illustrator nhưng hiện trong Chrome? Tệp có thể dùng tính năng trình duyệt hỗ trợ nhưng Illustrator không nhập được, như nội dung web nhúng, họa tiết phức tạp, bộ lọc, mặt nạ hoặc lớp vỏ raster. Kiểm tra mã và xem có đường dẫn vector thông thường không trước khi xuất lại bản SVG đơn giản hơn.

Làm sao tìm thiết kế SVG nằm ngoài canvas? Dùng Select All và kiểm tra giới hạn vùng chọn hoặc tọa độ. Nếu khung hiện xa trang, chuyển nó vào trang hoặc đổi kích thước trang theo bản vẽ. Sau đó cập nhật viewBox khớp hình học dự định nhìn thấy.

SVG có thể màu trắng và trông trống không? Có. Màu tô hoặc nét trắng biến mất trên canvas trắng. Tệp cũng có thể dùng độ không trong suốt (opacity) bằng không, display="none" hoặc visibility="hidden". Thử trên nền có màu và kiểm tra kiểu tính toán.

Vì sao SVG nhập vào Fusion hoặc ứng dụng CAD khác bị trống? Tệp có thể chứa bitmap nhúng hoặc nội dung web không hỗ trợ thay vì đường cong vector. CAD cần hình học đường dẫn có thể nhập. Tìm <path> và các hình liên quan, rồi kiểm tra xem nội dung nhìn thấy có nằm trong <image> hoặc <foreignObject> không.

Tôi có nên chuyển SVG trống sang PNG rồi trở lại SVG không? Chỉ khi SVG không có hình học vector khôi phục được và diện mạo raster là nguồn tốt nhất còn lại. Chuyển qua PNG phá hủy cấu trúc đường dẫn hiện có. Chẩn đoán vùng nhìn, khả năng nhìn thấy, giới hạn bằng mặt nạ cắt và hỗ trợ trước.

Nguồn

1. W3C — Hệ tọa độ SVG 2 — xác định vùng nhìn, viewBox, đơn vị và phép biến đổi.
2. W3C — Mô hình dựng hình SVG 2 — mô tả giới hạn bằng mặt nạ cắt, mặt nạ, lọc, tổng hợp và thứ tự dựng hình.
3. W3C — Nội dung nhúng SVG 2 — xác định ảnh nhúng và nội dung ngoài trong SVG.
4. W3C — Dịch vụ xác thực mã — cung cấp xác thực tài liệu theo tiêu chuẩn để tìm lỗi mã.

Khi tệp còn lại chỉ là pixel trong vùng chứa SVG, hãy dựng lại thiết kế thành đường dẫn vector có thể chỉnh sửa và kiểm tra bản xem trước. Khi đã có đường dẫn tốt, giữ chúng và sửa phần lỗi nhỏ nhất của tài liệu.