Bộ lọc ánh sáng SVG: tạo bóng và giữ khoảng trống

Để logo SVG có vẻ dập nổi, làm mềm SourceAlpha, đưa alpha đó vào feDiffuseLighting hoặc feSpecularLighting, kết hợp ánh sáng với màu nguồn, rồi kết thúc bằng phép tổng hợp in với SourceAlpha gốc. Bước cuối giữ hiệu ứng bên trong biểu trưng và bảo toàn khoảng trống. Lưu bản sao đường dẫn không có bộ lọc làm bản chính phẳng.

Hiệu ứng thay đổi hình thức được kết xuất. Nó không tạo khối nổi, đường bao mới hay tệp sản xuất. Hướng dẫn này dùng một biểu trưng vòng hình thoi gốc, được tạo trực tiếp bằng SVG, để so sánh các giai đoạn chiếu sáng và alpha của chúng.

Dùng alpha làm bề mặt chiếu sáng

feDiffuseLighting dùng alpha đầu vào làm bản đồ độ gồ và tạo bản đồ ánh sáng đục. Hình thức phụ thuộc vào ánh sáng và bề mặt đầu vào. Tài liệu tham khảo ánh sáng khuếch tán của MDN giải thích hành vi đó. Trong ví dụ này, các phần đục của vòng tạo vùng cao, còn khoảng trống tạo vùng thấp.

Chúng tôi chỉ làm mờ SourceAlpha, giữ đường dẫn có màu gốc sẵn dưới dạng SourceGraphic. Alpha được làm mềm tạo chuyển tiếp dần ở cạnh trong và ngoài cho phép tính ánh sáng. feGaussianBlur điều khiển việc làm mềm qua stdDeviation; mã khởi đầu dùng 2.5 trong bộ lọc có không gian người dùng được đặt tường minh.

Bản đồ khuếch tán thô vẽ khắp vùng bộ lọc, kể cả nơi đường dẫn gốc trong suốt. Điều đó hữu ích để kiểm tra phép tính ánh sáng, nhưng cho dáng bao cuối sai với biểu trưng rỗng của chúng tôi. Giữ alpha gốc cho bước giới hạn cuối.

Sao chép mã khởi đầu biểu trưng có bóng hoàn chỉnh

Lưu thành emblem-lighting.svg và mở trong trình duyệt. Nó có một đường dẫn phức hợp và không phụ thuộc vào ảnh bên ngoài.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <defs>
    <filter id="relief" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse" x="0" y="0" width="200" height="200" color-interpolation-filters="linearRGB">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2.5" result="bump"/>
      <feDiffuseLighting in="bump" surfaceScale="4" diffuseConstant="1" lighting-color="#ffffff" result="diffuse">
      <feDistantLight azimuth="225" elevation="45"/>
      </feDiffuseLighting>
      <feComposite in="SourceGraphic" in2="diffuse" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" result="lit"/>
      <feSpecularLighting in="bump" surfaceScale="4" specularConstant=".7" specularExponent="18" lighting-color="#ffffff" result="shine">
      <feDistantLight azimuth="225" elevation="45"/>
      </feSpecularLighting>
      <feComposite in="lit" in2="shine" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="paint"/>
      <feComposite in="paint" in2="SourceAlpha" operator="in"/>
    </filter>
  </defs>
  <path d="M100 20 L180 100 L100 180 L20 100 Z M100 58 L142 100 L100 142 L58 100 Z" fill="#dc795f" fill-rule="evenodd" filter="url(#relief)"/>
</svg>

Bộ lọc đặt tên cho từng kết quả trung gian để bạn kiểm tra vai trò:

Phép nhân số học dùng k1="1" với các hệ số khác bằng 0. Phép cộng dùng k2="1" k3="1" với các hệ số khác bằng 0. feComposite định nghĩa các phép pixel này và toán tử in. Giữ đầu vào thứ hai của phép tổng hợp cuối là SourceAlpha, không phải bump đã làm mờ, khi bạn muốn ranh giới gốc.

Bộ lọc dùng color-interpolation-filters="linearRGB" tường minh, vốn là mặc định cho các phép bộ lọc SVG. Điều này khác với nội suy màu tô thông thường. Tài liệu tham khảo color-interpolation-filters của MDN mô tả sự phân biệt. Mọi biến thể chiếu sáng được đo ở đây đều dùng cùng thiết lập.

