> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Kết cấu hạt SVG: giữ nhiễu bên trong hình của bạn > Thêm hạt SVG bằng feTurbulence, giữ nhiễu đơn sắc bên trong SourceAlpha, tinh chỉnh ở hai kích thước và bảo toàn bản chính đường dẫn sạch cho các nơi sử dụng khác. Source: https://perfectvector.com/vi/blog/svg-feturbulence-grain Language: vi Author: Irene Kim Published: 2026-10-01T08:00:00+09:00 Updated: 2026-10-01T08:00:00+09:00 Để 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) 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: | Phiên bản | Đầu ra của bộ lọc | Khi nào nên dùng | | ----------------- | ---------------------------------------------------------- | ----------------------------------------------- | | Hình thuần | Đường dẫn có màu tô gốc | Chỉnh sửa và giữ bản chính sạch | | Chỉ có nhiễu | Ảnh hình chữ nhật được tạo trong vùng bộ lọc | Kiểm tra nguồn nhiễu thay vì bàn giao họa tiết | | Hạt được giới hạn | Hình gốc cộng nhiễu đơn sắc được giới hạn bởi alpha của nó | Phiên bản hiển thị có kết cấu trong trình duyệt | **Ranh giới rất quan trọng** ![Minh họa chiếc lá màu san hô sạch, hạt tràn ra ngoài lá và hạt được giữ bên trong dáng lá sắc nét](https://perfectvector.com/blog/svg-feturbulence-grain/grain-boundary.webp) *Minh họa: hình giữ được nét sạch trong khi nhiễu bị giới hạn trong dáng bao. Sơ đồ khái niệm này không phải ảnh chụp bộ kết xuất SVG hay kết quả vector hóa.* `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](https://drafts.csswg.org/filter-effects/#FilterPrimitiveTree). 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. ```xml ``` 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite) 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](https://perfectvector.com/vi/blog/svg-fecolormatrix) riêng. Để làm sắc một cạnh trong suốt có sẵn, xem [ngưỡng alpha SVG](https://perfectvector.com/vi/blog/svg-alpha-threshold). 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`. | Mục kiểm tra | Phiên bản 120 pixel | Phiên bản 360 pixel | | ----------------- | ------------------------------------------ | ----------------------------------------------- | | Bản chính thuần | Lá màu san hô mượt, khe trong suốt | Cùng đường viền và khe | | Chỉ có nhiễu | Nhiễu chữ nhật thay thế họa tiết nhìn thấy | Nhiễu chữ nhật vẫn hiện ngoài dáng lá | | Hạt được giới hạn | Kết cấu mờ bên trong lá | Kết cấu rõ hơn, khe và vùng xung quanh vẫn sạch | 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. | Thông số | Điều cần quyết định | Cách kiểm tra thực tế | | ------------------------------ | ------------------------------------------- | ------------------------------------------------------------------------------- | | `baseFrequency` | Biến thiên thô hay mịn hơn trong tọa độ SVG | Thử `0.25` cạnh `0.65`; kiểm tra ở kích thước hiển thị thực | | `numOctaves` | Số lớp chi tiết nhiễu cần kết hợp | So sánh `1` và `2` trước khi thêm chi tiết | | `seed` | Mẫu nhiễu sẽ dùng | Giữ cố định khi so sánh các thiết lập khác | | Hệ số nhân alpha trong ma trận | Mức độ lớp phủ đen làm tối màu tô | So sánh `0.15` và `0.28` trên cùng hình | | Vùng bộ lọc | Hình chữ nhật khả dụng cho sơ đồ bộ lọc | Sửa phần đầu ra bị mất mà không dùng hình chữ nhật thay cho giới hạn theo alpha | `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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/baseFrequency) 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/numOctaves). 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter). 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](https://perfectvector.com/vi/blog/svg-too-many-nodes) 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](https://perfectvector.com/vi/blog/watercolor-to-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](https://perfectvector.com/vi/image-to-vector) 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](https://perfectvector.com/vi/blog/what-is-image-vectorization) 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) — Tạo nhiễu và vùng con của phần tử. 2. [W3C: Cây phần tử bộ lọc](https://drafts.csswg.org/filter-effects/#FilterPrimitiveTree) — SourceGraphic, SourceAlpha và xử lý ảnh bằng bộ lọc. 3. [MDN: feColorMatrix](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) — Các phép ma trận màu và alpha. 4. [MDN: feComposite](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite) — Giới hạn bằng toán tử in. 5. [MDN: baseFrequency](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/baseFrequency) — Giá trị tần số một trục và hai trục. 6. [MDN: numOctaves](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/numOctaves) — Các lớp chi tiết nhiễu. 7. [MDN: filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/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](https://perfectvector.com/vi/image-to-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. ## Explore - [Read the HTML article](https://perfectvector.com/vi/blog/svg-feturbulence-grain) - [Nhập SVG vào FontForge: Biến hình vẽ thành đường bao ký tự](https://perfectvector.com/vi/blog/fontforge-import-svg.md) - [Cách đánh giá chất lượng đồ lại vector: bảng chấm điểm](https://perfectvector.com/vi/blog/evaluate-vector-trace-quality.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)