SVG shape-rendering crispEdges: khi nào hữu ích?

Dùng shape-rendering="crispEdges" khi SVG có các cạnh được chủ động thiết kế sắc, rõ và phần lớn là thẳng, và thử ở kích thước hiển thị cuối cùng cho kết quả tốt hơn với thuộc tính này. Giữ mặc định auto khi khác biệt không đáng kể. Với hình có đường cong, gợi ý này có thể làm mép trông thô hơn. Nó thay đổi cách trình hiển thị vẽ hình có sẵn, không thay đổi chính hình đó. Đặc tả SVG 2 gọi đây là gợi ý và cho phép trình hiển thị giảm khử răng cưa hoặc căn một số cạnh theo pixel thiết bị.

Sự khác biệt đó quan trọng nếu biểu tượng nhỏ trông mờ hoặc logo có vẻ răng cưa sau khi xuất. crispEdges không thể biến PNG nhúng thành đường dẫn, sửa đường bao bị lỗi hay cam kết cùng một tập pixel trong mọi trình duyệt. Trước khi thay đổi toàn bộ tệp, so sánh một hình đại diện với auto, crispEdges và geometricPrecision ở những kích thước người dùng thực sự nhìn thấy.

crispEdges yêu cầu trình hiển thị làm gì

SVG có bốn giá trị shape-rendering. Đây là các mức ưu tiên, không phải bốn định dạng xuất. Mặc định auto cho phép trình hiển thị cân bằng tốc độ, độ tương phản ở mép và độ chính xác hình học. crispEdges ưu tiên tương phản rõ ở mép và có thể giảm khử răng cưa; geometricPrecision ưu tiên độ chính xác hình học. Tài liệu thuộc tính SVG của MDN giải thích rằng trình hiển thị có thể xử lý khác tất cả các cạnh, hoặc chỉ cạnh gần ngang và gần dọc. Không có bộ lọc làm sắc nét bắt buộc.

Thuộc tính trên SVG cha có thể được các hình con kế thừa, nên áp dụng ở phần tử gốc có thể ảnh hưởng đến hình tròn cần giữ độ mượt. Bạn có thể nhắm riêng một hình chữ nhật hoặc đường dẫn. Nếu cả thuộc tính trình bày SVG và khai báo CSS shape-rendering cùng áp dụng, thuộc tính CSS được ưu tiên.

Chúng tôi so sánh cùng các hình ở hai kích thước

Chúng tôi tạo một biểu trưng lưới chữ nhật và một đường bao cong dưới dạng hình SVG gốc. Mã, màu tô và viewBox giống hệt ở ba cột; chỉ giá trị shape-rendering thay đổi. Mỗi hình được hiển thị ở 63 và 111 pixel CSS trong Chromium với mức thu phóng trình duyệt 100%. Hình bên dưới là ảnh chụp trình duyệt của phép thử cục bộ đó, không phải minh họa kết quả tưởng tượng.

Cùng hình học SVG, ba gợi ý, hai kích thước

Không chế độ nào thay đổi đường dẫn. Trong ảnh chụp này, khác biệt quá nhỏ để khẳng định một cài đặt luôn tốt hơn. Tên thuộc tính nghe như một công cụ sửa lỗi, nhưng tác động có thể rất ít với một hình, kích thước và trình hiển thị cụ thể. Kiểm tra môi trường sử dụng thực tế trước khi giữ thuộc tính bổ sung.

Đây là một lần hiển thị Chromium, không phải nghiên cứu tương thích trình duyệt. Trình xem PDF, trình chỉnh sửa thiết kế hoặc trình duyệt ở tỷ lệ thiết bị khác có thể raster hóa cùng đường dẫn theo cách khác. Định nghĩa SVG 2 chủ động để ngỏ lựa chọn triển khai.

Thử trên một hình trước khi áp dụng khắp nơi

Lưu bản sao SVG, rồi đặt gợi ý trên một hình đại diện. Ví dụ, áp dụng cho phần chữ nhật của biểu tượng trong khi giữ chi tiết cong ở auto:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <rect x="4" y="4" width="16" height="8" fill="#154b67"
        shape-rendering="crispEdges" />
  <path d="M5 18 Q12 11 19 18" fill="none" stroke="#23a6a1"
        stroke-width="2" shape-rendering="auto" />
