Khe trắng giữa các hình SVG: tìm nguyên nhân và sửa

Đường trắng mảnh giữa các hình SVG thường là vệt do dựng hình, không phải lỗ trong tệp. Mô hình dựng hình SVG cho phép các cách triển khai dùng khử răng cưa khi raster hóa đồ họa vector; vì vậy các cạnh kề nhau được lấy mẫu riêng có thể làm lộ một vệt rất mảnh mang màu nền ở tỷ lệ nhất định. Vệt đó có thể biến mất ở mức phóng to khác hoặc trong bộ dựng hình khác.

Đôi khi khe hở là thật. Trước khi chồng hình, thêm đường viền hoặc hợp nhất đường dẫn, thực hiện bốn bước: đổi mức phóng to, đổi nền, xuất tác phẩm thành raster và kiểm tra đường dẫn ở chế độ đường bao. Kết quả cho biết bạn cần sửa cách lấy mẫu hiển thị hay hình học.

Vệt dựng hình hay khe hở thật?

• Thay đổi hoặc biến mất khi phóng to: có lẽ là vệt hiển thị.
• Đổi màu theo nền: màu nền đang được lấy mẫu giữa các cạnh.
• Không có ở chế độ đường bao: ranh giới vector có thể đã gặp nhau.
• Có trong bản xuất raster độ phân giải cao: cần kiểm tra kỹ hơn độ chính xác khi xuất và hình học.
• Vẫn còn trong lưới, bản xem trước cắt hoặc phép đo đường dẫn: xem là vấn đề hình học thật.

Vì sao đường dẫn chạm nhau vẫn có vệt

Màn hình dựng hình vector lên lưới điểm ảnh. Khi cạnh đi qua một điểm ảnh, khử răng cưa pha điểm ảnh đó giữa hình và nền để cạnh trông mượt. Hai hình được dựng riêng có thể cùng pha các điểm ảnh ranh giới, ngay cả khi tọa độ vector của chúng gặp nhau.

Tỷ lệ thêm một biến số khác. Tọa độ chung nằm chính xác trên ranh giới điểm ảnh ở kích thước này có thể nằm giữa điểm ảnh ở kích thước khác. Làm tròn khi xuất cũng có thể dịch một ranh giới một lượng rất nhỏ. Vì vậy một đường có thể chỉ hiện ở mức phóng to 67%, biến mất ở 100% rồi trở lại trong ảnh thu nhỏ trên web.

SVG vẫn có thể đúng về mặt toán học. Sửa hình học trước khi thử có thể tạo chồng lấn hiện rõ khi dùng nền trong suốt, in, cắt hoặc làm hoạt ảnh.

Điểm phân biệt chính là các đường bao bên dưới có chung cạnh hay không. Vệt dựng hình có thể xuất hiện trên hình học chạm nhau; khe thật vẫn nhìn thấy giữa chính các đường bao.

Thực hiện bốn phép thử trước khi sửa

1. Đổi mức phóng to

Xem SVG ở nhiều mức, gồm 100% và phóng to rất lớn. Khe thật vẫn nằm giữa đường dẫn khi bạn phóng đại. Vệt lấy mẫu thường chập chờn, đổi độ dày hoặc biến mất.

Đừng chỉ dựa vào phóng to. Một số khe hình học nhỏ hơn điểm ảnh cũng có thể đổi hình thức hiển thị.

2. Đổi nền

Đặt SVG trên nền trắng, đen và một màu sáng. Nếu vệt mảnh chuyển thành màu nền, bộ dựng hình đang hiển thị nền giữa các cạnh được lấy mẫu riêng. Đó có thể là vệt lấy mẫu hoặc khe trong suốt thật, nên tiếp tục kiểm tra đường bao.

3. Xuất PNG độ phân giải cao

