> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # ตรวจขอบ SVG: ตัวอย่างด้วย feConvolveMatrix > สร้างตัวอย่างขอบ SVG ด้วย feConvolveMatrix วินิจฉัยปัญหาอัลฟาและกรอบ เทียบเคอร์เนลเพิ่มความคม และตรวจว่าต้นฉบับมีเส้นจริงหรือไม่ Source: https://perfectvector.com/th/blog/svg-convolution-edge-preview Language: th Author: Irene Kim Published: 2026-10-02T08:00:00+09:00 Updated: 2026-10-02T08:00:00+09:00 การตรวจขอบ SVG ด้วย `feConvolveMatrix` เปลี่ยนพิกเซลเรนเดอร์รอบขอบเขตสี มันสร้างภาพตัวอย่างขอบจาก PNG ภายใน SVG ได้ แต่ไม่ได้สร้างเส้นขอบที่แก้ไขได้ แยกเรื่องนี้ให้ชัดเมื่องานถัดไปคือแก้โลโก้ เตรียมภาพลายเส้น หรือสร้างภาพเว็บ การทดสอบแรกที่มีประโยชน์คือภาพเทาขนาดเล็กที่มีรูปทรงรู้แน่ ใช้เคอร์เนลขอบแบบสมมาตร เก็บอัลฟา และเทียบกับต้นฉบับที่ไม่เปลี่ยน แล้วตรวจองค์ประกอบ SVG ขอบที่ดูคมขึ้นไม่ได้ยืนยันว่าภาพกลายเป็นรูปทรงเวกเตอร์ ## เริ่มด้วยตัวอย่างขอบที่ควบคุมตัวแปร [เอกสาร `feConvolveMatrix`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feConvolveMatrix) อธิบายคอนโวลูชันเป็นการคำนวณพิกเซลอินพุตกับเพื่อนบ้าน เคอร์เนล 3 × 3 นี้ลบเพื่อนบ้านแปดจุดออกจากค่ากลางแปดเท่า: ```text -1 -1 -1 -1 8 -1 -1 -1 -1 ``` สัมประสิทธิ์รวมกันได้ศูนย์ ในพื้นที่สม่ำเสมอผลตอบสนองเป็นศูนย์ ส่วนจุดเปลี่ยนความสว่างอาจเป็นบวกหรือลบ เมื่อใช้ `bias="0"` ผลลบถูกตัดที่ขีดล่างสี ตัวอย่างจึงไม่แสดงทั้งสองด้านของทุกขอบเท่ากัน ตัวอย่างระบุ `divisor="1"` ชัดเจน [เอกสาร divisor](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/divisor) อธิบายการหารปรับด้วยค่านี้และค่าเริ่มต้น 1 สำหรับเคอร์เนลผลรวมศูนย์ อีกทั้งตั้ง `color-interpolation-filters="sRGB"` เพื่อใช้ค่าช่อง sRGB แทนการประมวลผล linearRGB เริ่มต้นขององค์ประกอบ บันทึกไฟล์ครบและอยู่ในตัวนี้เป็น `edge-preview.svg` แล้วเปิดในเบราว์เซอร์ PNG ฝังตัวคือรูปข้าวหลามตัดเทาต้นฉบับ 48 × 48 บนกระดาษขาวทึบ กลางเป็นขาว ไม่ใช่โปร่งใส ```xml ``` นิยามฟิลเตอร์มีผลเพราะภาพอ้างถึงด้วย `filter="url(#effect)"` [เอกสารฟิลเตอร์ SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) อธิบายว่านิยามเองไม่ได้ถูกวาด พื้นที่ที่ระบุครอบคลุมต้นฉบับ 48 × 48 นี้ ภาพอื่นต้องตรวจพื้นที่ของตนเอง ## สิ่งที่เปลี่ยนในการทดสอบเบราว์เซอร์ เราตรวจตัวอย่างต้นฉบับหกไฟล์ใน Chrome ที่ 48 และ 192 พิกเซล CSS ห้าไฟล์มีภาพ PNG ฝังตัวหนึ่งภาพและไม่มีเส้น ไฟล์ที่หกเป็นเวกเตอร์ที่วาดด้วยมือแยกต่างหาก เป็นตัวควบคุมรูปทรง ไม่ใช่ผลการใส่ฟิลเตอร์หรือลอก PNG | ตัวอย่าง | ลักษณะที่เห็น | ค่าที่อ่านจากจุดสม่ำเสมอ | | -------------------------- | ------------------------------------------- | -------------------------------------- | | PNG ต้นฉบับใน SVG | รูปเทาที่กลางและกระดาษเป็นขาว | เทาทึบ: RGBA 64, 64, 64, 255 | | เคอร์เนลขอบ เก็บอัลฟา | พื้นดำมีการตอบสนองขอบ เส้นขอบจางที่ขนาดใหญ่ | กลางและมุม: RGBA 0, 0, 0, 255 | | เคอร์เนลขอบ กรองอัลฟาด้วย | ผลโปร่งใสในไฟล์ทดสอบนี้ | กลาง มุม และจุดทึบ: RGBA 0, 0, 0, 0 | | ตัวควบคุมเพิ่มความคม | รูปที่เติมสียังอยู่ แต่พิกเซลขอบเปลี่ยน | เทาทึบยังเป็น RGBA 64, 64, 64, 255 | | เคอร์เนลขอบ ใช้ขอบค่าศูนย์ | เกิดกรอบนอกรอบสว่าง | มุม: RGBA 255, 255, 255, 255 | | เส้นควบคุมวาดมือ | รูปเรขาคณิตสะอาดและช่องในบนกระดาษขาว | หนึ่งองค์ประกอบเส้น ไม่มีองค์ประกอบภาพ | ตัวอย่าง RGBA มาจากการอ่าน Canvas 48 × 48 ของ SVG เรนเดอร์แต่ละไฟล์ ตัวอย่างที่แสดงตรวจแยกที่ทั้งสองขนาด นี่เป็นข้อสังเกตสำหรับต้นฉบับและเบราว์เซอร์นี้ ไม่ใช่การรับประกันความเข้ากันได้หรืออ่านง่าย การขยายภาพตัวอย่างที่อิงแรสเตอร์ไม่ได้กู้เส้นขอบสะอาดขึ้น **การตอบสนองพิกเซลกับรูปทรงแก้ไขได้** ![ภาพแนวคิดเทียบรูปข้าวหลามตัดเทาที่แสดงการตอบสนองขอบพิกเซลกับวงข้าวหลามตัดปะการังที่วาดแยกและโหนดแก้ไข](https://perfectvector.com/blog/svg-convolution-edge-preview/pixels-and-paths.webp) *ภาพอธิบาย: ตัวอย่างขอบพิกเซลกับเส้นที่แก้ไขได้มีรูปแบบแทนข้อมูลต่างกัน ไม่ใช่ภาพหน้าจอเบราว์เซอร์หรือผลการแปลง* ## แก้ผลหายโดยไม่ลบกระดาษ `preserveAlpha` มีค่าเริ่มต้น false เมื่อใช้ค่านี้ เคอร์เนลประมวลผลอัลฟาด้วย อินพุตทึบของเรามีอัลฟา 1 ทุกจุด เคอร์เนลขอบผลรวมศูนย์จึงหักล้างอัลฟาสม่ำเสมอพร้อมสีสม่ำเสมอ ผลจึงหายในการทดสอบที่ตรวจ การตั้ง `preserveAlpha="true"` เก็บอัลฟาต้นฉบับขณะประมวลผลสี [เอกสาร preserveAlpha](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/preserveAlpha) อธิบายความต่าง สำหรับการทดสอบนี้มันคืนตัวอย่างขอบทึบ และยังเก็บกระดาษทึบกับกลางขาวให้ทึบ แม้สีหลังกรองกลายเป็นดำ การเก็บอัลฟาไม่ได้ลบพื้นหลังหรือหาช่องในโลโก้ หากตัวอย่างส่วนใหญ่ดำ ให้เทียบพื้นที่สม่ำเสมอที่รู้กับขอบที่รู้ก่อน ดำอาจเป็นผลตอบสนองศูนย์ที่ถูกต้อง หากต้องการตรวจการเปลี่ยนความสว่างแบบมีเครื่องหมายรอบโทนกลาง ลอง `bias="0.5"` [เอกสาร bias](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/bias) อธิบายระยะเพิ่มหลังหาร สิ่งนี้เปลี่ยนช่วงแสดง ไม่ใช่รูปทรง SVG ## ตรวจขอบภาพแยกจากตัวงาน เก็บ `edgeMode="duplicate"` สำหรับการเทียบแรก มันขยายค่าพิกเซลริมเมื่อจุดเพื่อนบ้านอยู่นอกอินพุต `none` ใช้ตัวอย่าง RGBA ค่าศูนย์ ส่วน `wrap` ใช้ตัวอย่างจากริมฝั่งตรงข้าม กฎเหล่านี้ต่างกันตาม[เอกสาร edgeMode](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/edgeMode) ในบัตรขาวทึบของเรา การเปลี่ยนเฉพาะ `duplicate` เป็น `none` ทำให้เกิดกรอบสว่างด้านนอกบัตร ขอบนี้เป็นของสี่เหลี่ยมภาพ ไม่ใช่รูปข้าวหลามตัด เทียบไฟล์ไม่ใส่ฟิลเตอร์ก่อนถือว่ากรอบเป็นเส้นขอบงาน [ข้อกำหนด Filter Effects](https://www.w3.org/TR/filter-effects-1/#feConvolveMatrixElement) ระบุเป้าหมายเคอร์เนลและพฤติกรรมเลือกตัวอย่าง ที่นี่ `targetX="1"` และ `targetY="1"` จัดกลางเคอร์เนล 3 × 3 โค้ดเริ่มต้นไม่ได้ตั้ง `kernelUnitLength` อย่าคิดว่าตัวอย่างเพื่อนบ้านจะห่างหนึ่งหน่วยผู้ใช้ SVG เสมอที่ทุกขนาดแสดง ให้ตรวจผลเรนเดอร์ที่ส่งจริง ## ใช้การเพิ่มความคมเป็นตัวควบคุม ไม่ใช่กู้ความเบลอ หากต้องการเก็บภาพเติมสีและเน้นความเปลี่ยนเฉพาะจุด แทนเฉพาะ `kernelMatrix` ด้วย: ```text 0 -1 0 -1 5 -1 0 -1 0 ``` ผลรวมคือ 1 ค่าช่องสม่ำเสมอ `c` คืน `5c - 4c = c` เมื่อ divisor 1 และ bias 0 ในไฟล์ทดสอบของเรา จุดเทาทึบยังเป็น 64 แต่พิกเซลขอบเปลี่ยน เก็บ `preserveAlpha="true"` และ `edgeMode="duplicate"` สำหรับการเทียบนี้ การเพิ่มความคมอาจเน้นนอยส์และรัศมีขอบพร้อมขอบที่มีประโยชน์ ไม่ได้กู้รายละเอียดต้นทางที่หายก่อนภาพถึงฟิลเตอร์ หากภาพขยายดูไม่ดี ให้กลับไปต้นฉบับแทนคิดว่าเคอร์เนลแรงขึ้นแทนความละเอียดต้นทางได้ ## ตรวจไฟล์ก่อนเรียกว่าลอกลายเวกเตอร์ ตัวอย่างเริ่มต้นที่เผยแพร่มี `` ซึ่ง `href` เริ่มด้วย `data:image/png` [เอกสารองค์ประกอบ image](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/image) อธิบายทรัพยากรแรสเตอร์และ SVG ที่แสดงได้ ที่นี่ชนิดสื่อระบุแรสเตอร์ฝังตัว ฟิลเตอร์ขอบยังคงองค์ประกอบนั้นไว้ สำหรับเปรียบเทียบ ต้นฉบับที่วาดแยกใช้เส้นประกอบนี้บนสี่เหลี่ยมขาว: ```xml ``` พิกัดเหล่านั้นเขียนแยก ไม่ได้กู้จากภาพที่กรอง และภาพพิกเซลกับตัวควบคุมรูปทรงไม่จำเป็นต้องตรงกันทุกจุดขอบ [คู่มือตรวจแรสเตอร์ฝังตัว](https://perfectvector.com/th/blog/svg-contains-raster-image) อธิบายการตรวจ SVG ผสมโดยไม่พึ่งซูมอย่างเดียว สำหรับภาพเว็บ เก็บต้นฉบับ SVG ไม่ใส่ฟิลเตอร์ และใช้สำเนาแสดงผลใส่ฟิลเตอร์เมื่อเข้ากับการออกแบบ สำหรับแก้ไขหรือเส้นผลิต ตรวจเส้นขอบต้นทางจริงกับช่องด้านใน [คู่มือลายเส้นเป็น SVG](https://perfectvector.com/th/blog/line-art-to-svg) ครอบคลุมงานรูปทรงนั้น PerfectVector เหมาะเมื่อเริ่มจาก PNG หรือ JPG แบนและต้องการรูปทรงต้นทางที่แก้ไขได้ [แปลงภาพต้นฉบับเป็น SVG](https://perfectvector.com/th/image-to-vector) ตรวจเส้นขอบและช่องด้านใน แล้วเก็บผลสะอาดเป็นต้นฉบับหลัก ตัวอย่างขอบที่สำเร็จไม่แทนการตรวจนั้น [คู่มือแปลงเวกเตอร์](https://perfectvector.com/th/blog/what-is-image-vectorization) อธิบายความต่างของการสร้างเส้นใหม่กับการใส่ผลภาพ ## คำถามที่พบบ่อย **การตรวจขอบ SVG feConvolveMatrix สร้างเส้นเวกเตอร์หรือไม่?** ไม่ มันคำนวณผลพิกเซลเรนเดอร์ PNG ฝังในตัวอย่างนี้ยังเป็นองค์ประกอบภาพ เส้นขอบแก้ไขได้ต้องใช้รูปทรงที่วาดหรือลอกแยก **ทำไมฟิลเตอร์ขอบทำให้ภาพหาย?** ตรวจ preserveAlpha ค่าเริ่มต้น false กรองอัลฟาด้วย ในไฟล์ทึบนี้เคอร์เนลผลรวมศูนย์ทำให้ผลที่ตรวจโปร่งใส การเก็บอัลฟาคืนภาพตัวอย่างทึบ **preserveAlpha ลบพื้นหลังขาวหรือไม่?** ไม่ มันเก็บอัลฟาต้นฉบับ พื้นหลังขาวทึบยังทึบแม้สีหลังกรองเป็นดำ การลบพื้นหลังกับสร้างเส้นใหม่เป็นคนละงาน **ทำไมฟิลเตอร์ขอบวาดกรอบรอบภาพ?** ตรวจ edgeMode และสี่เหลี่ยมอินพุต การใช้ตัวอย่างค่าศูนย์นอกบัตรขาวทึบของเราสร้างกรอบนอกสว่าง การทำขอบแบบ duplicate หลีกเลี่ยงกรอบนั้นในไฟล์ทดสอบนี้ ## แหล่งข้อมูล 1. [MDN: feConvolveMatrix](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feConvolveMatrix) — คอนโวลูชันเพื่อนบ้านพิกเซลและการประมวลผลสีเริ่มต้น 2. [MDN: divisor](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/divisor) — การปรับด้วยการหารและค่าเริ่มต้นผลรวมศูนย์ 3. [MDN: filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) — นิยามและการใช้ผลฟิลเตอร์ 4. [MDN: preserveAlpha](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/preserveAlpha) — การประมวลผลเฉพาะสีกับรวมอัลฟา 5. [MDN: bias](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/bias) — การเลื่อนผลหลังหาร 6. [MDN: edgeMode](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/edgeMode) — การจัดการขอบแบบ duplicate, wrap และค่าศูนย์ 7. [W3C: Filter Effects, feConvolveMatrix](https://www.w3.org/TR/filter-effects-1/#feConvolveMatrixElement) — กฎเป้าหมายและการเลือกตัวอย่าง 8. [MDN: image](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/image) — เนื้อหาภาพแรสเตอร์และ SVG ที่อ้างอิง ## Explore - [Read the HTML article](https://perfectvector.com/th/blog/svg-convolution-edge-preview) - [ไอคอน SVG ใน MapLibre: ตรวจพิกเซลและขนาดสัญลักษณ์](https://perfectvector.com/th/blog/maplibre-svg-symbol-image.md) - [โลโก้ SVG ใน Satori: เก็บภาพไว้ในการ์ดแบรนด์](https://perfectvector.com/th/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)