> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.
# Phát hiện cạnh SVG: bản xem trước feConvolveMatrix
> Tạo bản xem trước cạnh SVG bằng feConvolveMatrix, chẩn đoán lỗi alpha và đường biên, so sánh nhân làm sắc nét và kiểm tra nguồn có đường dẫn thực hay không.
Source: https://perfectvector.com/vi/blog/svg-convolution-edge-preview
Language: vi
Author: Irene Kim
Published: 2026-10-02T08:00:00+09:00
Updated: 2026-10-02T08:00:00+09:00
Phát hiện cạnh SVG bằng `feConvolveMatrix` thay đổi các pixel được kết xuất quanh ranh giới màu. Nó có thể tạo bản xem trước cạnh từ PNG bên trong SVG, nhưng không tạo đường bao có thể chỉnh sửa. Hãy phân biệt rõ khi công việc tiếp theo là chỉnh sửa logo, chuẩn bị hình nét hoặc xây dựng hình cho web.
Một phép thử đầu tiên hữu ích là ảnh thang xám nhỏ có hình dạng đã biết. Áp dụng nhân phát hiện cạnh đối xứng, giữ alpha và so sánh với nguồn không đổi. Sau đó kiểm tra các phần tử SVG. Ranh giới trông sắc hơn không chứng minh rằng ảnh đã trở thành hình học vector.
## Bắt đầu bằng bản xem trước cạnh có kiểm soát
[Tài liệu tham khảo `feConvolveMatrix`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feConvolveMatrix) mô tả phép tích chập là phép tính liên quan đến một pixel đầu vào và các pixel lân cận. Nhân 3 × 3 này lấy tám lần giá trị giữa trừ đi tám pixel lân cận:
```text
-1 -1 -1
-1 8 -1
-1 -1 -1
```
Tổng các hệ số bằng 0. Trong vùng đồng nhất, đáp ứng bằng 0; ở chỗ thay đổi độ sáng, nó có thể dương hoặc âm. Với `bias="0"`, các kết quả âm bị cắt ở giới hạn màu thấp nhất. Vì vậy bản xem trước không thể hiện đều cả hai phía của mọi ranh giới.
Ví dụ dùng `divisor="1"` tường minh. [Tài liệu tham khảo divisor](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/divisor) mô tả việc chuẩn hóa theo giá trị đó và giá trị mặc định 1 cho nhân có tổng bằng 0. Nó cũng đặt `color-interpolation-filters="sRGB"` để ví dụ dùng giá trị kênh sRGB thay vì xử lý linearRGB mặc định của phần tử.
Lưu tệp hoàn chỉnh, độc lập này thành `edge-preview.svg` và mở trong trình duyệt. PNG được nhúng là hình thoi thang xám gốc 48 × 48 trên giấy trắng đục. Phần giữa là màu trắng, không phải trong suốt.
```xml
```
Định nghĩa bộ lọc chỉ có hiệu lực vì ảnh tham chiếu đến nó qua `filter="url(#effect)"`. [Tài liệu tham khảo bộ lọc SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) giải thích rằng bản thân định nghĩa không được vẽ. Vùng tường minh bao phủ nguồn 48 × 48 này; hình khác cần kiểm tra vùng riêng.
## Những thay đổi trong kiểm thử trình duyệt
Chúng tôi kiểm tra sáu mẫu gốc trong Chrome ở 48 và 192 pixel CSS. Năm tệp chứa một ảnh PNG nhúng và không có đường dẫn. Tệp thứ sáu là bản vector tương ứng được vẽ tay độc lập. Nó là đối chứng hình học, không phải kết quả áp dụng bộ lọc hay đồ lại PNG.
| Mẫu | Hình thức quan sát | Giá trị đọc lại ở mẫu đồng nhất |
| ---------------------------- | ----------------------------------------------------------------------- | ---------------------------------------- |
| PNG gốc trong SVG | Hình thoi xám với phần giữa và giấy trắng | Xám đặc: RGBA 64, 64, 64, 255 |
| Nhân cạnh, giữ alpha | Trường đen có đáp ứng cạnh; đường viền mờ ở kích thước hiển thị lớn hơn | Giữa và góc: RGBA 0, 0, 0, 255 |
| Nhân cạnh, lọc cả alpha | Kết quả trong suốt trong mẫu này | Giữa, góc và mẫu đặc: RGBA 0, 0, 0, 0 |
| Đối chứng làm sắc nét | Giữ hình thoi có màu tô, thay đổi pixel ranh giới | Xám đặc vẫn là RGBA 64, 64, 64, 255 |
| Nhân cạnh, biên có giá trị 0 | Xuất hiện khung ngoài sáng | Góc: RGBA 255, 255, 255, 255 |
| Đối chứng đường dẫn vẽ tay | Hình thoi hình học sạch và khoảng trống bên trong trên giấy trắng | Một phần tử path, không có phần tử image |
Các mẫu RGBA được lấy bằng cách đọc lại Canvas 48 × 48 của từng SVG đã kết xuất. Các mẫu hiển thị được kiểm tra riêng ở cả hai kích thước. Đây là quan sát cho nguồn và trình duyệt này, không phải bảo đảm tương thích hay khả năng nhận diện. Phóng to bản xem trước dựa trên raster không khôi phục đường bao sạch hơn.
**Đáp ứng pixel và hình học có thể sửa**
*Minh họa: bản xem trước cạnh pixel và đường dẫn có thể chỉnh sửa dùng các cách biểu diễn khác nhau. Đây không phải ảnh chụp trình duyệt hay kết quả chuyển đổi.*
## Sửa kết quả biến mất mà không xóa giấy
`preserveAlpha` mặc định là false. Với thiết lập đó, nhân cũng xử lý alpha. Đầu vào đục của chúng tôi có alpha 1 ở mọi nơi, nên nhân cạnh tổng bằng 0 triệt tiêu alpha đồng nhất cùng với màu đồng nhất. Kết quả biến mất trong mẫu đã kiểm tra.
Đặt `preserveAlpha="true"` giữ alpha nguồn trong khi xử lý màu. [Tài liệu tham khảo preserveAlpha](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/preserveAlpha) mô tả sự khác biệt đó. Trong thử nghiệm này, nó khôi phục bản xem trước cạnh đục. Nó cũng giữ giấy đục và phần giữa trắng ở trạng thái đục dù màu sau lọc trở thành đen. Giữ alpha không xóa nền hay tìm các lỗ trong logo.
Nếu bản xem trước chủ yếu đen, trước tiên so sánh một vùng đồng nhất đã biết với một ranh giới đã biết. Đen có thể là đáp ứng 0 hợp lệ. Để kiểm tra thay đổi độ sáng có dấu quanh sắc độ giữa, thử `bias="0.5"`; [tài liệu tham khảo bias](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/bias) giải thích độ lệch được cộng sau phép chia. Điều đó thay đổi phạm vi hiển thị, không phải hình học SVG.
## Kiểm tra đường biên riêng với hình
Giữ `edgeMode="duplicate"` cho phép so sánh ban đầu. Nó kéo dài các giá trị pixel biên khi mẫu lân cận nằm ngoài đầu vào. `none` dùng mẫu RGBA có giá trị 0; `wrap` lấy mẫu từ biên đối diện. Đây là các quy tắc khác nhau trong [tài liệu tham khảo edgeMode](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/edgeMode).
Trên tấm thẻ trắng đục của chúng tôi, chỉ đổi `duplicate` thành `none` đã tạo ra khung sáng ở bên ngoài thẻ. Ranh giới đó thuộc hình chữ nhật ảnh, không phải hình thoi. So sánh tệp không có bộ lọc trước khi xem khung là đường bao của hình.
[Đặc tả Filter Effects](https://www.w3.org/TR/filter-effects-1/#feConvolveMatrixElement) định nghĩa điểm đích của nhân và hành vi lấy mẫu. Ở đây `targetX="1"` và `targetY="1"` đặt tâm nhân 3 × 3. Mã khởi đầu này không đặt `kernelUnitLength`. Đừng cho rằng mẫu lân cận luôn cách một đơn vị người dùng SVG ở mọi kích thước hiển thị; hãy kiểm tra bản kết xuất bàn giao.
## Dùng làm sắc nét làm đối chứng, không để phục hồi độ mờ
Để giữ hình có màu tô trong khi nhấn mạnh thay đổi cục bộ, chỉ thay `kernelMatrix` bằng:
```text
0 -1 0
-1 5 -1
0 -1 0
```
Tổng bằng 1. Giá trị kênh đồng nhất `c` trả về `5c - 4c = c` với divisor 1 và bias 0. Trong mẫu của chúng tôi, mẫu xám đặc giữ ở 64, còn pixel ranh giới thay đổi. Giữ `preserveAlpha="true"` và `edgeMode="duplicate"` cho phép so sánh này.
Làm sắc nét có thể nhấn mạnh nhiễu và quầng sáng cùng với các ranh giới hữu ích. Nó không khôi phục chi tiết nguồn đã mất trước khi ảnh đến bộ lọc. Nếu bản xem trước phóng lớn trông kém, hãy quay về ảnh gốc thay vì xem nhân mạnh hơn là cách thay thế độ phân giải nguồn.
## Kiểm tra tệp trước khi gọi đó là kết quả đồ lại vector
Mã khởi đầu được công bố chứa `` có `href` bắt đầu bằng `data:image/png`. [Tài liệu tham khảo phần tử image](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/image) mô tả tài nguyên raster và SVG mà phần tử này có thể hiển thị. Ở đây loại phương tiện xác định raster nhúng; bộ lọc cạnh giữ phần tử đó nguyên vị trí.
Để so sánh, bản chính được tạo độc lập dùng đường dẫn phức hợp này trên một hình chữ nhật trắng:
```xml
```
Những tọa độ đó được viết riêng. Chúng không được khôi phục từ ảnh đã lọc, và hình pixel cùng đối chứng hình học không nhất thiết khớp ở mọi mẫu ranh giới. [Hướng dẫn kiểm tra raster nhúng](https://perfectvector.com/vi/blog/svg-contains-raster-image) giải thích cách kiểm tra SVG hỗn hợp mà không chỉ dựa vào phóng đại.
Với hình web, giữ bản chính SVG không có bộ lọc và dùng bản sao hiển thị có bộ lọc khi hiệu ứng phục vụ thiết kế. Với đường dẫn để chỉnh sửa hoặc sản xuất, kiểm tra đường bao nguồn thực và khoảng trống bên trong. [Hướng dẫn chuyển hình nét thành SVG](https://perfectvector.com/vi/blog/line-art-to-svg) trình bày công việc hình học đó.
PerfectVector phù hợp khi hình ban đầu là PNG hoặc JPG phẳng và bạn cần các hình nguồn có thể chỉnh sửa. [Chuyển ảnh gốc thành SVG](https://perfectvector.com/vi/image-to-vector), kiểm tra đường bao và khoảng trống bên trong, rồi giữ kết quả sạch làm bản chính. Bản xem trước cạnh thành công không thay thế bước kiểm tra đó. [Hướng dẫn vector hóa](https://perfectvector.com/vi/blog/what-is-image-vectorization) giải thích sự khác biệt giữa dựng lại đường dẫn và áp dụng hiệu ứng ảnh.
## Câu hỏi thường gặp
**Phát hiện cạnh SVG feConvolveMatrix có tạo đường dẫn vector không?**
Không. Nó tính một hiệu ứng pixel được kết xuất. PNG nhúng trong ví dụ này vẫn là phần tử image; đường bao có thể chỉnh sửa cần hình học được vẽ hoặc đồ lại riêng.
**Tại sao bộ lọc cạnh làm hình của tôi biến mất?**
Kiểm tra preserveAlpha. Thiết lập false mặc định của nó cũng lọc alpha. Trong mẫu đục này, nhân có tổng bằng 0 làm kết quả được kiểm tra trở nên trong suốt. Giữ alpha đã khôi phục bản xem trước đục.
**preserveAlpha có xóa nền trắng không?**
Không. Nó giữ alpha nguồn. Nền trắng đục vẫn đục ngay cả khi màu sau lọc trở thành đen. Xóa nền và dựng lại đường dẫn là các công việc riêng.
**Tại sao bộ lọc cạnh vẽ khung quanh ảnh?**
Kiểm tra edgeMode và hình chữ nhật đầu vào. Dùng mẫu có giá trị 0 bên ngoài tấm thẻ trắng đục của chúng tôi tạo ra đường biên ngoài sáng. Xử lý biên duplicate tránh được đường biên đó trong mẫu này.
## Nguồn tham khảo
1. [MDN: feConvolveMatrix](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feConvolveMatrix) — tích chập vùng pixel lân cận và xử lý màu mặc định.
2. [MDN: divisor](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/divisor) — chuẩn hóa và giá trị mặc định khi tổng bằng 0.
3. [MDN: filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) — định nghĩa và áp dụng hiệu ứng bộ lọc.
4. [MDN: preserveAlpha](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/preserveAlpha) — xử lý chỉ màu so với xử lý có alpha.
5. [MDN: bias](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/bias) — dịch đáp ứng sau phép chia.
6. [MDN: edgeMode](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/edgeMode) — xử lý biên duplicate, wrap và giá trị 0.
7. [W3C: Filter Effects, feConvolveMatrix](https://www.w3.org/TR/filter-effects-1/#feConvolveMatrixElement) — quy tắc điểm đích và lấy mẫu.
8. [MDN: image](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/image) — nội dung ảnh raster và SVG được tham chiếu.
## Explore
- [Read the HTML article](https://perfectvector.com/vi/blog/svg-convolution-edge-preview)
- [Biểu tượng SVG MapLibre: pixel và kích thước ký hiệu](https://perfectvector.com/vi/blog/maplibre-svg-symbol-image.md)
- [Logo SVG Satori: giữ hình trong thẻ mang thương hiệu](https://perfectvector.com/vi/blog/satori-svg-logo.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)