Kết cấu hạt SVG: giữ nhiễu bên trong hình của bạn

Để thêm hạt vào hình minh họa SVG, hãy tạo nhiễu bằng feTurbulence, biến nó thành lớp phủ đơn sắc mờ và tổng hợp lớp phủ đó bên trong SourceAlpha. Hợp nhất nó lên trên SourceGraphic để màu tô gốc vẫn nhìn thấy. Cách này thêm kết cấu được kết xuất trong khi giữ nguyên hình học đường dẫn của hình.

Chỉ dùng phần tử tạo nhiễu sẽ cho kết quả khác: nó lấp đầy vùng con của phần tử bộ lọc, thay vì đi theo đường viền hình. Đó là lý do một chiếc lá có thể biến thành mảng nhiễu hình chữ nhật. Tài liệu tham khảo feTurbulence của MDN mô tả hành vi đó.

Với hình minh họa web, các tệp bàn giao hữu ích là phiên bản hiển thị có kết cấu và bản chính sạch. Hạt do bộ lọc này tạo ra không phải tập hợp các chấm hay đường bao cắt có thể chỉnh sửa.

Tách hình dạng khỏi hiệu ứng bề mặt

Bắt đầu với một đường dẫn có màu tô đơn giản, vốn đã trông đúng khi chưa có hạt. Sửa đường viền, các khe hở và màu trước khi thêm hiệu ứng. Bộ lọc sẽ không sửa hình học đó.

Ba trạng thái dưới đây giải thích vấn đề ranh giới:

Ranh giới rất quan trọng

SourceGraphic cung cấp phần tử đang được áp dụng bộ lọc. SourceAlpha cung cấp kênh alpha của phần tử đó. Bộ lọc hoạt động trên một ảnh của hình; nó không viết lại các lệnh đường dẫn. Những đầu vào này và sơ đồ bộ lọc được định nghĩa trong đặc tả Filter Effects của W3C.

Nếu hình ban đầu đã có các vùng trong suốt, chúng cũng ảnh hưởng đến phạm vi giới hạn. SourceAlpha đi theo độ đục được kết xuất thực tế, không phải một hộp bao ngoài ước đoán.

Sao chép ví dụ hạt SVG hoàn chỉnh

Lưu mã này thành tệp .svg và mở trong trình duyệt. Nó chứa một đường dẫn lá do chúng tôi tạo, seed nhiễu cho kết quả xác định, lớp phủ tối và bước giới hạn rõ ràng. Khe chéo là một phần của đường dẫn nên vẫn trong suốt trong phiên bản có kết cấu.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <defs>
    <filter id="grain" x="-10%" y="-10%" width="120%" height="120%"
            color-interpolation-filters="sRGB">
      <feTurbulence type="fractalNoise" baseFrequency="0.65"
                    numOctaves="2" seed="8" result="noise"/>
      <feColorMatrix in="noise" type="matrix" values="0 0 0 0 0
        0 0 0 0 0
        0 0 0 0 0
        0 0 0 0.28 0" result="ink"/>
      <feComposite in="ink" in2="SourceAlpha" operator="in" result="inside"/>
      <feMerge>
        <feMergeNode in="SourceGraphic"/>
        <feMergeNode in="inside"/>
      </feMerge>
    </filter>
  </defs>
  <path d="M36 142C40 70 104 26 164 30C164 100 120 150 60 156L38 180L28 170L52 146C80 112 112 78 146 46C104 78 74 110 54 140Z" fill="#e76b50" filter="url(#grain)"/>
</svg>

Bộ lọc làm bốn việc:

1. feTurbulence tạo nhiễu và đặt tên là noise.
2. Ma trận đặt đỏ, xanh lá và xanh lam thành 0. Hàng cuối nhân alpha của nhiễu với 0.28, tạo lớp phủ đen mờ tên ink.
3. feComposite với operator="in" giữ lớp phủ ở nơi SourceAlpha tồn tại.
4. feMerge vẽ hình gốc trước, rồi lớp phủ đã giới hạn lên trên.

Tài liệu tham khảo feColorMatrix của MDN giải thích cách ma trận năm cột biến đổi màu và alpha. Ở đây nó thay đổi ảnh nhiễu, không phải màu tô của lá. Tài liệu tham khảo feComposite của MDN giải thích phép in được dùng để giới hạn lớp phủ theo đầu vào thứ hai.

Giá trị 0.28 là điểm khởi đầu cho chiếc lá màu san hô này, không phải thiết lập hạt dùng chung cho mọi trường hợp. Giảm nếu kết cấu làm hình bị xỉn; tăng nếu hạt biến mất ở kích thước hiển thị dự kiến. Hạt từ lớp phủ đen làm màu tô tối hơn. Nó sẽ không tạo các đốm sáng nhìn thấy được trên họa tiết đen.

