Ngưỡng alpha SVG: tạo điểm cắt cứng cho độ trong suốt

Để đặt ngưỡng alpha tại 0.5, dùng feComponentTransfer với <feFuncA type="discrete" tableValues="0 1"/>. Alpha đầu vào dưới 0.5 trở thành trong suốt; alpha bằng hoặc lớn hơn ngưỡng đó trở thành hoàn toàn đục. Bỏ các hàm RGB nếu bạn muốn giữ ánh xạ đồng nhất cho những kênh này.

Bộ lọc đó thay đổi alpha khi hiển thị, không thay đổi cấu trúc bên dưới của hình. Nó không thể xóa nền trắng đục, vì pixel trắng có alpha 1 vượt qua cùng ngưỡng với pixel màu đục. PNG được nhúng trong SVG cũng vẫn là ảnh raster.

So sánh pixel nguồn đã biết trước khi chọn ngưỡng

Chúng tôi tạo một PNG RGBA 8 bit nhỏ với alpha thay đổi dần, một lỗ vuông trong suốt, một mảng trắng đục và sáu ô màu có giá trị được kiểm soát. Mỗi SVG trong thử nghiệm nhúng cùng các byte PNG vào một phần tử ảnh. Các phiên bản không lọc, discrete và table nội suy chỉ khác nhau ở cấu hình bộ lọc.

Nền caro bên dưới thuộc trang bao quanh, nằm ngoài SVG. Nó giúp nhìn thấy độ trong suốt thay vì giả làm một phần kênh alpha của ảnh.

Trang thử nghiệm tải các phiên bản SVG thực tế, vẽ chúng lên canvas của trình duyệt và lấy mẫu bên trong sáu ô màu. Các byte alpha đầu ra là:

Giá trị alpha chuẩn hóa bằng các byte này chia cho 255. Vì vậy, 127/255 nhỏ hơn 0.5 một chút, còn 128/255 lớn hơn một chút. Những mẫu này nằm ở hai phía của ngưỡng toán học; một byte PNG 8 bit không biểu diễn chính xác 0.5.

Lỗ trong ảnh nguồn có alpha đo được là 0 ở mọi phiên bản. Mảng trắng có giá trị 255 ở mọi phiên bản. Đây là quan sát từ mẫu thử được kiểm soát này, không phải khẳng định rằng mọi hình bất kỳ đều sẽ giữ lại tất cả chi tiết mong muốn sau khi áp dụng ngưỡng.

Áp dụng hàm chuyển đổi cho alpha

Bộ lọc cốt lõi khá ngắn:

<filter id="alpha" filterUnits="userSpaceOnUse"
  x="0" y="0" width="320" height="240">
  <feComponentTransfer in="SourceGraphic">
    <feFuncA type="discrete" tableValues="0 1"/>
  </feComponentTransfer>
</filter>

Áp dụng nó cho ảnh bằng filter="url(#alpha)". Vùng lọc của mẫu này bao phủ toàn bộ ảnh nguồn và khung nhìn 320 × 240. Hãy dùng giới hạn phù hợp với hình của bạn thay vì sao chép kích thước đó vào một tệp không liên quan.

Tài liệu feFuncA của MDN xác định đây là hàm chuyển đổi alpha bên trong feComponentTransfer. Tài liệu component-transfer mô tả việc ánh xạ lại từng kênh và tính toán trên các giá trị màu chưa nhân trước với alpha.

Đặc tả Filter Effects hiện tại quy định ánh xạ đồng nhất cho các hàm kênh không được chỉ định. Mã của chúng tôi bỏ feFuncR, feFuncG và feFuncB; nó chỉ thay đổi hàm chuyển đổi alpha. Điều đó không có nghĩa màu nhìn thấy trên nền sẽ giống hệt: thay đổi alpha sẽ thay đổi diện mạo sau khi ghép với nền.

<svg xmlns="http://www.w3.org/2000/svg" width="320" height="240" viewBox="0 0 320 240">
<defs><filter id="alpha" filterUnits="userSpaceOnUse"
  x="0" y="0" width="320" height="240">
  <feComponentTransfer in="SourceGraphic">
    <feFuncA type="discrete" tableValues="0 1"/>
  </feComponentTransfer>