</svg>

Mở tệp trong trình xem dự định sử dụng ở kích thước biểu tượng nhỏ và một kích thước lớn hơn. So sánh với bản gốc đã lưu, bao gồm đường chéo và đường cong. Nếu định kiểu SVG nội tuyến bằng CSS, kiểm tra quy tắc ghi đè thuộc tính của bạn. Bỏ gợi ý khi nó không đem lại cải thiện có ý nghĩa; thuộc tính không cần thiết khiến khác biệt hiển thị về sau khó chẩn đoán hơn.

Chọn cách sửa phù hợp với dấu hiệu thực tế

Với PNG sprite mà lưới pixel chính xác là thiết kế, giữ raster có thể là lựa chọn gọn nhất. CSS image-rendering: pixelated điều khiển cách lấy mẫu ảnh khi thay đổi tỷ lệ; đó là thuộc tính khác với SVG shape-rendering. Hướng dẫn chuyển đổi pixel art trình bày khi nào nên giữ lưới, dựng các ô vector hoặc chủ động làm mượt đường bao.

Khi nào PerfectVector phù hợp

Nếu nguồn duy nhất là PNG nhỏ đã làm phẳng và bạn cần đường dẫn có thể chỉnh sửa, gợi ý hiển thị không thể cung cấp chúng. PerfectVector hữu ích ở bước trước đó: chuyển PNG thành một bản SVG để kiểm tra, rồi xem các hình ở kích thước bạn cần. Kiểm tra đường bao, lỗ bên trong và chi tiết nhỏ trước khi thử gợi ý hiển thị trên các đường dẫn được chọn. Đồ lại có thể diễn giải pixel thành hình học; nó không thể quyết định bậc thang trong pixel art nên trở thành đường cong mượt hay không.

Giữ PNG khi lưới gốc là hình cuối cùng. Nếu đã có SVG sạch và chỉ cách hiển thị trong trình duyệt trông lạ, hãy sửa trực tiếp việc hiển thị hoặc hình học. Khi PNG đã làm phẳng thực sự cần đường bao có thể chỉnh sửa, tạo một bản SVG bằng PerfectVector, kiểm tra đường dẫn và so sánh bản hiển thị trình duyệt ở kích thước cuối cùng trước khi thêm crispEdges.

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

crispEdges có loại bỏ khử răng cưa khỏi mọi hình SVG không? Không. Nó yêu cầu trình hiển thị ưu tiên tương phản ở mép. Đặc tả cho phép các triển khai khác nhau, bao gồm triển khai chỉ thay đổi một số cạnh gần dọc hoặc gần ngang. Thử đầu ra trong trình xem bạn sẽ dùng.

Tôi có nên đặt shape-rendering="crispEdges" trên toàn bộ SVG không? Chỉ khi mọi hình con đều hưởng lợi. Gợi ý ở phần tử gốc cũng có thể tác động tới hình con có đường cong. Áp dụng thuộc tính cho một hình chữ nhật dễ đánh giá hơn và ít có khả năng làm đường cong thô hơn.

crispEdges có sửa khe trắng hoặc PNG mờ trong SVG không? Nó không thể lấp khe hở thực sự hoặc thay pixel raster bằng đường dẫn vector. Chẩn đoán hình học của khe trước. Với PNG được thay đổi tỷ lệ, dùng phương pháp thay đổi tỷ lệ raster phù hợp hoặc tạo đường dẫn vector có thể chỉnh sửa nếu đó là nhu cầu thực tế.

Nguồn tham khảo

1. W3C — thuộc tính SVG 2 shape-rendering — Xác định bốn giá trị là gợi ý cho trình hiển thị và giải thích các cách cân bằng được phép.
2. MDN — thuộc tính SVG shape-rendering — Mô tả các hình SVG áp dụng, tính kế thừa và ưu tiên CSS.
3. MDN — thuộc tính CSS shape-rendering — Mô tả hành vi thuộc tính và vì sao cách hiển thị đường cong có thể khác nhau.
4. MDN — thuộc tính CSS image-rendering — Phân biệt thay đổi tỷ lệ pixel raster với hiển thị mép hình vector.