So sánh bóng khuếch tán với độ bóng phản chiếu

Ánh sáng khuếch tán làm tối và sáng màu gốc theo bản đồ ánh sáng. Giai đoạn phản chiếu thêm thành phần phản xạ. feSpecularLighting mô tả đầu ra phụ thuộc ánh sáng và các tham số. Mã khởi đầu dùng hằng số .7 vừa phải và số mũ 18; tinh chỉnh sau khi có hiệu ứng khuếch tán hữu ích.

Để kiểm tra riêng khuếch tán, giữ các giai đoạn làm mờ, khuếch tán và nhân, rồi đổi đầu vào thứ nhất của phép tổng hợp cuối từ paint thành lit. Xóa giai đoạn phản chiếu và cộng.

Để kiểm tra riêng phản chiếu trên màu phẳng, giữ giai đoạn làm mờ và phản chiếu. Đổi đầu vào thứ nhất của phép cộng từ lit thành SourceGraphic, xóa giai đoạn khuếch tán và nhân, đồng thời giữ phép tổng hợp cuối paint in SourceAlpha. Cả hai phép so sánh giữ nguyên đường dẫn gốc và hướng sáng.

Nguồn sáng xa của chúng tôi dùng azimuth="225" elevation="45". feDistantLight là phần tử nguồn sáng cho cả hai phần tử chiếu sáng. Các góc tính bằng độ, không phải vị trí pixel. Thay hướng ở cả hai giai đoạn chiếu sáng cùng lúc khi so sánh hiệu ứng kết hợp.

Các đối chứng trình duyệt gốc cho thấy điều gì

Chúng tôi mở sáu mẫu SVG tự tạo trong Chrome ở 80 × 80 và 160 × 160 pixel CSS. Bản chính phẳng, các hiệu ứng khuếch tán, phản chiếu và kết hợp vẫn khác nhau rõ rệt. surfaceScale khuếch tán cao hơn làm tương phản cạnh mạnh hơn trong mẫu này. Đối chứng khuếch tán thô hiển thị hình chữ nhật xám với khoảng trống bị lấp thay vì dáng bao trong suốt.

Các lần đọc pixel riêng dùng kích thước canvas nguồn 200 × 200. Mẫu dải ở (100, 38), mẫu cạnh ở (101, 22), khoảng trống ở (100, 100) và mẫu ngoài ở (10, 10).

Mọi tệp giữ cùng giá trị d, một đường dẫn và không có phần tử image. Hiệu ứng màn hình không tạo thêm hình học nguồn. Đây là quan sát từ trình duyệt và nguồn này, không phải bảo đảm về bộ kết xuất khác hay hành vi nhập của trình chỉnh sửa.

Chiếu sáng và bản chính phẳng

Tinh chỉnh trường độ cao trước khi đổi đường bao

surfaceScale đặt tỷ lệ độ cao bề mặt dùng trong phép tính ánh sáng. Nó không mở rộng đường dẫn. Các đối chứng khuếch tán 4 và 12 của chúng tôi chỉ đổi giá trị này: dải phẳng lấy mẫu vẫn cùng màu, còn mẫu cạnh tối hơn ở 12.

Dùng trình tự có kiểm soát:

1. Xác lập dáng bao trong suốt và khoảng trống gốc khi không có bộ lọc.
2. Chọn độ làm mềm alpha và hướng sáng.
3. So sánh surfaceScale nhỏ và lớn hơn trong khi giữ mọi thứ khác cố định.
4. Thêm độ bóng phản chiếu, rồi giới hạn màu bằng alpha gốc làm thao tác cuối.
5. Kiểm tra hình bàn giao ở kích thước hiển thị thực và trên nền tương phản.

Đặc tả Filter Effects hiện tại định nghĩa alpha đầu ra khuếch tán bằng 1 ở mọi nơi và alpha đầu ra phản chiếu từ các thành phần màu. Không nên cho rằng đầu ra nào cũng giữ khoảng trống gốc. Nó cũng định nghĩa phép tính pháp tuyến từ các mẫu alpha lân cận. Mã khởi đầu này không đặt kernelUnitLength; kiểm tra hai kích thước của chúng tôi không xác lập việc lấy mẫu ánh sáng độc lập với kích thước.

