Phát hiện cạnh SVG: bản xem trước feConvolveMatrix

Phát hiện cạnh SVG bằng feConvolveMatrix thay đổi các pixel được kết xuất quanh ranh giới màu. Nó có thể tạo bản xem trước cạnh từ PNG bên trong SVG, nhưng không tạo đường bao có thể chỉnh sửa. Hãy phân biệt rõ khi công việc tiếp theo là chỉnh sửa logo, chuẩn bị hình nét hoặc xây dựng hình cho web.

Một phép thử đầu tiên hữu ích là ảnh thang xám nhỏ có hình dạng đã biết. Áp dụng nhân phát hiện cạnh đối xứng, giữ alpha và so sánh với nguồn không đổi. Sau đó kiểm tra các phần tử SVG. Ranh giới trông sắc hơn không chứng minh rằng ảnh đã trở thành hình học vector.

Bắt đầu bằng bản xem trước cạnh có kiểm soát

Tài liệu tham khảo feConvolveMatrix mô tả phép tích chập là phép tính liên quan đến một pixel đầu vào và các pixel lân cận. Nhân 3 × 3 này lấy tám lần giá trị giữa trừ đi tám pixel lân cận:

-1 -1 -1
-1  8 -1
-1 -1 -1

Tổng các hệ số bằng 0. Trong vùng đồng nhất, đáp ứng bằng 0; ở chỗ thay đổi độ sáng, nó có thể dương hoặc âm. Với bias="0", các kết quả âm bị cắt ở giới hạn màu thấp nhất. Vì vậy bản xem trước không thể hiện đều cả hai phía của mọi ranh giới.

Ví dụ dùng divisor="1" tường minh. Tài liệu tham khảo divisor mô tả việc chuẩn hóa theo giá trị đó và giá trị mặc định 1 cho nhân có tổng bằng 0. Nó cũng đặt color-interpolation-filters="sRGB" để ví dụ dùng giá trị kênh sRGB thay vì xử lý linearRGB mặc định của phần tử.

