> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # พื้นผิวเกรน SVG: เก็บนอยส์ไว้ภายในภาพ > เพิ่มเกรน SVG ด้วย feTurbulence จำกัดนอยส์สีเดียวใน SourceAlpha ปรับที่สองขนาด และเก็บเส้นต้นฉบับสะอาดสำหรับปลายทางอื่น Source: https://perfectvector.com/th/blog/svg-feturbulence-grain Language: th Author: Irene Kim Published: 2026-10-01T08:00:00+09:00 Updated: 2026-10-01T08:00:00+09:00 หากต้องการเพิ่มเกรนให้ภาพ SVG ให้สร้างนอยส์ด้วย `feTurbulence` เปลี่ยนเป็นชั้นทับสีเดียวจาง ๆ แล้วประกอบชั้นนั้นภายใน `SourceAlpha` รวมทับ `SourceGraphic` เพื่อให้สีเติมต้นฉบับยังมองเห็น วิธีนี้เพิ่มพื้นผิวที่เรนเดอร์โดยไม่เปลี่ยนรูปทรงเส้นของงาน องค์ประกอบนอยส์เพียงตัวเดียวให้ผลต่างออกไป มันเติมพื้นที่ย่อยขององค์ประกอบฟิลเตอร์แทนการตามเส้นขอบรูป จึงทำให้ใบไม้กลายเป็นปื้นนอยส์สี่เหลี่ยมได้ [เอกสาร feTurbulence ของ MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) อธิบายพฤติกรรมนี้ สำหรับภาพประกอบเว็บ ไฟล์ส่งที่มีประโยชน์คือเวอร์ชันแสดงผลมีพื้นผิวกับต้นฉบับสะอาด เกรนจากฟิลเตอร์นี้ไม่ใช่ชุดจุดที่แก้ไขได้หรือเส้นขอบตัด ## แยกรูปทรงออกจากการแต่งพื้นผิว เริ่มจากเส้นสีเติมเรียบง่ายที่ดูถูกต้องอยู่แล้วโดยไม่ใส่เกรน แก้เส้นขอบ ช่อง และสีก่อนเพิ่มผล ฟิลเตอร์ซ่อมรูปทรงนั้นไม่ได้ สามสถานะต่อไปนี้อธิบายปัญหาขอบเขต: | เวอร์ชัน | ผลที่ฟิลเตอร์ให้ | ใช้เมื่อ | | ------------ | ------------------------------------------ | ---------------------------------------- | | รูปเรียบ | เส้นสีเติมต้นฉบับ | แก้ไขและเก็บต้นฉบับสะอาด | | นอยส์ล้วน | ภาพสร้างสี่เหลี่ยมในพื้นที่ฟิลเตอร์ | ตรวจแหล่งนอยส์แทนการส่งลาย | | เกรนจำกัดขอบ | ภาพต้นฉบับบวกนอยส์สีเดียวที่จำกัดด้วยอัลฟา | เวอร์ชันมีพื้นผิวสำหรับแสดงในเบราว์เซอร์ | **ขอบเขตสำคัญ** ![ภาพอธิบายใบไม้สีปะการังสะอาด เกรนล้นนอกใบ และเกรนที่อยู่ภายในเงารูปร่างใบไม้คมชัด](https://perfectvector.com/blog/svg-feturbulence-grain/grain-boundary.webp) *ภาพอธิบาย: รูปทรงยังสะอาดและนอยส์ถูกจำกัดในเงารูปร่าง แผนภาพแนวคิดนี้ไม่ใช่ภาพหน้าจอตัวเรนเดอร์ SVG หรือผลแปลงเวกเตอร์* `SourceGraphic` ให้องค์ประกอบที่กำลังใส่ฟิลเตอร์ `SourceAlpha` ให้ช่องอัลฟาของมัน ฟิลเตอร์ทำงานกับภาพของงาน ไม่ได้เขียนคำสั่งเส้นใหม่ อินพุตเหล่านี้และกราฟฟิลเตอร์นิยามไว้ใน[ข้อกำหนด Filter Effects ของ W3C](https://drafts.csswg.org/filter-effects/#FilterPrimitiveTree) หากภาพต้นทางมีบริเวณโปร่งใสอยู่แล้ว บริเวณเหล่านั้นมีผลต่อการจำกัดด้วย SourceAlpha ตามความทึบที่เรนเดอร์จริง ไม่ใช่กรอบนอกที่คาดเดา ## คัดลอกตัวอย่างเกรน SVG ครบชุด บันทึกเป็นไฟล์ `.svg` แล้วเปิดในเบราว์เซอร์ ภายในมีเส้นใบไม้ต้นฉบับหนึ่งเส้น seed นอยส์ที่ให้ผลแน่นอน ชั้นทับมืด และขั้นจำกัดขอบชัดเจน ช่องเฉียงเป็นส่วนของเส้นจึงยังโปร่งใสในเวอร์ชันมีพื้นผิว ```xml ``` ฟิลเตอร์ทำสี่หน้าที่: 1. `feTurbulence` สร้างนอยส์และตั้งชื่อ `noise` 2. เมทริกซ์ตั้งแดง เขียว และน้ำเงินเป็นศูนย์ แถวสุดท้ายคูณอัลฟาของนอยส์ด้วย `0.28` สร้างชั้นทับดำจางชื่อ `ink` 3. `feComposite` ที่ใช้ `operator="in"` เก็บชั้นทับในบริเวณที่มี `SourceAlpha` 4. `feMerge` วาดภาพต้นฉบับก่อน แล้ววางชั้นทับที่จำกัดขอบไว้ด้านบน [เอกสาร feColorMatrix ของ MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) อธิบายว่าเมทริกซ์ห้าคอลัมน์แปลงสีและอัลฟาอย่างไร ที่นี่มันเปลี่ยนภาพนอยส์ ไม่ใช่สีเติมใบไม้ [เอกสาร feComposite ของ MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite) อธิบายคำสั่ง `in` ที่ใช้จำกัดชั้นทับตามอินพุตที่สอง ค่า `0.28` เป็นจุดเริ่มสำหรับใบไม้ปะการังนี้ ไม่ใช่ค่าเกรนสากล ลดหากพื้นผิวทำให้ภาพหม่น เพิ่มหากเกรนหายที่ขนาดแสดงเป้าหมาย เกรนชั้นทับดำทำให้สีเติมมืดลง มันจะไม่สร้างจุดสีอ่อนที่เห็นได้บนลายดำ สำหรับการเปลี่ยนสีและอัลฟาของงานที่มีอยู่ ดู[คู่มือ feColorMatrix](https://perfectvector.com/th/blog/svg-fecolormatrix) แยกต่างหาก หากต้องการทำขอบโปร่งใสเดิมให้แข็งขึ้น ดู[ค่าเกณฑ์อัลฟา SVG](https://perfectvector.com/th/blog/svg-alpha-threshold) ทั้งสองคำสั่งไม่ได้ให้แหล่งนอยส์ที่สร้างขึ้นแบบที่ใช้ที่นี่ ## ตรวจผลที่ขนาดที่คนจะเห็น เราทำเส้นต้นฉบับนี้สามเวอร์ชัน ได้แก่ ไม่ใส่ฟิลเตอร์ ฟิลเตอร์ที่มีเพียงองค์ประกอบนอยส์ และกราฟเกรนจำกัดขอบครบชุดข้างต้น ตรวจผลเรนเดอร์ใน Chrome ที่ **120 × 120** และ **360 × 360 พิกเซล CSS** โดยใช้ viewBox `0 0 200 200` เดียวกัน | การตรวจ | เวอร์ชัน 120 พิกเซล | เวอร์ชัน 360 พิกเซล | | ------------ | ----------------------------- | ------------------------------------------- | | ต้นฉบับเรียบ | ใบไม้ปะการังเรียบ ช่องโปร่งใส | เส้นขอบและช่องเดิม | | นอยส์ล้วน | นอยส์สี่เหลี่ยมแทนลายที่เห็น | นอยส์สี่เหลี่ยมยังเห็นนอกเงารูปร่างใบไม้ | | เกรนจำกัดขอบ | พื้นผิวจางภายในใบไม้ | พื้นผิวเห็นชัดขึ้น โดยช่องและบริเวณรอบสะอาด | DOM ของเบราว์เซอร์มีหนึ่งเส้นในทุกตัวอย่าง แอตทริบิวต์ `d` ทั้งหกเหมือนกัน นี่กำหนดขอบเขตของตัวอย่างว่าเปลี่ยนพื้นผิวเรนเดอร์และไม่ได้เพิ่มเส้นจุด เป็นไฟล์ทดสอบเบราว์เซอร์ที่สร้างขึ้น ไม่ใช่ผลจาก PerfectVector หรือโปรแกรมเวกเตอร์จริง ตัวอย่างใหญ่ช่วยตรวจผล แต่เวอร์ชันเล็กตัดสินว่าภาพยังอ่านออกหรือไม่ เก็บทั้งสองขนาดไว้ในการตรวจ การเพิ่มขนาดแสดงด้วย viewBox เดิมยังเปลี่ยนสเกลพื้นผิวที่มองเห็น อย่าคิดว่าหนึ่งตัวอย่างแทนทุกการใช้งาน ## ปรับเกรนทีละตัวควบคุม สำหรับภาพเล็กบนการ์ดเว็บ เริ่มด้วยค่าในตัวอย่าง จากนั้นเปลี่ยนหนึ่งพารามิเตอร์ เทียบสองขนาดแสดงเดิม และเก็บสำเนาเวอร์ชันที่ชอบ | ตัวควบคุม | สิ่งที่ต้องตัดสิน | วิธีตรวจจริง | | --------------------- | ------------------------------------ | ---------------------------------------------- | | `baseFrequency` | ความแปรผันหยาบหรือละเอียดในพิกัด SVG | ลอง `0.25` เทียบ `0.65` และตรวจที่ขนาดแสดงจริง | | `numOctaves` | จำนวนชั้นรายละเอียดนอยส์ที่รวม | เทียบ `1` และ `2` ก่อนเพิ่มรายละเอียด | | `seed` | รูปแบบนอยส์ที่เลือกใช้ | คงค่าเมื่อเทียบการตั้งค่าอื่น | | ตัวคูณอัลฟาในเมทริกซ์ | ชั้นทับดำทำให้สีเติมมืดเท่าใด | เทียบ `0.15` และ `0.28` บนภาพเดียวกัน | | พื้นที่ฟิลเตอร์ | สี่เหลี่ยมที่กราฟฟิลเตอร์ใช้ได้ | แก้ผลลัพธ์หายโดยไม่ใช้กรอบแทนการจำกัดด้วยอัลฟา | `baseFrequency` รับหนึ่งค่าสำหรับทั้งสองแกน หรือสองค่าสำหรับความถี่แนวนอนและแนวตั้ง [เอกสาร baseFrequency ของ MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/baseFrequency) อธิบายความแตกต่าง เริ่มหนึ่งค่าสำหรับใบไม้นี้ ค่าที่ไม่เท่ากันเป็นการเลือกพื้นผิวมีทิศทางโดยตั้งใจ `numOctaves` ควบคุมจำนวนอ็อกเทฟของนอยส์ตาม[เอกสาร numOctaves ของ MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/numOctaves) อ็อกเทฟเพิ่มไม่ใช่เส้นเวกเตอร์เพิ่ม ใช้เฉพาะเมื่อช่วยให้พื้นผิวที่เห็นในขนาดต้องการดีขึ้น ตัวอย่างระบุ `color-interpolation-filters="sRGB"` ชัดเจน คงค่านี้เมื่อเทียบตัวเลือกเพื่อไม่ให้การประมวลผลสีที่เปลี่ยนมารบกวนการเทียบเกรน ## แก้กรอบสี่เหลี่ยม สีเติมหาย หรือขอบสกปรก **พื้นผิวกลายเป็นปื้นสี่เหลี่ยม** ตรวจผลลัพธ์สุดท้ายของฟิลเตอร์ หากจบที่ `feTurbulence` มันกำลังคืนภาพนอยส์ คืนเมทริกซ์ การประกอบกับ `SourceAlpha` และการรวม การขยายกรอบฟิลเตอร์ให้พื้นที่นอยส์ที่ไม่จำกัดเพิ่มเท่านั้น **สีใบไม้หาย** ตรวจว่าโหนดรวมแรกใช้ `SourceGraphic` ผลสุดท้ายที่มีเพียง `inside` มีชั้นทับมืด ไม่ใช่สีเติมปะการังเดิม ตรวจการสะกดและตัวพิมพ์ใหญ่เล็กของทุกการอ้าง `result` และ `in` ที่ตั้งชื่อด้วย **นอยส์ยังอยู่ในช่องโปร่งใส** ยืนยันว่าอินพุตประกอบที่สองคือ `SourceAlpha` ไม่ใช่นอยส์สี่เหลี่ยมหรือพื้นหลังทึบ ใช้ฟิลเตอร์กับภาพที่ต้องการพื้นผิว การใส่พื้นหลังทึบในกลุ่มที่ใส่ฟิลเตอร์เปลี่ยนอินพุตอัลฟา **บางส่วนของผลถูกตัด** ตรวจ `x`, `y`, `width` และ `height` บนฟิลเตอร์ ค่าเหล่านี้กำหนดพื้นที่ฟิลเตอร์ที่ใช้ได้ตาม[เอกสาร filter ของ MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) ตัวอย่างเผื่อพื้นที่เล็กน้อย พื้นที่กว้างขึ้นซ่อมขั้นจำกัดขอบที่หายไม่ได้ และไม่แก้การตัดจากตัวครอบอื่น **ภาพเล็กดูเลอะ** ลดอัลฟาชั้นทับก่อน แล้วเทียบความถี่กับจำนวนอ็อกเทฟ หากพื้นผิวยังทำให้เงารูปร่างแย่ ให้ส่งเวอร์ชันสะอาดที่ขนาดนั้น ## เก็บต้นฉบับสะอาดไว้ส่งงาน สำหรับต้นฉบับไม่ใส่ฟิลเตอร์ ลบ `filter="url(#grain)"` จากเส้นและลบนิยามฟิลเตอร์ที่ไม่ใช้แล้ว เก็บ `d` สีเติม และ viewBox เปิดไฟล์นั้นแยกและยืนยันว่าใบไม้กับช่องตรงกับเวอร์ชันสะอาดต้นฉบับ สำหรับเว็บแอป ตรวจเวอร์ชันมีพื้นผิวในเบราว์เซอร์และวิธีฝังจริงที่จะเผยแพร่ หากใช้ SVG นี้ซ้ำแบบ inline ในหน้าเดียว ให้แต่ละฟิลเตอร์มี ID ไม่ซ้ำและปรับการอ้าง `url(#...)` ตัวอย่างเดี่ยวใช้หนึ่ง ID เพราะมีหนึ่งชุด สำหรับปลายทางที่ต้องการหน้าตาแรสเตอร์แน่นอน ให้ส่งออกภาพตัวอย่างแรสเตอร์ที่ขนาดต้องการแล้วตรวจที่นั่น สำหรับงานที่ต้องใช้รูปทรงแก้ไขหรือตัดได้ ให้ส่งเส้นสะอาดและอธิบายว่าเกรนเป็นผลสำหรับแสดง อย่าเรียกนอยส์ฟิลเตอร์ว่าจุดเวกเตอร์ และอย่ารับปากว่าโปรแกรมแก้ไข ตัวส่งออก PDF หรือเครื่องตัดปลายทางจะสร้างเหมือนกัน ทดสอบปลายทางจริง หากตั้งใจต้องการจุดที่แก้แยกได้ นั่นเป็นงานรูปทรงอีกเรื่อง และต้องตัดสินใจเรื่องเก็บงานด้วย ดู[เหตุใด SVG มีโหนดมากเกินไป](https://perfectvector.com/th/blog/svg-too-many-nodes) ก่อนลอกพื้นผิวเป็นเส้นขอบจิ๋วจำนวนมาก การรักษาเกรนจากภาพวาดแรสเตอร์เป็นอีกปัญหาตั้งต้น ซึ่งอธิบายใน[สีน้ำเป็นเวกเตอร์](https://perfectvector.com/th/blog/watercolor-to-vector) ## เมื่อใดการแปลงเวกเตอร์ช่วยได้ หากลายสะอาดเหลือเพียง PNG หรือ JPG ให้[แปลงต้นฉบับนั้นเป็นภาพ SVG ที่แก้ไขได้](https://perfectvector.com/th/image-to-vector) ก่อนใส่ฟิลเตอร์เบราว์เซอร์ ตรวจเงารูปร่างและช่องที่กู้มาในเวอร์ชันสะอาดก่อน PerfectVector ให้ขั้นแรสเตอร์เป็นเวกเตอร์ ส่วนกราฟเกรนจากกระบวนการสร้างในคู่มือนี้เป็นการแต่ง SVG แยกที่คุณเพิ่มภายหลัง มีต้นฉบับที่เป็นเส้นอยู่แล้วหรือไม่? ใช้โดยตรงได้ ไม่ต้องแปลงอีกรอบสำหรับงานฟิลเตอร์ [คู่มือแปลงภาพเป็นเวกเตอร์](https://perfectvector.com/th/blog/what-is-image-vectorization) อธิบายขั้นกู้ต้นฉบับหากต้องใช้ ## คำถามที่พบบ่อย **ทำไม feTurbulence สร้างสี่เหลี่ยมแทนการตามรูปทรง?** นอยส์เติมพื้นที่ย่อยขององค์ประกอบฟิลเตอร์ ประกอบภายใน SourceAlpha และรวมทับ SourceGraphic เพื่อจำกัดชั้นทับในภาพโดยเก็บสีเติมไว้ **เกรน SVG เพิ่มโหนดในเส้นหรือไม่?** ฟิลเตอร์นี้ไม่เพิ่มเส้นจุด ในไฟล์ทดสอบเบราว์เซอร์ต้นฉบับ ตัวอย่างทั้งหกยังมีหนึ่งเส้นพร้อมข้อมูล d เหมือนกัน ฟิลเตอร์เปลี่ยนพื้นผิวเรนเดอร์ **ควรเริ่มการตั้งเกรนอย่างไร?** สำหรับใบไม้ต้นฉบับในตัวอย่าง เริ่มด้วย fractalNoise, baseFrequency 0.65 สองอ็อกเทฟ seed 8 และตัวคูณอัลฟาชั้นทับดำ 0.28 เทียบที่ขนาดแสดงจริงและปรับทีละค่า **ใช้ผลเกรนเป็นไฟล์ตัดได้หรือไม่?** พื้นผิวที่สร้างไม่ใช่รูปทรงตัดที่แก้ไขได้ เก็บต้นฉบับเส้นไม่ใส่ฟิลเตอร์แยก และตรวจรูปทรงในกระบวนการตัดจริง ## แหล่งข้อมูล 1. [MDN: feTurbulence](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) — การสร้างนอยส์และพื้นที่ย่อยขององค์ประกอบ 2. [W3C: ต้นไม้องค์ประกอบฟิลเตอร์](https://drafts.csswg.org/filter-effects/#FilterPrimitiveTree) — SourceGraphic, SourceAlpha และการประมวลผลภาพของฟิลเตอร์ 3. [MDN: feColorMatrix](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) — การแปลงสีและอัลฟาด้วยเมทริกซ์ 4. [MDN: feComposite](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite) — จำกัดขอบด้วยตัวดำเนินการ in 5. [MDN: baseFrequency](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/baseFrequency) — ค่าความถี่แกนเดียวและสองแกน 6. [MDN: numOctaves](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/numOctaves) — ชั้นรายละเอียดนอยส์ 7. [MDN: filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) — แอตทริบิวต์พื้นที่ฟิลเตอร์ หากภาพเว็บต้องกู้ต้นฉบับสะอาดจากแรสเตอร์ ให้[เริ่มแปลงภาพเป็นเวกเตอร์](https://perfectvector.com/th/image-to-vector) ตรวจเส้น แล้วเพิ่มเกรนให้สำเนาแสดงผลแยก ## Explore - [Read the HTML article](https://perfectvector.com/th/blog/svg-feturbulence-grain) - [นำเข้า SVG ใน FontForge: เปลี่ยนรูปวาดเป็นเส้นขอบอักขระ](https://perfectvector.com/th/blog/fontforge-import-svg.md) - [ประเมินคุณภาพการแปลงเวกเตอร์อย่างไร: เกณฑ์ให้คะแนน](https://perfectvector.com/th/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)