ตรวจขอบ SVG: ตัวอย่างด้วย feConvolveMatrix

การตรวจขอบ SVG ด้วย feConvolveMatrix เปลี่ยนพิกเซลเรนเดอร์รอบขอบเขตสี มันสร้างภาพตัวอย่างขอบจาก PNG ภายใน SVG ได้ แต่ไม่ได้สร้างเส้นขอบที่แก้ไขได้ แยกเรื่องนี้ให้ชัดเมื่องานถัดไปคือแก้โลโก้ เตรียมภาพลายเส้น หรือสร้างภาพเว็บ

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

เริ่มด้วยตัวอย่างขอบที่ควบคุมตัวแปร

เอกสาร feConvolveMatrix อธิบายคอนโวลูชันเป็นการคำนวณพิกเซลอินพุตกับเพื่อนบ้าน เคอร์เนล 3 × 3 นี้ลบเพื่อนบ้านแปดจุดออกจากค่ากลางแปดเท่า:

-1 -1 -1
-1  8 -1
-1 -1 -1

สัมประสิทธิ์รวมกันได้ศูนย์ ในพื้นที่สม่ำเสมอผลตอบสนองเป็นศูนย์ ส่วนจุดเปลี่ยนความสว่างอาจเป็นบวกหรือลบ เมื่อใช้ bias="0" ผลลบถูกตัดที่ขีดล่างสี ตัวอย่างจึงไม่แสดงทั้งสองด้านของทุกขอบเท่ากัน

ตัวอย่างระบุ divisor="1" ชัดเจน เอกสาร divisor อธิบายการหารปรับด้วยค่านี้และค่าเริ่มต้น 1 สำหรับเคอร์เนลผลรวมศูนย์ อีกทั้งตั้ง color-interpolation-filters="sRGB" เพื่อใช้ค่าช่อง sRGB แทนการประมวลผล linearRGB เริ่มต้นขององค์ประกอบ