Với các phép màu và alpha để đổi màu hình có sẵn, xem hướng dẫn feColorMatrix riêng. Để làm sắc một cạnh trong suốt có sẵn, xem ngưỡng alpha SVG. Cả hai phép này đều không cung cấp nguồn nhiễu được tạo ra dùng ở đây.

Kiểm tra kết quả ở kích thước người xem sẽ thấy

Chúng tôi tạo ba phiên bản của đường dẫn gốc này: không có bộ lọc, bộ lọc chỉ chứa phần tử tạo nhiễu và sơ đồ hạt được giới hạn hoàn chỉnh ở trên. Chúng tôi kiểm tra các phiên bản được kết xuất trong Chrome ở 120 × 120 và 360 × 360 pixel CSS, dùng cùng viewBox 0 0 200 200.

DOM trình duyệt chứa một đường dẫn trong mỗi mẫu. Cả sáu thuộc tính d đều giống hệt. Điều đó xác lập giới hạn của ví dụ: bề mặt được kết xuất thay đổi và không có đường dẫn đốm nào được thêm. Đây là mẫu kiểm thử trình duyệt do chúng tôi tạo, không phải đầu ra từ PerfectVector hay trình chỉnh sửa vector gốc.

Bản xem trước lớn giúp kiểm tra hiệu ứng, nhưng phiên bản nhỏ quyết định hình còn dễ nhận ra hay không. Giữ cả hai kích thước trong quá trình xem xét. Tăng kích thước hiển thị với cùng viewBox cũng thay đổi tỷ lệ biểu kiến của kết cấu; đừng cho rằng một bản xem trước đại diện cho mọi cách dùng.

Tinh chỉnh hạt từng thông số một

Với hình minh họa nhỏ cho thẻ web, hãy bắt đầu bằng các giá trị trong ví dụ. Sau đó thay một tham số, so sánh cùng hai kích thước hiển thị và giữ bản sao phiên bản bạn thích.

baseFrequency nhận một giá trị cho cả hai trục hoặc hai giá trị cho tần số ngang và dọc. Tài liệu tham khảo baseFrequency của MDN mô tả sự khác biệt đó. Bắt đầu với một giá trị cho chiếc lá này; các giá trị không bằng nhau là lựa chọn có chủ đích cho kết cấu có hướng.

numOctaves kiểm soát số octave của nhiễu, như được mô tả trong tài liệu tham khảo numOctaves của MDN. Thêm octave không có nghĩa thêm đường dẫn vector. Chỉ dùng khi chúng cải thiện bề mặt hiển thị ở kích thước bạn cần.

Ví dụ đặt color-interpolation-filters="sRGB" một cách tường minh. Giữ thiết lập đó khi so sánh các phương án để thay đổi trong xử lý màu không gây nhiễu cho việc so sánh hạt.

Sửa mảng chữ nhật, mất màu tô hoặc cạnh bẩn

Kết cấu tạo thành mảng chữ nhật. Kiểm tra đầu ra cuối của bộ lọc. Nếu kết thúc bằng feTurbulence, nó đang trả về ảnh nhiễu. Khôi phục ma trận, phép tổng hợp SourceAlpha và bước hợp nhất. Tăng hình chữ nhật bộ lọc chỉ cho nhiễu chưa bị giới hạn thêm chỗ.

Màu của lá biến mất. Kiểm tra nút hợp nhất đầu tiên có dùng SourceGraphic không. Chỉ kết quả cuối inside sẽ chứa lớp phủ tối, không có màu tô san hô gốc. Cũng kiểm tra chính tả và chữ hoa, chữ thường của từng tham chiếu result được đặt tên và in.

Nhiễu vẫn còn trong khe trong suốt. Xác nhận đầu vào tổng hợp thứ hai là SourceAlpha, không phải nhiễu chữ nhật hay nền đục. Áp dụng bộ lọc cho hình bạn muốn thêm kết cấu. Đưa nền đục vào nhóm được lọc sẽ thay đổi đầu vào alpha.

Một phần đầu ra bị cắt. Kiểm tra x, y, width và height trên bộ lọc. Các thuộc tính này đặt vùng bộ lọc khả dụng, như mô tả trong tài liệu tham khảo filter của MDN. Ví dụ chừa thêm một ít chỗ. Vùng rộng hơn không thể sửa bước giới hạn bị thiếu và cũng không khắc phục việc cắt xén do một vùng chứa riêng gây ra.

Hình nhỏ trông bết. Trước tiên giảm alpha lớp phủ, rồi so sánh tần số và số octave. Nếu kết cấu vẫn làm hỏng dáng bao, hãy bàn giao phiên bản sạch ở kích thước đó.

