Tạo SVG có hiệu ứng nhiễu
(daniel.do)Thêm hiệu ứng nhiễu vào SVG
- Quan tâm đến việc sự phát triển của công nghệ web ảnh hưởng như thế nào đến thiết kế web
- Việc mật độ điểm ảnh của màn hình tăng lên đã thúc đẩy sự chuyển dịch từ ảnh chụp sang minh họa vector
- Trong các xu hướng thiết kế gần đây, xuất hiện texture nhiễu dùng cho bóng đổ có chất liệu hoặc hiệu ứng ánh sáng
Studio Vellekoop & León
- Sở thích cá nhân với phong cách texture nhiễu và khó khăn khi tái tạo nó bằng SVG
- Sự hứng thú với SVG và quá trình khám phá các cách tạo ra nhiều hiệu ứng khác nhau
- Chia sẻ về sự xuất hiện của SVGO, công cụ tối ưu hóa SVG, và trải nghiệm tự tay viết SVG
Hình cơ bản và gradient
- Có thể dễ dàng vẽ các hình cơ bản như hình tròn hoặc hình chữ nhật trong SVG
- Khi áp dụng gradient, cần gradient thay đổi theo màu cơ sở để tái sử dụng component
- Giới thiệu cách dùng mask và cách định nghĩa hình dạng chỉ một lần bằng
<defs>rồi tham chiếu bằng phần tửuse
Kết quả
- Tạo texture nhiễu nhân tạo bằng bộ lọc
<feTurbulence> - Áp dụng hiệu ứng bộ lọc để loại bỏ biến đổi màu và hòa trộn tự nhiên với màu tô đã chọn
- Cuối cùng đã tạo được minh họa ưng ý, nhưng trên Safari thì được render khác đi
Thông tin bổ sung ngày 7 tháng 12 năm 2023
- Đã gửi bài lên Hacker News và nhận được một số phản hồi
- Giới thiệu một bài viết về chủ đề tương tự trên CSS Tricks do Jimmy Chion viết năm 2021
- Vào thời điểm viết bài, tác giả chưa biết đến bài viết trước đó, nhưng nay đã thêm liên kết như tài liệu bổ sung
Ý kiến của GN⁺
Điều quan trọng nhất trong bài viết này là việc khám phá cách triển khai texture nhiễu bằng SVG, một trong những xu hướng mới nhất của thiết kế web. Nội dung này không chỉ là một chủ đề thú vị với nhà thiết kế và lập trình viên web, mà còn cung cấp thông tin hữu ích cho các kỹ sư phần mềm mới vào nghề muốn học các kỹ thuật thiết kế web hiện đại. Thông qua những ví dụ thực tiễn về tính linh hoạt của thiết kế bằng SVG và các phương pháp tối ưu hóa, độc giả có thể học được cách triển khai hiệu quả các hiệu ứng thiết kế phức tạp.
2 bình luận
Đúng là Safari không làm người ta thất vọng! Quả thật xứng danh là IE của thập niên 2020.
Ý kiến Hacker News
Đã cố dùng SVG để tạo hiệu ứng đổ bóng mà canvas không làm được, nhưng vì bóng bằng CSS không hoạt động trên Safari nên phải dùng bộ lọc gốc của SVG. Do giao diện hiển thị khác với các trình duyệt khác, đã dùng JavaScript để phát hiện Safari và vô hiệu hóa phiên bản CSS.
Phần nền về "âm dương đệ quy" được giải thích trong bài blog đó; có dự định thử nghịch thêm với texture, nhưng việc Safari hiển thị khác đi gây khá nhiều nản lòng. Cũng tự hỏi liệu việc diễn giải SVG có bao giờ được chuẩn hóa hay không.
Cảm thấy bức bối vì không dễ tái hiện một phong cách minh họa cụ thể bằng SVG. Phong cách này được gọi là "dithering", và trang "Grainy Gradients" của CSS-Tricks cũng giải thích cùng kỹ thuật đó. Ngoài ra còn có phương án thay thế là dùng CSS để áp dụng cho toàn bộ hình ảnh.
Đã dùng SVG để tạo một poster hội nghị phức tạp, nhưng việc render lại khác nhau giữa các trình duyệt và chương trình. Có thể nhúng bằng cách include/link SVG, nhưng nếu SVG đó lại chứa SVG khác thì sẽ không hoạt động. Đôi khi trình duyệt không hiển thị hình ảnh được nhúng/liên kết vì vấn đề "bảo mật". Việc chuyển SVG phức tạp sang PDF cũng hay gặp lỗi hết bộ nhớ một cách thiếu nhất quán. Mỗi công cụ chuyển SVG sang PDF lại cho kết quả khác nhau. Các công cụ như Inkscape đôi khi xử lý SVG được nhúng như đồ họa raster.
Các nhiếp ảnh gia chụp phim từng cố hết sức để loại bỏ độ hạt của phim, nhưng các nhiếp ảnh gia kỹ thuật số lại có xu hướng thêm nó trở lại. Trong sự sạch sẽ của ảnh số, những ví dụ như thế này lại có sức hấp dẫn riêng.
Inkscape có thể thêm loại nhiễu này thông qua nhiều hiệu ứng bộ lọc khác nhau, và nếu xuất sang Plain SVG thì có thể thấy việc sử dụng
feTurbulencetrong mã. Ngoài ra cũng so sánh cách Affinity Designer 2 xử lý nhiễu. Trong SVG được xuất ra, nhiễu được nhúng dưới dạng ảnh jpeg base64.Trang web "ApeFest" tạo nhiễu động bằng cách dùng lớp phủ PNG dạng ô được làm chuyển động "ngẫu nhiên" bằng hoạt ảnh CSS (thực tế là di chuyển bằng JS). Về mặt kỹ thuật thì đơn giản nhưng hiệu quả.
Vì giao diện của bộ lọc SVG thay đổi đáng kể tùy theo engine và hệ số scale, nên chỉ dùng chúng ở những chi tiết rất tinh tế và chỉ khi độ chính xác không quá quan trọng. Các bộ lọc như
feDisplacementMapphá hỏng anti-aliasing, khiến một nửa số trường hợp muốn dùng chúng trở nên vô ích.Khuyên không nên dùng làm nền trang. Trước đây từng thử và gặp đủ loại lỗi kỳ quặc trên nhiều thiết bị; với các site lớn thì trang có thể bị treo hẳn hoặc SVG ngừng render khi vượt quá một kích thước nhất định.
Perlin Noise và biến thể tiếp nối của nó là Fractal Noise thực sự rất hiệu quả trong việc tăng cảm giác chân thực hoặc tạo cảm giác "hữu cơ". Ví dụ, nó được dùng rất hiệu quả trong cảnh thoát khỏi hang động của "Aladdin (1992)".
Có quan tâm đến cách tạo hiệu ứng theo kiểu không phụ thuộc vào mức thu phóng. Ngoài ra, liên quan đến việc thêm tính ngẫu nhiên, cũng thắc mắc liệu có cách đặt seed để có thể xác định một kết quả render đúng duy nhất ở một kích thước cho trước hay không.