บันทึกไฟล์ครบและอยู่ในตัวนี้เป็น edge-preview.svg แล้วเปิดในเบราว์เซอร์ PNG ฝังตัวคือรูปข้าวหลามตัดเทาต้นฉบับ 48 × 48 บนกระดาษขาวทึบ กลางเป็นขาว ไม่ใช่โปร่งใส

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
  <defs>
    <filter id="effect" filterUnits="userSpaceOnUse" x="0" y="0" width="48" height="48" color-interpolation-filters="sRGB">
      <feConvolveMatrix in="SourceGraphic" order="3" kernelMatrix="-1 -1 -1 -1 8 -1 -1 -1 -1" divisor="1" bias="0" targetX="1" targetY="1" edgeMode="duplicate" preserveAlpha="true"/>
    </filter>
  </defs>
  <image width="48" height="48" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABOklEQVR4nNWZQQ7EIAwDU7+seTlPo1ppTyvRhcQGxYeeGuNpEZT06r13KyxYccGKC1ZcsOKCFRfUA7h7XQD/hldCQGX8G1oFAYXpKKwCAmzDfyHZEGCazYZjQoBltBqKBQGGSTSMEyDSANkQnqxPAbCmgSd8wgDs1cSDflAP1lqT+IYBIuGVENj15FUQUJiOwiogwDSbCcmGAMNkNRwTApniaKjV+/0lB06Ej9T5IA9Ord+rdW2Q53UKKSFYbxiZ4mgo5vQEw0R1ImsT405vZAwIxcKAacckhGpVw/SdAfNIX6gtLslX9P+AokXSAvtJ+EAT3bzYfjgxKNMHJwdn1FPaKju+heSNLeXX6LbWouI8sL25yzyRHWuvM87Ex39wZLoSS+pi3fct9b8+FyssWHHBigtWXDgdIKsHsU1cbk4FPAgAAAAASUVORK5CYII=" filter="url(#effect)"/>
</svg>

นิยามฟิลเตอร์มีผลเพราะภาพอ้างถึงด้วย filter="url(#effect)" เอกสารฟิลเตอร์ SVG อธิบายว่านิยามเองไม่ได้ถูกวาด พื้นที่ที่ระบุครอบคลุมต้นฉบับ 48 × 48 นี้ ภาพอื่นต้องตรวจพื้นที่ของตนเอง

สิ่งที่เปลี่ยนในการทดสอบเบราว์เซอร์

เราตรวจตัวอย่างต้นฉบับหกไฟล์ใน Chrome ที่ 48 และ 192 พิกเซล CSS ห้าไฟล์มีภาพ PNG ฝังตัวหนึ่งภาพและไม่มีเส้น ไฟล์ที่หกเป็นเวกเตอร์ที่วาดด้วยมือแยกต่างหาก เป็นตัวควบคุมรูปทรง ไม่ใช่ผลการใส่ฟิลเตอร์หรือลอก PNG

ตัวอย่าง RGBA มาจากการอ่าน Canvas 48 × 48 ของ SVG เรนเดอร์แต่ละไฟล์ ตัวอย่างที่แสดงตรวจแยกที่ทั้งสองขนาด นี่เป็นข้อสังเกตสำหรับต้นฉบับและเบราว์เซอร์นี้ ไม่ใช่การรับประกันความเข้ากันได้หรืออ่านง่าย การขยายภาพตัวอย่างที่อิงแรสเตอร์ไม่ได้กู้เส้นขอบสะอาดขึ้น

การตอบสนองพิกเซลกับรูปทรงแก้ไขได้

แก้ผลหายโดยไม่ลบกระดาษ

preserveAlpha มีค่าเริ่มต้น false เมื่อใช้ค่านี้ เคอร์เนลประมวลผลอัลฟาด้วย อินพุตทึบของเรามีอัลฟา 1 ทุกจุด เคอร์เนลขอบผลรวมศูนย์จึงหักล้างอัลฟาสม่ำเสมอพร้อมสีสม่ำเสมอ ผลจึงหายในการทดสอบที่ตรวจ

การตั้ง preserveAlpha="true" เก็บอัลฟาต้นฉบับขณะประมวลผลสี เอกสาร preserveAlpha อธิบายความต่าง สำหรับการทดสอบนี้มันคืนตัวอย่างขอบทึบ และยังเก็บกระดาษทึบกับกลางขาวให้ทึบ แม้สีหลังกรองกลายเป็นดำ การเก็บอัลฟาไม่ได้ลบพื้นหลังหรือหาช่องในโลโก้

หากตัวอย่างส่วนใหญ่ดำ ให้เทียบพื้นที่สม่ำเสมอที่รู้กับขอบที่รู้ก่อน ดำอาจเป็นผลตอบสนองศูนย์ที่ถูกต้อง หากต้องการตรวจการเปลี่ยนความสว่างแบบมีเครื่องหมายรอบโทนกลาง ลอง bias="0.5" เอกสาร bias อธิบายระยะเพิ่มหลังหาร สิ่งนี้เปลี่ยนช่วงแสดง ไม่ใช่รูปทรง SVG

ตรวจขอบภาพแยกจากตัวงาน

เก็บ edgeMode="duplicate" สำหรับการเทียบแรก มันขยายค่าพิกเซลริมเมื่อจุดเพื่อนบ้านอยู่นอกอินพุต none ใช้ตัวอย่าง RGBA ค่าศูนย์ ส่วน wrap ใช้ตัวอย่างจากริมฝั่งตรงข้าม กฎเหล่านี้ต่างกันตามเอกสาร edgeMode

ในบัตรขาวทึบของเรา การเปลี่ยนเฉพาะ duplicate เป็น none ทำให้เกิดกรอบสว่างด้านนอกบัตร ขอบนี้เป็นของสี่เหลี่ยมภาพ ไม่ใช่รูปข้าวหลามตัด เทียบไฟล์ไม่ใส่ฟิลเตอร์ก่อนถือว่ากรอบเป็นเส้นขอบงาน

ข้อกำหนด Filter Effects ระบุเป้าหมายเคอร์เนลและพฤติกรรมเลือกตัวอย่าง ที่นี่ targetX="1" และ targetY="1" จัดกลางเคอร์เนล 3 × 3 โค้ดเริ่มต้นไม่ได้ตั้ง kernelUnitLength อย่าคิดว่าตัวอย่างเพื่อนบ้านจะห่างหนึ่งหน่วยผู้ใช้ SVG เสมอที่ทุกขนาดแสดง ให้ตรวจผลเรนเดอร์ที่ส่งจริง

ใช้การเพิ่มความคมเป็นตัวควบคุม ไม่ใช่กู้ความเบลอ

หากต้องการเก็บภาพเติมสีและเน้นความเปลี่ยนเฉพาะจุด แทนเฉพาะ kernelMatrix ด้วย:

0 -1  0
-1 5 -1
0 -1  0

ผลรวมคือ 1 ค่าช่องสม่ำเสมอ c คืน 5c - 4c = c เมื่อ divisor 1 และ bias 0 ในไฟล์ทดสอบของเรา จุดเทาทึบยังเป็น 64 แต่พิกเซลขอบเปลี่ยน เก็บ preserveAlpha="true" และ edgeMode="duplicate" สำหรับการเทียบนี้

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

ตรวจไฟล์ก่อนเรียกว่าลอกลายเวกเตอร์

ตัวอย่างเริ่มต้นที่เผยแพร่มี <image> ซึ่ง href เริ่มด้วย data:image/png เอกสารองค์ประกอบ image อธิบายทรัพยากรแรสเตอร์และ SVG ที่แสดงได้ ที่นี่ชนิดสื่อระบุแรสเตอร์ฝังตัว ฟิลเตอร์ขอบยังคงองค์ประกอบนั้นไว้

สำหรับเปรียบเทียบ ต้นฉบับที่วาดแยกใช้เส้นประกอบนี้บนสี่เหลี่ยมขาว:

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
  <rect width="48" height="48" fill="white"/>
  <path d="M24 6 L42 24 L24 42 L6 24 Z M24 17 L31 24 L24 31 L17 24 Z"
        fill="#404040" fill-rule="evenodd"/>
</svg>

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

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

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

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

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

ทำไมฟิลเตอร์ขอบทำให้ภาพหาย? ตรวจ preserveAlpha ค่าเริ่มต้น false กรองอัลฟาด้วย ในไฟล์ทึบนี้เคอร์เนลผลรวมศูนย์ทำให้ผลที่ตรวจโปร่งใส การเก็บอัลฟาคืนภาพตัวอย่างทึบ

preserveAlpha ลบพื้นหลังขาวหรือไม่? ไม่ มันเก็บอัลฟาต้นฉบับ พื้นหลังขาวทึบยังทึบแม้สีหลังกรองเป็นดำ การลบพื้นหลังกับสร้างเส้นใหม่เป็นคนละงาน

ทำไมฟิลเตอร์ขอบวาดกรอบรอบภาพ? ตรวจ edgeMode และสี่เหลี่ยมอินพุต การใช้ตัวอย่างค่าศูนย์นอกบัตรขาวทึบของเราสร้างกรอบนอกสว่าง การทำขอบแบบ duplicate หลีกเลี่ยงกรอบนั้นในไฟล์ทดสอบนี้

แหล่งข้อมูล

1. MDN: feConvolveMatrix — คอนโวลูชันเพื่อนบ้านพิกเซลและการประมวลผลสีเริ่มต้น
2. MDN: divisor — การปรับด้วยการหารและค่าเริ่มต้นผลรวมศูนย์
3. MDN: filter — นิยามและการใช้ผลฟิลเตอร์
4. MDN: preserveAlpha — การประมวลผลเฉพาะสีกับรวมอัลฟา
5. MDN: bias — การเลื่อนผลหลังหาร
6. MDN: edgeMode — การจัดการขอบแบบ duplicate, wrap และค่าศูนย์
7. W3C: Filter Effects, feConvolveMatrix — กฎเป้าหมายและการเลือกตัวอย่าง
8. MDN: image — เนื้อหาภาพแรสเตอร์และ SVG ที่อ้างอิง