Lưu tệp hoàn chỉnh, độc lập này thành edge-preview.svg và mở trong trình duyệt. PNG được nhúng là hình thoi thang xám gốc 48 × 48 trên giấy trắng đục. Phần giữa là màu trắng, không phải trong suốt.

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
  <defs>
    <filter id="effect" filterUnits="userSpaceOnUse" x="0" y="0" width="48" height="48" color-interpolation-filters="sRGB">
      <feConvolveMatrix in="SourceGraphic" order="3" kernelMatrix="-1 -1 -1 -1 8 -1 -1 -1 -1" divisor="1" bias="0" targetX="1" targetY="1" edgeMode="duplicate" preserveAlpha="true"/>
    </filter>
  </defs>
  <image width="48" height="48" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABOklEQVR4nNWZQQ7EIAwDU7+seTlPo1ppTyvRhcQGxYeeGuNpEZT06r13KyxYccGKC1ZcsOKCFRfUA7h7XQD/hldCQGX8G1oFAYXpKKwCAmzDfyHZEGCazYZjQoBltBqKBQGGSTSMEyDSANkQnqxPAbCmgSd8wgDs1cSDflAP1lqT+IYBIuGVENj15FUQUJiOwiogwDSbCcmGAMNkNRwTApniaKjV+/0lB06Ej9T5IA9Ord+rdW2Q53UKKSFYbxiZ4mgo5vQEw0R1ImsT405vZAwIxcKAacckhGpVw/SdAfNIX6gtLslX9P+AokXSAvtJ+EAT3bzYfjgxKNMHJwdn1FPaKju+heSNLeXX6LbWouI8sL25yzyRHWuvM87Ex39wZLoSS+pi3fct9b8+FyssWHHBigtWXDgdIKsHsU1cbk4FPAgAAAAASUVORK5CYII=" filter="url(#effect)"/>
</svg>

Định nghĩa bộ lọc chỉ có hiệu lực vì ảnh tham chiếu đến nó qua filter="url(#effect)". Tài liệu tham khảo bộ lọc SVG giải thích rằng bản thân định nghĩa không được vẽ. Vùng tường minh bao phủ nguồn 48 × 48 này; hình khác cần kiểm tra vùng riêng.

Những thay đổi trong kiểm thử trình duyệt

Chúng tôi kiểm tra sáu mẫu gốc trong Chrome ở 48 và 192 pixel CSS. Năm tệp chứa một ảnh PNG nhúng và không có đường dẫn. Tệp thứ sáu là bản vector tương ứng được vẽ tay độc lập. Nó là đối chứng hình học, không phải kết quả áp dụng bộ lọc hay đồ lại PNG.

Các mẫu RGBA được lấy bằng cách đọc lại Canvas 48 × 48 của từng SVG đã kết xuất. Các mẫu hiển thị được kiểm tra riêng ở cả hai kích thước. Đây là quan sát cho nguồn và trình duyệt này, không phải bảo đảm tương thích hay khả năng nhận diện. Phóng to bản xem trước dựa trên raster không khôi phục đường bao sạch hơn.

Đáp ứng pixel và hình học có thể sửa

Sửa kết quả biến mất mà không xóa giấy

preserveAlpha mặc định là false. Với thiết lập đó, nhân cũng xử lý alpha. Đầu vào đục của chúng tôi có alpha 1 ở mọi nơi, nên nhân cạnh tổng bằng 0 triệt tiêu alpha đồng nhất cùng với màu đồng nhất. Kết quả biến mất trong mẫu đã kiểm tra.

Đặt preserveAlpha="true" giữ alpha nguồn trong khi xử lý màu. Tài liệu tham khảo preserveAlpha mô tả sự khác biệt đó. Trong thử nghiệm này, nó khôi phục bản xem trước cạnh đục. Nó cũng giữ giấy đục và phần giữa trắng ở trạng thái đục dù màu sau lọc trở thành đen. Giữ alpha không xóa nền hay tìm các lỗ trong logo.

Nếu bản xem trước chủ yếu đen, trước tiên so sánh một vùng đồng nhất đã biết với một ranh giới đã biết. Đen có thể là đáp ứng 0 hợp lệ. Để kiểm tra thay đổi độ sáng có dấu quanh sắc độ giữa, thử bias="0.5"; tài liệu tham khảo bias giải thích độ lệch được cộng sau phép chia. Điều đó thay đổi phạm vi hiển thị, không phải hình học SVG.

Kiểm tra đường biên riêng với hình

Giữ edgeMode="duplicate" cho phép so sánh ban đầu. Nó kéo dài các giá trị pixel biên khi mẫu lân cận nằm ngoài đầu vào. none dùng mẫu RGBA có giá trị 0; wrap lấy mẫu từ biên đối diện. Đây là các quy tắc khác nhau trong tài liệu tham khảo edgeMode.

Trên tấm thẻ trắng đục của chúng tôi, chỉ đổi duplicate thành none đã tạo ra khung sáng ở bên ngoài thẻ. Ranh giới đó thuộc hình chữ nhật ảnh, không phải hình thoi. So sánh tệp không có bộ lọc trước khi xem khung là đường bao của hình.

Đặc tả Filter Effects định nghĩa điểm đích của nhân và hành vi lấy mẫu. Ở đây targetX="1" và targetY="1" đặt tâm nhân 3 × 3. Mã khởi đầu này không đặt kernelUnitLength. Đừng cho rằng mẫu lân cận luôn cách một đơn vị người dùng SVG ở mọi kích thước hiển thị; hãy kiểm tra bản kết xuất bàn giao.

Dùng làm sắc nét làm đối chứng, không để phục hồi độ mờ

Để giữ hình có màu tô trong khi nhấn mạnh thay đổi cục bộ, chỉ thay kernelMatrix bằng:

0 -1  0
-1 5 -1
0 -1  0

Tổng bằng 1. Giá trị kênh đồng nhất c trả về 5c - 4c = c với divisor 1 và bias 0. Trong mẫu của chúng tôi, mẫu xám đặc giữ ở 64, còn pixel ranh giới thay đổi. Giữ preserveAlpha="true" và edgeMode="duplicate" cho phép so sánh này.

Làm sắc nét có thể nhấn mạnh nhiễu và quầng sáng cùng với các ranh giới hữu ích. Nó không khôi phục chi tiết nguồn đã mất trước khi ảnh đến bộ lọc. Nếu bản xem trước phóng lớn trông kém, hãy quay về ảnh gốc thay vì xem nhân mạnh hơn là cách thay thế độ phân giải nguồn.

Kiểm tra tệp trước khi gọi đó là kết quả đồ lại vector

Mã khởi đầu được công bố chứa <image> có href bắt đầu bằng data:image/png. Tài liệu tham khảo phần tử image mô tả tài nguyên raster và SVG mà phần tử này có thể hiển thị. Ở đây loại phương tiện xác định raster nhúng; bộ lọc cạnh giữ phần tử đó nguyên vị trí.

Để so sánh, bản chính được tạo độc lập dùng đường dẫn phức hợp này trên một hình chữ nhật trắng:

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
  <rect width="48" height="48" fill="white"/>
  <path d="M24 6 L42 24 L24 42 L6 24 Z M24 17 L31 24 L24 31 L17 24 Z"
        fill="#404040" fill-rule="evenodd"/>
</svg>

Những tọa độ đó được viết riêng. Chúng không được khôi phục từ ảnh đã lọc, và hình pixel cùng đối chứng hình học không nhất thiết khớp ở mọi mẫu ranh giới. Hướng dẫn kiểm tra raster nhúng giải thích cách kiểm tra SVG hỗn hợp mà không chỉ dựa vào phóng đại.

Với hình web, giữ bản chính SVG không có bộ lọc và dùng bản sao hiển thị có bộ lọc khi hiệu ứng phục vụ thiết kế. Với đường dẫn để chỉnh sửa hoặc sản xuất, kiểm tra đường bao nguồn thực và khoảng trống bên trong. Hướng dẫn chuyển hình nét thành SVG trình bày công việc hình học đó.

PerfectVector phù hợp khi hình ban đầu là PNG hoặc JPG phẳng và bạn cần các hình nguồn có thể chỉnh sửa. Chuyển ảnh gốc thành SVG, kiểm tra đường bao và khoảng trống bên trong, rồi giữ kết quả sạch làm bản chính. Bản xem trước cạnh thành công không thay thế bước kiểm tra đó. Hướng dẫn vector hóa giải thích sự khác biệt giữa dựng lại đường dẫn và áp dụng hiệu ứng ảnh.

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

Phát hiện cạnh SVG feConvolveMatrix có tạo đường dẫn vector không? Không. Nó tính một hiệu ứng pixel được kết xuất. PNG nhúng trong ví dụ này vẫn là phần tử image; đường bao có thể chỉnh sửa cần hình học được vẽ hoặc đồ lại riêng.

Tại sao bộ lọc cạnh làm hình của tôi biến mất? Kiểm tra preserveAlpha. Thiết lập false mặc định của nó cũng lọc alpha. Trong mẫu đục này, nhân có tổng bằng 0 làm kết quả được kiểm tra trở nên trong suốt. Giữ alpha đã khôi phục bản xem trước đục.

preserveAlpha có xóa nền trắng không? Không. Nó giữ alpha nguồn. Nền trắng đục vẫn đục ngay cả khi màu sau lọc trở thành đen. Xóa nền và dựng lại đường dẫn là các công việc riêng.

Tại sao bộ lọc cạnh vẽ khung quanh ảnh? Kiểm tra edgeMode và hình chữ nhật đầu vào. Dùng mẫu có giá trị 0 bên ngoài tấm thẻ trắng đục của chúng tôi tạo ra đường biên ngoài sáng. Xử lý biên duplicate tránh được đường biên đó trong mẫu này.

Nguồn tham khảo

1. MDN: feConvolveMatrix — tích chập vùng pixel lân cận và xử lý màu mặc định.
2. MDN: divisor — chuẩn hóa và giá trị mặc định khi tổng bằng 0.
3. MDN: filter — định nghĩa và áp dụng hiệu ứng bộ lọc.
4. MDN: preserveAlpha — xử lý chỉ màu so với xử lý có alpha.
5. MDN: bias — dịch đáp ứng sau phép chia.
6. MDN: edgeMode — xử lý biên duplicate, wrap và giá trị 0.
7. W3C: Filter Effects, feConvolveMatrix — quy tắc điểm đích và lấy mẫu.
8. MDN: image — nội dung ảnh raster và SVG được tham chiếu.