Nếu bộ đệm trung gian của một giai đoạn chiếu sáng xuất hiện làm kết quả cuối, kiểm tra các đầu vào được đặt tên và phần tử cuối. Với vòng này, trả trực tiếp bản đồ ánh sáng khuếch tán là cách chúng tôi tái hiện hình chữ nhật xám đục. Bước cuối in SourceAlpha là có chủ đích, ngay cả khi phép nhân trước đó dường như đã giữ độ trong suốt.

Nếu độ mờ hay hiệu ứng bị cắt ở hình chữ nhật bất ngờ, kiểm tra vùng bộ lọc theo hướng dẫn cắt xén SVG. Tách vùng đó khỏi bước giới hạn theo alpha nguồn cuối: một thứ giới hạn vùng làm việc của hiệu ứng, thứ còn lại khôi phục dáng bao mong muốn.

Bàn giao hiệu ứng màn hình cùng bản chính phẳng

Xóa thuộc tính filter của đường dẫn để kiểm tra bản chính phẳng. Nó giữ cùng đường bao ngoài, khoảng trống trong và màu tô san hô đặc. Giữ bản sao đó cạnh phiên bản web có bóng để các lần sửa sau có thể bắt đầu từ hình học gốc.

Với hoàn thiện vật lý, dùng quy trình chuẩn bị riêng như hình vector cho dập nổi. Thiết lập chiếu sáng màn hình cung cấp hình thức thay vì hình học khuôn hay độ sâu nổi được đo. Hướng dẫn đường viền hình thái SVG giải thích một cách xử lý ranh giới dựa trên bộ lọc khác mà không xem đó là đường dẫn được dựng lại.

Nếu logo chỉ tồn tại dưới dạng PNG hoặc JPG, hãy vector hóa logo bằng PerfectVector, kiểm tra đường bao ngoài và khoảng trống đã khôi phục, rồi giữ bản chính phẳng sạch trước khi thêm chiếu sáng trong quy trình SVG. Dịch vụ khôi phục hình học vector; chuỗi khuếch tán/phản chiếu này là hiệu ứng hiển thị riêng được tạo ra. Nếu đã có bản chính vector, áp dụng và xem xét bộ lọc trực tiếp.

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

Bộ lọc ánh sáng SVG có thể làm logo trông như dập nổi không? Chúng có thể mô phỏng bóng và vùng sáng từ trường độ cao dựa trên alpha. Hiệu ứng kết xuất không tạo phần nổi vật lý, đường bao đường dẫn bổ sung hay tệp khuôn sản xuất.

Tại sao hiệu ứng ánh sáng SVG lấp khoảng trống trong suốt? Bản đồ ánh sáng khuếch tán thô đục trên khắp vùng bộ lọc. Kết hợp ánh sáng với màu nguồn và kết thúc bằng phép tổng hợp in với SourceAlpha gốc để giới hạn hiệu ứng trong dáng bao gốc.

Khác biệt giữa ánh sáng khuếch tán và phản chiếu SVG là gì? Ánh sáng khuếch tán cung cấp chiếu sáng rộng để tạo bóng cho màu gốc. Ánh sáng phản chiếu cung cấp thành phần phản xạ để thêm độ bóng. Cả hai dùng alpha đầu vào làm bản đồ độ gồ và phụ thuộc vào thiết lập nguồn sáng cùng bề mặt đã chọn.

surfaceScale có đổi đường dẫn logo không? Không. Nó đổi tỷ lệ độ cao dùng trong phép tính ánh sáng. Trong hai đối chứng khuếch tán của chúng tôi, dữ liệu đường dẫn giữ nguyên trong khi tương phản cạnh kết xuất thay đổi.

Nguồn tham khảo

1. MDN feDiffuseLighting — Đầu vào bản đồ độ gồ alpha và đầu ra ánh sáng khuếch tán đục.
2. MDN feGaussianBlur — Đầu vào được làm mềm và các điểm cần lưu ý về vùng bộ lọc.
3. MDN feComposite — Phép nhân/cộng số học và giới hạn theo alpha nguồn.
4. MDN color-interpolation-filters — Mặc định linearRGB cho phép bộ lọc.
5. MDN feSpecularLighting — Thành phần phản xạ và các tùy chọn.
6. MDN feDistantLight — Nguồn sáng cho cả hai phần tử chiếu sáng.
7. MDN surfaceScale — Tỷ lệ độ cao bề mặt cho phép tính.
8. Đặc tả ánh sáng Filter Effects — Alpha chiếu sáng, đơn vị góc và phép tính mẫu lân cận.