Xuất ở kích thước gấp hai hoặc bốn lần kích thước cuối, rồi kiểm tra kết quả đã thu nhỏ. Nếu vệt biến mất trong bản xuất độ phân giải cao, vấn đề có lẽ là raster hóa phụ thuộc tỷ lệ. Nếu vẫn còn và đo được, kiểm tra tọa độ và độ chính xác khi xuất.

4. Dùng chế độ đường bao hoặc khung dây

Tắt tô màu và xem ranh giới thực. Chọn các nút cạnh nhau rồi so sánh tọa độ. Nếu đường dẫn gặp nhau chính xác, đường nhìn thấy là vấn đề của bộ dựng hình. Nếu điểm cuối hoặc cạnh không khớp, sửa hình học.

Để xem nhiều thao tác sửa đường dẫn hơn, đọc cách chỉnh sửa SVG. Giữ một bản sao vì cách sửa tốt nhất phụ thuộc mục đích dùng tệp.

Sửa vệt hiển thị

Với tác phẩm phẳng mà các vùng tô kề nhau không nên có khoảng trong suốt, một phần chồng lấn rất nhỏ, có kiểm soát thường là cách đáng tin cậy nhất. Kéo hình nằm dưới hoặc hình tối hơn lấn một chút dưới hình cạnh nó. Phần chồng lấn không nên nhìn thấy ở kích thước bình thường và không được thay đổi hình bóng bên ngoài.

Các lựa chọn khác gồm:

• Thêm đường viền rất mảnh cùng màu với hình, căn sao cho nó che vệt.
• Đặt hình nền cùng màu phía sau tất cả các mảnh kề nhau.
• Tăng độ chính xác tọa độ khi xuất SVG nếu làm tròn đã tách các cạnh chung.
• Dựng raster lớn hơn rồi giảm mẫu khi sản phẩm cuối là PNG.

Thuộc tính SVG shape-rendering có thể yêu cầu độ chính xác hình học hoặc cạnh sắc hơn, nhưng MDN lưu ý đây chỉ là gợi ý dựng hình, không đảm bảo mọi vệt sẽ biến mất trên mọi hệ thống. Xem khi nào crispEdges hữu ích và khi nào không trước khi áp dụng gợi ý đó cho toàn tệp.

Chọn một cách sửa rồi thử ở nơi sử dụng thực tế. Chồng nhiều cách sửa có thể tạo gờ tối hoặc chỗ phình nơi các hình chồng nhau.

Sửa khe hình học thật

Nếu chế độ đường bao hoặc kết quả công đoạn sau xác nhận có lỗ:

1. Bắt dính các nút cần gặp nhau vào cùng tọa độ.
2. Kéo dài các cạnh kề nhau đến khi thực sự gặp nhau.
3. Chỉ nối điểm cuối khi thiết kế cần một đường dẫn liên tục.
4. Bỏ đoạn trùng hoặc đoạn thừa.
5. Xuất lại với độ chính xác tọa độ đủ cao.
6. Mở lại tệp và lặp bốn phép thử.

Tránh dùng hình trắng để che khe. Nó chỉ giấu triệu chứng trên nền trắng và vẫn là đối tượng thừa trong tệp.

Nếu khe đến từ đồ ảnh raster nhiều nhiễu, thiết kế có thể có nhiều mảnh mỏng và cạnh gần khớp nhưng chưa chạm. Sửa từng phần có thể lâu hơn đồ lại ảnh nguồn sạch hơn.

Mục đích sử dụng quyết định cách sửa phù hợp

Vết nứt còn tồn tại trong mặt CAD hoặc lưới công đoạn sau khác về bản chất với vệt một điểm ảnh trên trình duyệt. Nếu hình học sau chuyển đổi bị tách, sửa đường dẫn nguồn hoặc dung sai chuyển đổi. Nếu chỉ ảnh thu nhỏ trên trình duyệt có vệt, hình học sản xuất có thể đã đúng.

