พื้นผิวเกรน SVG: เก็บนอยส์ไว้ภายในภาพ

หากต้องการเพิ่มเกรนให้ภาพ SVG ให้สร้างนอยส์ด้วย feTurbulence เปลี่ยนเป็นชั้นทับสีเดียวจาง ๆ แล้วประกอบชั้นนั้นภายใน SourceAlpha รวมทับ SourceGraphic เพื่อให้สีเติมต้นฉบับยังมองเห็น วิธีนี้เพิ่มพื้นผิวที่เรนเดอร์โดยไม่เปลี่ยนรูปทรงเส้นของงาน

องค์ประกอบนอยส์เพียงตัวเดียวให้ผลต่างออกไป มันเติมพื้นที่ย่อยขององค์ประกอบฟิลเตอร์แทนการตามเส้นขอบรูป จึงทำให้ใบไม้กลายเป็นปื้นนอยส์สี่เหลี่ยมได้ เอกสาร feTurbulence ของ MDN อธิบายพฤติกรรมนี้

สำหรับภาพประกอบเว็บ ไฟล์ส่งที่มีประโยชน์คือเวอร์ชันแสดงผลมีพื้นผิวกับต้นฉบับสะอาด เกรนจากฟิลเตอร์นี้ไม่ใช่ชุดจุดที่แก้ไขได้หรือเส้นขอบตัด

แยกรูปทรงออกจากการแต่งพื้นผิว

เริ่มจากเส้นสีเติมเรียบง่ายที่ดูถูกต้องอยู่แล้วโดยไม่ใส่เกรน แก้เส้นขอบ ช่อง และสีก่อนเพิ่มผล ฟิลเตอร์ซ่อมรูปทรงนั้นไม่ได้

สามสถานะต่อไปนี้อธิบายปัญหาขอบเขต:

ขอบเขตสำคัญ

SourceGraphic ให้องค์ประกอบที่กำลังใส่ฟิลเตอร์ SourceAlpha ให้ช่องอัลฟาของมัน ฟิลเตอร์ทำงานกับภาพของงาน ไม่ได้เขียนคำสั่งเส้นใหม่ อินพุตเหล่านี้และกราฟฟิลเตอร์นิยามไว้ในข้อกำหนด Filter Effects ของ W3C

หากภาพต้นทางมีบริเวณโปร่งใสอยู่แล้ว บริเวณเหล่านั้นมีผลต่อการจำกัดด้วย SourceAlpha ตามความทึบที่เรนเดอร์จริง ไม่ใช่กรอบนอกที่คาดเดา

คัดลอกตัวอย่างเกรน SVG ครบชุด

บันทึกเป็นไฟล์ .svg แล้วเปิดในเบราว์เซอร์ ภายในมีเส้นใบไม้ต้นฉบับหนึ่งเส้น seed นอยส์ที่ให้ผลแน่นอน ชั้นทับมืด และขั้นจำกัดขอบชัดเจน ช่องเฉียงเป็นส่วนของเส้นจึงยังโปร่งใสในเวอร์ชันมีพื้นผิว

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <defs>
    <filter id="grain" x="-10%" y="-10%" width="120%" height="120%"
            color-interpolation-filters="sRGB">
      <feTurbulence type="fractalNoise" baseFrequency="0.65"
                    numOctaves="2" seed="8" result="noise"/>
      <feColorMatrix in="noise" type="matrix" values="0 0 0 0 0
        0 0 0 0 0
        0 0 0 0 0
        0 0 0 0.28 0" result="ink"/>
      <feComposite in="ink" in2="SourceAlpha" operator="in" result="inside"/>
      <feMerge>
        <feMergeNode in="SourceGraphic"/>
        <feMergeNode in="inside"/>
      </feMerge>
    </filter>
  </defs>
  <path d="M36 142C40 70 104 26 164 30C164 100 120 150 60 156L38 180L28 170L52 146C80 112 112 78 146 46C104 78 74 110 54 140Z" fill="#e76b50" filter="url(#grain)"/>
</svg>

ฟิลเตอร์ทำสี่หน้าที่:

1. feTurbulence สร้างนอยส์และตั้งชื่อ noise
2. เมทริกซ์ตั้งแดง เขียว และน้ำเงินเป็นศูนย์ แถวสุดท้ายคูณอัลฟาของนอยส์ด้วย 0.28 สร้างชั้นทับดำจางชื่อ ink
3. feComposite ที่ใช้ operator="in" เก็บชั้นทับในบริเวณที่มี SourceAlpha
4. feMerge วาดภาพต้นฉบับก่อน แล้ววางชั้นทับที่จำกัดขอบไว้ด้านบน

เอกสาร feColorMatrix ของ MDN อธิบายว่าเมทริกซ์ห้าคอลัมน์แปลงสีและอัลฟาอย่างไร ที่นี่มันเปลี่ยนภาพนอยส์ ไม่ใช่สีเติมใบไม้ เอกสาร feComposite ของ MDN อธิบายคำสั่ง in ที่ใช้จำกัดชั้นทับตามอินพุตที่สอง

ค่า 0.28 เป็นจุดเริ่มสำหรับใบไม้ปะการังนี้ ไม่ใช่ค่าเกรนสากล ลดหากพื้นผิวทำให้ภาพหม่น เพิ่มหากเกรนหายที่ขนาดแสดงเป้าหมาย เกรนชั้นทับดำทำให้สีเติมมืดลง มันจะไม่สร้างจุดสีอ่อนที่เห็นได้บนลายดำ

สำหรับการเปลี่ยนสีและอัลฟาของงานที่มีอยู่ ดูคู่มือ feColorMatrix แยกต่างหาก หากต้องการทำขอบโปร่งใสเดิมให้แข็งขึ้น ดูค่าเกณฑ์อัลฟา SVG ทั้งสองคำสั่งไม่ได้ให้แหล่งนอยส์ที่สร้างขึ้นแบบที่ใช้ที่นี่

ตรวจผลที่ขนาดที่คนจะเห็น

เราทำเส้นต้นฉบับนี้สามเวอร์ชัน ได้แก่ ไม่ใส่ฟิลเตอร์ ฟิลเตอร์ที่มีเพียงองค์ประกอบนอยส์ และกราฟเกรนจำกัดขอบครบชุดข้างต้น ตรวจผลเรนเดอร์ใน Chrome ที่ 120 × 120 และ 360 × 360 พิกเซล CSS โดยใช้ viewBox 0 0 200 200 เดียวกัน

DOM ของเบราว์เซอร์มีหนึ่งเส้นในทุกตัวอย่าง แอตทริบิวต์ d ทั้งหกเหมือนกัน นี่กำหนดขอบเขตของตัวอย่างว่าเปลี่ยนพื้นผิวเรนเดอร์และไม่ได้เพิ่มเส้นจุด เป็นไฟล์ทดสอบเบราว์เซอร์ที่สร้างขึ้น ไม่ใช่ผลจาก PerfectVector หรือโปรแกรมเวกเตอร์จริง

ตัวอย่างใหญ่ช่วยตรวจผล แต่เวอร์ชันเล็กตัดสินว่าภาพยังอ่านออกหรือไม่ เก็บทั้งสองขนาดไว้ในการตรวจ การเพิ่มขนาดแสดงด้วย viewBox เดิมยังเปลี่ยนสเกลพื้นผิวที่มองเห็น อย่าคิดว่าหนึ่งตัวอย่างแทนทุกการใช้งาน

ปรับเกรนทีละตัวควบคุม

สำหรับภาพเล็กบนการ์ดเว็บ เริ่มด้วยค่าในตัวอย่าง จากนั้นเปลี่ยนหนึ่งพารามิเตอร์ เทียบสองขนาดแสดงเดิม และเก็บสำเนาเวอร์ชันที่ชอบ

baseFrequency รับหนึ่งค่าสำหรับทั้งสองแกน หรือสองค่าสำหรับความถี่แนวนอนและแนวตั้ง เอกสาร baseFrequency ของ MDN อธิบายความแตกต่าง เริ่มหนึ่งค่าสำหรับใบไม้นี้ ค่าที่ไม่เท่ากันเป็นการเลือกพื้นผิวมีทิศทางโดยตั้งใจ