Giữ bản chính sạch để bàn giao

Với bản chính không có bộ lọc, xóa filter="url(#grain)" khỏi đường dẫn và xóa định nghĩa bộ lọc hiện không còn dùng. Giữ d của đường dẫn, màu tô và viewBox. Mở riêng tệp đó và xác nhận lá cùng khe khớp với phiên bản sạch gốc.

Với ứng dụng web, kiểm tra phiên bản có kết cấu trong các trình duyệt và đúng phương thức nhúng bạn sẽ triển khai. Nếu lặp SVG nội tuyến này trên một trang, đặt ID riêng cho mỗi bộ lọc và cập nhật tham chiếu url(#...). Ví dụ độc lập dùng một ID vì chỉ chứa một bản.

Với nơi sử dụng cần hình thức raster chính xác, xuất bản xem trước raster ở kích thước yêu cầu và kiểm tra tại đó. Với quy trình cần hình học có thể chỉnh sửa hay cắt, bàn giao đường dẫn sạch và làm rõ hạt là hiệu ứng hiển thị. Đừng mô tả nhiễu bộ lọc là đốm vector và đừng hứa rằng trình chỉnh sửa, bộ xuất PDF hay máy cắt về sau sẽ tái hiện nó. Kiểm thử đích thực tế.

Nếu chủ đích cần các đốm chỉnh sửa riêng từng cái, đó là một công việc hình học khác. Nó cũng cần quyết định về dọn dẹp; xem vì sao SVG có quá nhiều nút trước khi đồ lại kết cấu thành hàng loạt đường bao nhỏ. Giữ hạt từ tranh raster là một vấn đề khởi đầu khác, được trình bày trong chuyển tranh màu nước thành vector.

Khi nào vector hóa hữu ích

Nếu họa tiết sạch chỉ còn ở dạng PNG hoặc JPG, hãy chuyển nguồn đó thành hình SVG có thể chỉnh sửa trước khi thêm bộ lọc trình duyệt. Trước hết kiểm tra dáng bao và khe đã khôi phục trong phiên bản sạch. PerfectVector cung cấp bước raster thành vector; sơ đồ tạo hạt theo thủ tục trong hướng dẫn này là một cách xử lý SVG riêng bạn thêm về sau.

Đã có bản chính dựa trên đường dẫn? Hãy dùng trực tiếp. Không cần chuyển đổi lần thứ hai cho công việc bộ lọc. Hướng dẫn vector hóa ảnh giải thích bước khôi phục nguồn nếu bạn cần.

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

Tại sao feTurbulence tạo hình chữ nhật thay vì đi theo hình của tôi? Nhiễu lấp đầy vùng con của phần tử bộ lọc. Tổng hợp nó bên trong SourceAlpha và hợp nhất lên trên SourceGraphic để giới hạn lớp phủ trong hình trong khi giữ màu tô.

Hạt SVG có thêm nút vào đường dẫn của tôi không? Bộ lọc này không thêm đường dẫn đốm. Trong mẫu kiểm thử trình duyệt gốc, cả sáu mẫu giữ một đường dẫn với dữ liệu d giống hệt; bộ lọc thay đổi bề mặt được kết xuất.

Tôi nên bắt đầu với thiết lập hạt nào? Với ví dụ lá gốc, bắt đầu bằng fractalNoise, baseFrequency 0.65, hai octave, seed 8 và hệ số nhân alpha lớp phủ đen 0.28. So sánh ở kích thước hiển thị thực và điều chỉnh từng thiết lập một.

Tôi có thể dùng hiệu ứng hạt làm tệp cắt không? Kết cấu được tạo không phải hình học cắt có thể chỉnh sửa. Giữ bản chính đường dẫn không có bộ lọc riêng và kiểm tra hình học trong quy trình cắt thực tế.

Nguồn tham khảo

1. MDN: feTurbulence — Tạo nhiễu và vùng con của phần tử.
2. W3C: Cây phần tử bộ lọc — SourceGraphic, SourceAlpha và xử lý ảnh bằng bộ lọc.
3. MDN: feColorMatrix — Các phép ma trận màu và alpha.
4. MDN: feComposite — Giới hạn bằng toán tử in.
5. MDN: baseFrequency — Giá trị tần số một trục và hai trục.
6. MDN: numOctaves — Các lớp chi tiết nhiễu.
7. MDN: filter — Các thuộc tính vùng bộ lọc.

Nếu hình minh họa web cần bản chính sạch khôi phục từ raster, hãy bắt đầu bằng chuyển ảnh thành vector, xem xét các đường dẫn và thêm hạt vào một bản sao hiển thị riêng.