</filter></defs>
<image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAADwCAYAAABxLb1rAAAJ6ElEQVR4nO3UVexsZxXG4eLBnRXcIVD3tKey66krENwhuEPQHjTFneAOwR2CM2hw6ql7m3rx4If3kgsCf+ierpk9z5c89+/6Ln4b1bphI4BV1D4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPWKOrxdXjGnHNuFZcO64T143rxfXjBnHDuFHcOG4SN42bxc3jFnHLuFVU3DpuE7eN28Xt4w5xx7hT3DnuEneNu8Xd4x5xz7hX3Ds2jk1i09gsNo8tYsvYKraObWLb2C62jx1ix1gXO8XOsUvsGkPsFrvHHrFn7BV7xz6xb+wX+8cBcWAcFAfHIXFoHBaHxxFxn7hv3C/uHw+IB8aD4sHxkHhoPCweHo+IR8aj4tHxmHhsPC4eH0+IJ8aT4snxlHhqPC2eHs+IZ8az4tnxnHhuPC+eHy+IF8aL4shYHy+Ol8RL42Xx8nhFHBWvjFfFq+M18dp4Xbw+3hBvjDfFm+Mt8dZ4W7w93hHvjHfFu+M98d54X7w/PhAfjA/Fh+Mj8dH4WHw8PhGfjE/Fp+Mz8dn4XHw+vhBfjC/Fl+Mr8dX4Wnw9vhHfjG/Ft+M7MYvvxvfi+/GD+GH8KH4cP4mfxs/i5/GL+GX8Ko6OY+LYOC6OjxPixDgpTo5T4tQ4LU6PM+LMOCvOjnPi3Dgvzo8L4sK4KC6OS+LSuCwujyvi1/Gb+G38Ln4ff4g/xp/iz/GX+Gv8Lf4e/4gN1d8OASwBFEABFEABFMASQAEUQAEsARRAARTA7gFrJIACKIACKIAlgAIogAIogAJYAiiAAiiAJYACKIACKIACWAIogAIogCWAAiiAAiiAAlgCKIACKIAlgAIogAIogAJYAiiAAiiAJYACKIACuOAEUAAFUAAFsARQAAVQAAVQAEsABVAABbAEUAAFUAAFUABLAAVQAAWwBFAABVAABVAASwAnEcANTa8EsJ0ACqAACqAAlgAKoAAKoAAKYAmgAAqgAJYACqAACqAACmAJoAAKoACWAAqgAAqgAApgCaAACqAAlgAKoAAKoAAKYAmgAAqgAJYACqAACuCCE0ABFEABFMASQAEUQAEUQAEsARRAARTAEkABFEABFEABLAEUQAEUwBJAARRAARRAASwBFEABFMASQAEUQAEUQAEsARRAARTAuvIB7P6b/0YABVAABVAASwAFUAAFsARQAAVQAAVQAEsABVAAF54ACqAACqAAlgAKoAAKoAAK4BoJoAAKoAAKYAmgAAqgAJYACqAACqAACmAJoAAK4MITQAFc+QDG0XFMHBvHxfFxQpwYJ8XJcUqcGqfF6XFGnBlnxdlxTpwb58X5cUFcGBfFxXFJXBqXxeVxRQlgOwEUQAEUQAEsARRAARRAARTANRJAARRAARTAEkABFEABLAEUQAEUQAEUwBJAARTAhSeAAiiAAiiAJYACKIACKIACuEYCKIACKIACWAIogAIogCWAAiiAAiiAAlgCKIACuPAEUAAFUAAFsARQAAVQAAVQANdIAAVQAAVQAEsABVAABbAEUAAFUAAFUABLAAVQABeeAAqgAAqgAJYACqAACqAACuAaCaAACqAACmAJoAAKoACWAAqgAAqgAApgCaAACuDCE0ABFEABFMASQAEUQAEUQAFcIwEUQAEUQAEsARRAARTAEkABFEABFMBRArhxbBKbxmaxeWwRW8ZWsXVsE9vGdrF97BA7xrrYKXaOXWLXGGK32D32iD1jr9g79ol9Y7/YPw6IA+OgODgOiUPjsDg8jigBFEABFMASQAEUQAEUQAEsARRAARTAEkABFEABXAICKIACKIACWAIogAIogAIogCWAAiiAAlgCKIACKIACKIAlgAIogAJYAiiAAiiAAiiAJYACKIACWAIogAIogAIogCWAAiiAAlgCKIACKIALTgAFUAAFUABLAAVQAAVQAAWwBFAABVAASwAFUAAFUAAFsARQAAVQAEsABVAABVAABbAEUAAFUABLAAVQAAVQAAWwBFAABVAASwAFUAAFcMEJoAAKoAAKYAmgAAqgAAqgAJYACqAACmAJoAAKoAAKoACWAAqgAApgCaAACqAACqAAlgAKoAAKYAmgAAqgAAqgAJYACqAACmAJoAAKoAAuOAEUQAEUQAEsARRAARRAARTAEkABFEABLAEUQAEUQAEUwBJAARRAASwBFEABFMCJBJDFssgB7P4blkj7AJaSADIJ7QNYWosYwO4/Ycm0D2CpLVIAu/+CJdQ+gKUmgCy19gEsvUUIYPcfsKTaBzAJnQHsvp0l1j6ASRBAllL7ACajI4DdN7Pk2gcwKVdlALtvZQLaBzApAshSaR/A5FwVAey+kYloH8AkzTOA3bcxIe0DmCQBZCm0D2Cy5hHA7puYmPYBTNqYAey+hQlqH8CkCSALrX0AkzdGALtvYKLaB7ASrkwAu7czYe0DWAkCyEJqH8DK+H8C2L2ZiWsfwEr5XwLYvZUV0D6AlSKALJT2AayctQSweyMron0AK+k/BbB7GyukfQArSQBZCO0DWFn/LoDdm1gx7QNYaf8awO4trKD2Aaw0AaRV+wBW3voF2MCKah8A0KV9AECX9gEAXdoHAHRpHwDQpX0AQJf2AQBd2gcAdGkfANClfQBAl/YBC2xoMvYdRzYZ+471Tca+Y9Zk7Ds2NBn1jrE/ZUqGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEcOKGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEcOKGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEEGCZtQ8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKDLPwG8PYVZS9xMPAAAAABJRU5ErkJggg==" width="320" height="240" filter="url(#alpha)"/>
</svg>

Mẫu thử đầy đủ giữ nguyên các byte PNG. Bộ lọc không đổi màu tệp nguồn được lưu hoặc thay nó bằng các đường dẫn. Hướng dẫn nhận diện ảnh raster nhúng giải thích vì sao phần mở rộng .svg bên ngoài không chứng minh được hình học vector.

Phân biệt bước nhảy với bảng nội suy

Cả hai kiểu chuyển đổi đều dùng tableValues, nhưng diễn giải các mục khác nhau. Tài liệu thuộc tính type liệt kê các hàm chuyển đổi có sẵn; tài liệu tableValues mô tả danh sách tra cứu.

Với discrete, mỗi mục chiếm một khoảng đầu vào bằng nhau. Với hai mục 0 1, khoảng đầu tiên là 0 ≤ A < 0.5, khoảng thứ hai là 0.5 ≤ A ≤ 1. Đầu ra nhảy giữa hai giá trị.

Với table, các mục là điểm đầu và cuối của những vùng nội suy tuyến tính. Với 0 1, phép nội suy ánh xạ mỗi alpha đầu vào về chính nó. Đây là phép chuyển đổi đồng nhất, nên cột table đo được của chúng tôi trùng với cột không lọc.

Các công thức khoảng trong đặc tả cũng giải thích những phương án được tài liệu hóa sau:

Ảnh chụp của chúng tôi kiểm tra trường hợp discrete và table có hai mục. Các hàng có bốn mục mô tả ánh xạ trong đặc tả; chúng không phải những phiên bản hình bổ sung đã được đo. Hãy chủ động chọn type thay vì cho rằng danh sách chỉ chứa số không và số một nhất định tạo ra ngưỡng nhị phân.

Tách alpha đầu vào khỏi độ mờ đục áp dụng sau đó

Cung cấp alpha nguồn thực tế cho bộ lọc. Trong mẫu thử của chúng tôi, alpha đó được lưu trong pixel PNG. Với thử nghiệm vector, hãy dùng alpha của màu tô hoặc fill-opacity trước khi áp dụng bộ lọc.

Mô hình ghép lớp của Filter Effects áp dụng bộ lọc trước opacity. Vì vậy, opacity tổng thể trên phần tử hoặc nhóm bao quanh có thể làm giảm độ đục của kết quả sau bộ lọc. Nếu bạn áp dụng ngưỡng cho nguồn rồi ghép kết quả với opacity thấp hơn, hình có thể lại trông bán trong suốt. Hãy loại độ mờ đục áp dụng sau đó khỏi một phép thử ngưỡng có kiểm soát.

Ngưỡng cứng cũng loại bỏ vùng chuyển tiếp bán trong suốt của nguồn. Pixel mờ biến mất, còn pixel bán trong suốt được giữ lại trở thành hoàn toàn đục. Điều đó có thể xóa quầng sáng mềm hoặc mép mảnh mà bạn muốn giữ. Kiểm tra kết quả ở kích thước sử dụng và trên nhiều nền. Alpha đầu ra nhị phân không bảo đảm mép hiển thị cuối cùng không chịu tác động của việc lấy mẫu hoặc ghép lớp.

Nếu độ bán trong suốt là một phần của thiết kế, hãy giữ nó hoặc dùng phép chuyển đổi tăng dần thay vì ép ngưỡng cứng. Với mặt nạ hiển thị chủ động dùng một màu, hướng dẫn mặt nạ CSS cho SVG trình bày một quy trình hiển thị khác.

Màu trắng đục cần được chẩn đoán theo cách khác

Mảng trắng vẫn còn vì alpha của nó hoàn toàn đục. Thao tác này chọn theo alpha, không chọn theo việc pixel trông có màu trắng hay không. Pixel nền hoàn toàn đục không trở thành trong suốt với ánh xạ discrete 0 1 này.

Nếu tệp có nền trắng không mong muốn, trước tiên hãy xác định đó là một hình SVG riêng hay một phần của ảnh raster. Xóa hoặc chỉnh sửa trực tiếp hình vector làm nền không mong muốn. Với PNG có màu trắng nằm sẵn trong pixel, làm sạch ảnh raster nguồn trước khi khôi phục hoặc dùng quy trình xóa nền phù hợp. Hướng dẫn SVG nền trong suốt giải thích các trường hợp đó.

Hãy lưu ý các phần thực sự màu trắng của chủ thể trước khi xóa nền theo màu. Bộ lọc alpha này không thể suy ra vùng trắng nào là nền và vùng nào thuộc hình, cũng không thể khôi phục thông tin màu đã mất khi nguồn được làm phẳng.

Chuẩn bị ảnh raster trong suốt trước khi khôi phục vector

PerfectVector có thể giúp khi thiết kế hoàn thiện chỉ còn ở dạng raster và bạn cần hình học SVG. Trước tiên hãy chuẩn bị PNG thực sự có độ trong suốt, rồi chuyển PNG sang SVG. So sánh bản xem trước trên nền tương phản, kiểm tra dáng bao ngoài và các lỗ, đồng thời kiểm tra tệp tải xuống để phát hiện hình nền không mong muốn.

Ví dụ bộ lọc của chúng tôi là một thử nghiệm hiển thị. Nó không gửi SVG đã lọc để vector hóa và không minh họa một kết quả đồ lại mới. Nếu cần giữ diện mạo raster đã áp dụng ngưỡng, hãy chuẩn bị và xác minh một bản raster thực tế để bàn giao trong trình chỉnh sửa trước khi cân nhắc khôi phục vector. Kiểm tra alpha của bản đó thay vì dựa vào bản xem trước trong trình duyệt.

Dùng trực tiếp bản vector gốc có sẵn. Giữ độ bán trong suốt khi nó mang thông tin thiết kế hữu ích, và vẽ lại biểu tượng đơn giản nếu cách đó dễ bảo trì hơn. Tổng quan về vector hóa ảnh phân biệt việc tái dựng ảnh raster với thay đổi cách hiển thị của SVG có sẵn.

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

Discrete tableValues 0 1 dùng ngưỡng alpha nào? Alpha đầu vào dưới 0.5 được ánh xạ thành 0; alpha bằng hoặc lớn hơn 0.5 được ánh xạ thành 1. Trong các ô mẫu PNG 8 bit được thử nghiệm, byte 127 trở thành trong suốt và byte 128 trở thành đục.

Vì sao tableValues 0 1 không thay đổi độ trong suốt của tôi? Với type table, các mục đó xác định nội suy tuyến tính từ 0 đến 1, tức phép đồng nhất. Dùng type discrete để có ánh xạ hai bước được trình bày ở đây.

Thao tác này có xóa màu trắng hoặc biến PNG thành đường dẫn vector không? Không. Màu trắng hoàn toàn đục vượt qua ngưỡng alpha này. Các phiên bản SVG của chúng tôi vẫn chứa cùng PNG trong một phần tử ảnh và không có đường dẫn nào; làm sạch nền và tái dựng vector là hai công việc riêng.

Nguồn tham khảo

1. W3C — Filter Effects Level 1 — Quy định mặc định đồng nhất, chuyển đổi kênh chưa nhân trước với alpha và công thức khoảng table/discrete.
2. MDN — feComponentTransfer — Giải thích việc ánh xạ lại kênh do thành phần bộ lọc thực hiện.
3. MDN — feFuncA — Xác định hàm chuyển đổi kênh alpha.
4. MDN — type — Liệt kê các kiểu hàm component-transfer và ngữ cảnh thuộc tính của chúng.
5. MDN — tableValues — Mô tả các mục tra cứu dùng cho phép chuyển đổi table và discrete.

Bạn cần hình học vector từ thiết kế raster? Chuẩn bị và chuyển đổi PNG trong suốt, rồi kiểm tra dáng bao ngoài và các lỗ trong bản xem trước, đồng thời xác minh SVG tải xuống trên nền có màu.