numOctaves ควบคุมจำนวนอ็อกเทฟของนอยส์ตามเอกสาร numOctaves ของ MDN อ็อกเทฟเพิ่มไม่ใช่เส้นเวกเตอร์เพิ่ม ใช้เฉพาะเมื่อช่วยให้พื้นผิวที่เห็นในขนาดต้องการดีขึ้น

ตัวอย่างระบุ color-interpolation-filters="sRGB" ชัดเจน คงค่านี้เมื่อเทียบตัวเลือกเพื่อไม่ให้การประมวลผลสีที่เปลี่ยนมารบกวนการเทียบเกรน

แก้กรอบสี่เหลี่ยม สีเติมหาย หรือขอบสกปรก

พื้นผิวกลายเป็นปื้นสี่เหลี่ยม ตรวจผลลัพธ์สุดท้ายของฟิลเตอร์ หากจบที่ feTurbulence มันกำลังคืนภาพนอยส์ คืนเมทริกซ์ การประกอบกับ SourceAlpha และการรวม การขยายกรอบฟิลเตอร์ให้พื้นที่นอยส์ที่ไม่จำกัดเพิ่มเท่านั้น

สีใบไม้หาย ตรวจว่าโหนดรวมแรกใช้ SourceGraphic ผลสุดท้ายที่มีเพียง inside มีชั้นทับมืด ไม่ใช่สีเติมปะการังเดิม ตรวจการสะกดและตัวพิมพ์ใหญ่เล็กของทุกการอ้าง result และ in ที่ตั้งชื่อด้วย

นอยส์ยังอยู่ในช่องโปร่งใส ยืนยันว่าอินพุตประกอบที่สองคือ SourceAlpha ไม่ใช่นอยส์สี่เหลี่ยมหรือพื้นหลังทึบ ใช้ฟิลเตอร์กับภาพที่ต้องการพื้นผิว การใส่พื้นหลังทึบในกลุ่มที่ใส่ฟิลเตอร์เปลี่ยนอินพุตอัลฟา

บางส่วนของผลถูกตัด ตรวจ x, y, width และ height บนฟิลเตอร์ ค่าเหล่านี้กำหนดพื้นที่ฟิลเตอร์ที่ใช้ได้ตามเอกสาร filter ของ MDN ตัวอย่างเผื่อพื้นที่เล็กน้อย พื้นที่กว้างขึ้นซ่อมขั้นจำกัดขอบที่หายไม่ได้ และไม่แก้การตัดจากตัวครอบอื่น

ภาพเล็กดูเลอะ ลดอัลฟาชั้นทับก่อน แล้วเทียบความถี่กับจำนวนอ็อกเทฟ หากพื้นผิวยังทำให้เงารูปร่างแย่ ให้ส่งเวอร์ชันสะอาดที่ขนาดนั้น

เก็บต้นฉบับสะอาดไว้ส่งงาน

สำหรับต้นฉบับไม่ใส่ฟิลเตอร์ ลบ filter="url(#grain)" จากเส้นและลบนิยามฟิลเตอร์ที่ไม่ใช้แล้ว เก็บ d สีเติม และ viewBox เปิดไฟล์นั้นแยกและยืนยันว่าใบไม้กับช่องตรงกับเวอร์ชันสะอาดต้นฉบับ