Danh sách kiểm tra SVG trước khi cắt trình bày kiểm tra riêng cho máy. Với độ nhòe trên màn hình hoặc điểm ảnh ẩn thay vì vệt, dùng chẩn đoán SVG bị vỡ hạt.

PerfectVector phù hợp ở đâu

Khi khe rải rác trong kết quả đồ lại từ PNG hoặc JPG, quay lại ảnh raster nguồn trước khi vá hàng chục đường dẫn. Dọn các khối nén rõ ràng, xóa nền không mong muốn và giữ những cạnh gốc rõ nhất. Sau đó dùng quy trình ảnh sang vector để dựng lại các vùng nhìn thấy thành đường dẫn chỉnh sửa được và kiểm tra bản xem trước.

PerfectVector không biết hai vùng cùng màu có phải giữ riêng cho hoạt ảnh, cắt hoặc lắp ráp hay không. Dùng bản xem trước để kiểm tra hình bóng và khoảng trống, rồi thử SVG đã tải xuống ở nơi sử dụng thực tế. Đồ lại hữu ích khi sự phân mảnh của ảnh nguồn gây khe, không phải khi một trình duyệt chỉ đang khử răng cưa hình học kề nhau vốn đúng.

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

Vì sao có đường trắng giữa các đường dẫn SVG? Trình duyệt hoặc ứng dụng có thể khử răng cưa các cạnh kề nhau riêng, khiến nền lộ ở một số tỷ lệ. Đường dẫn vẫn có thể gặp nhau chính xác. Đổi mức phóng to, nền, bộ dựng hình và chế độ đường bao trước khi sửa.

Làm sao bỏ vệt khử răng cưa trong SVG? Với các vùng tô phẳng kề nhau, thêm phần chồng rất nhỏ có kiểm soát, đường viền rất mảnh cùng màu hoặc hình đỡ phía sau. Thử kết quả ở các kích thước hiển thị cuối. Đừng áp dụng máy móc cho tác phẩm cắt, CAD, trong suốt hoặc có hoạt ảnh.

Nối tất cả đường dẫn có loại bỏ khe không? Có thể, nhưng cũng loại bỏ cấu trúc màu và chỉnh sửa riêng. Chỉ hợp nhất khi chúng cần là một hình. Tác phẩm nhiều màu thường cần các đối tượng riêng, nên làm khớp cạnh hoặc chồng có kiểm soát an toàn hơn.

Vì sao khe chỉ xuất hiện khi SVG nhỏ? Co giãn thay đổi vị trí ranh giới vector so với lưới điểm ảnh. Ở một số kích thước, cả hai cạnh kề nhau pha với nền trên cùng hàng hoặc cột điểm ảnh. Dựng lớn hơn hoặc chồng nhẹ có thể ngăn nền lộ ra.

Khe SVG rất nhỏ có ảnh hưởng in 3D hoặc cắt không? Có nếu chúng còn trong mặt, lưới hoặc đường chạy dao. Vệt chỉ có trên màn hình không chứng minh hình học bị hỏng. Kiểm tra bản xem trước công đoạn sau và sửa mọi vết nứt hoặc đường bao mở làm thay đổi sản phẩm.

Nguồn tham khảo

1. W3C — Mô hình dựng hình SVG 2 — mô tả thứ tự vẽ SVG, giới hạn bằng mặt nạ cắt, tổng hợp và khử răng cưa.
2. MDN — shape-rendering — mô tả các gợi ý dựng hình có sẵn cho hình SVG.
3. W3C — Hệ tọa độ SVG 2 — định nghĩa mô hình tọa độ, khung hiển thị và biến đổi phía sau dựng hình phụ thuộc tỷ lệ.

---

Nếu kết quả đồ lại raster bị phân mảnh có khe thật, dựng lại thành đường dẫn vector chỉnh sửa được và kiểm tra bản xem trước. Nếu các đường dẫn đã gặp nhau, giữ tệp và chỉ áp dụng cách sửa hiển thị nhỏ nhất phù hợp với nơi sử dụng.