สำหรับเว็บแอป ตรวจเวอร์ชันมีพื้นผิวในเบราว์เซอร์และวิธีฝังจริงที่จะเผยแพร่ หากใช้ SVG นี้ซ้ำแบบ inline ในหน้าเดียว ให้แต่ละฟิลเตอร์มี ID ไม่ซ้ำและปรับการอ้าง url(#...) ตัวอย่างเดี่ยวใช้หนึ่ง ID เพราะมีหนึ่งชุด

สำหรับปลายทางที่ต้องการหน้าตาแรสเตอร์แน่นอน ให้ส่งออกภาพตัวอย่างแรสเตอร์ที่ขนาดต้องการแล้วตรวจที่นั่น สำหรับงานที่ต้องใช้รูปทรงแก้ไขหรือตัดได้ ให้ส่งเส้นสะอาดและอธิบายว่าเกรนเป็นผลสำหรับแสดง อย่าเรียกนอยส์ฟิลเตอร์ว่าจุดเวกเตอร์ และอย่ารับปากว่าโปรแกรมแก้ไข ตัวส่งออก PDF หรือเครื่องตัดปลายทางจะสร้างเหมือนกัน ทดสอบปลายทางจริง

หากตั้งใจต้องการจุดที่แก้แยกได้ นั่นเป็นงานรูปทรงอีกเรื่อง และต้องตัดสินใจเรื่องเก็บงานด้วย ดูเหตุใด SVG มีโหนดมากเกินไป ก่อนลอกพื้นผิวเป็นเส้นขอบจิ๋วจำนวนมาก การรักษาเกรนจากภาพวาดแรสเตอร์เป็นอีกปัญหาตั้งต้น ซึ่งอธิบายในสีน้ำเป็นเวกเตอร์

เมื่อใดการแปลงเวกเตอร์ช่วยได้

หากลายสะอาดเหลือเพียง PNG หรือ JPG ให้แปลงต้นฉบับนั้นเป็นภาพ SVG ที่แก้ไขได้ ก่อนใส่ฟิลเตอร์เบราว์เซอร์ ตรวจเงารูปร่างและช่องที่กู้มาในเวอร์ชันสะอาดก่อน PerfectVector ให้ขั้นแรสเตอร์เป็นเวกเตอร์ ส่วนกราฟเกรนจากกระบวนการสร้างในคู่มือนี้เป็นการแต่ง SVG แยกที่คุณเพิ่มภายหลัง

มีต้นฉบับที่เป็นเส้นอยู่แล้วหรือไม่? ใช้โดยตรงได้ ไม่ต้องแปลงอีกรอบสำหรับงานฟิลเตอร์ คู่มือแปลงภาพเป็นเวกเตอร์ อธิบายขั้นกู้ต้นฉบับหากต้องใช้

คำถามที่พบบ่อย

ทำไม feTurbulence สร้างสี่เหลี่ยมแทนการตามรูปทรง? นอยส์เติมพื้นที่ย่อยขององค์ประกอบฟิลเตอร์ ประกอบภายใน SourceAlpha และรวมทับ SourceGraphic เพื่อจำกัดชั้นทับในภาพโดยเก็บสีเติมไว้

เกรน SVG เพิ่มโหนดในเส้นหรือไม่? ฟิลเตอร์นี้ไม่เพิ่มเส้นจุด ในไฟล์ทดสอบเบราว์เซอร์ต้นฉบับ ตัวอย่างทั้งหกยังมีหนึ่งเส้นพร้อมข้อมูล d เหมือนกัน ฟิลเตอร์เปลี่ยนพื้นผิวเรนเดอร์

ควรเริ่มการตั้งเกรนอย่างไร? สำหรับใบไม้ต้นฉบับในตัวอย่าง เริ่มด้วย fractalNoise, baseFrequency 0.65 สองอ็อกเทฟ seed 8 และตัวคูณอัลฟาชั้นทับดำ 0.28 เทียบที่ขนาดแสดงจริงและปรับทีละค่า

ใช้ผลเกรนเป็นไฟล์ตัดได้หรือไม่? พื้นผิวที่สร้างไม่ใช่รูปทรงตัดที่แก้ไขได้ เก็บต้นฉบับเส้นไม่ใส่ฟิลเตอร์แยก และตรวจรูปทรงในกระบวนการตัดจริง

แหล่งข้อมูล

1. MDN: feTurbulence — การสร้างนอยส์และพื้นที่ย่อยขององค์ประกอบ
2. W3C: ต้นไม้องค์ประกอบฟิลเตอร์ — SourceGraphic, SourceAlpha และการประมวลผลภาพของฟิลเตอร์
3. MDN: feColorMatrix — การแปลงสีและอัลฟาด้วยเมทริกซ์
4. MDN: feComposite — จำกัดขอบด้วยตัวดำเนินการ in
5. MDN: baseFrequency — ค่าความถี่แกนเดียวและสองแกน
6. MDN: numOctaves — ชั้นรายละเอียดนอยส์
7. MDN: filter — แอตทริบิวต์พื้นที่ฟิลเตอร์

หากภาพเว็บต้องกู้ต้นฉบับสะอาดจากแรสเตอร์ ให้เริ่มแปลงภาพเป็นเวกเตอร์ ตรวจเส้น แล้วเพิ่มเกรนให้สำเนาแสดงผลแยก