SVG feColorMatrix: เปลี่ยนสีโดยไม่แก้ค่าสีเติม

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

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

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

เลือกผลการเปลี่ยนสีที่ต้องการ

คู่มือแก้สี SVG อธิบายการค้นหาสีเติม เส้นขอบ และกฎสไตล์ บทความนี้เจาะจงว่าสิ่งใดเหลือในไฟล์หลังใช้ฟิลเตอร์ MDN อธิบาย feColorMatrix ว่าเป็นการแปลงช่องสีพิกเซล ส่วนคู่มือสีเติมและเส้นขอบ อธิบายสีที่ใช้กับรูปทรง

ตัวอย่างสองสีที่ตรวจได้

บันทึกเป็น filtered-leaves.svg แล้วเปิดในเบราว์เซอร์ ใบแรกเริ่มด้วยสีเติมส้ม #cc6633 ใบที่สองเติมสีเขียว #339966 ด้วยความทึบครึ่งหนึ่ง เมทริกซ์สลับช่องแดงกับน้ำเงิน โดยคงเขียวและอัลฟาไว้

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 260 220" width="260" height="220">
  <defs>
    <filter id="swap-red-blue" color-interpolation-filters="sRGB">
      <feColorMatrix type="matrix" values="
        0 0 1 0 0
        0 1 0 0 0
        1 0 0 0 0
        0 0 0 1 0" />
    </filter>
  </defs>
  <g filter="url(#swap-red-blue)">
    <path fill="#cc6633"
      d="M40 125 C25 35 105 15 150 35 C165 105 120 150 40 125Z" />
    <path fill="#339966" fill-opacity="0.5"
      d="M100 175 C90 90 180 65 225 90 C230 155 175 200 100 175Z" />
  </g>
</svg>

เราเรนเดอร์ลวดลายต้นฉบับนี้สี่แบบในเบราว์เซอร์: สีต้นฉบับ แบบใช้ฟิลเตอร์ แบบแก้โดยตรง และสำเนาที่ลบฟิลเตอร์ แบบแก้โดยตรงเปลี่ยนสีเติมแรกเป็น #3366cc และสีที่สองเป็น #669933 โดยไม่มีฟิลเตอร์ ทั้งสองวิธีให้ลวดลายสีน้ำเงินกับเขียวมะกอก เมื่อตรวจ DOM ของแบบใช้ฟิลเตอร์ ยังได้แอตทริบิวต์สีเติมส้มและเขียวเดิม การลบฟิลเตอร์ทำให้ชุดสีต้นฉบับกลับมา

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

หากต้องการตรวจต้นทางซ้ำ ให้เปิด SVG ในโปรแกรมแก้ข้อความแล้วค้นหา fill= จากนั้นลบเฉพาะ filter="url(#swap-red-blue)" ออกจากกลุ่มและรีเฟรชเบราว์เซอร์ เก็บไฟล์ที่ไม่แก้ไขไว้ข้างกันเพื่อเทียบผล

อ่านสี่แถวโดยไม่ต้องท่องเมทริกซ์

สำหรับ type="matrix" แอตทริบิวต์ values มีตัวเลขยี่สิบตัว: สี่แถว แถวละห้า แต่ละแถวคำนวณช่องขาออกหนึ่งช่อง คอลัมน์ใช้ช่องแดง เขียว น้ำเงิน อัลฟาขาเข้า และค่าคงที่สำหรับบวกเพิ่ม เอกสารอ้างอิงเมทริกซ์ของ MDN แสดงสมการและเมทริกซ์เอกลักษณ์

ในตัวอย่าง แถวแรกใช้สีน้ำเงินเป็นแดงใหม่ แถวสองคงเขียว แถวสามใช้แดงเป็นน้ำเงินใหม่ และแถวสี่คงอัลฟา:

0 0 0 1 0

แถวสุดท้ายหมายถึง “ใช้อัลฟาเดิมโดยไม่บวกค่าเพิ่ม” การแทนทั้งแถวด้วยศูนย์ทำให้ผลลัพธ์โปร่งใส การเพิ่มค่าคงที่ในคอลัมน์สุดท้ายเปลี่ยนความโปร่งใสแม้บริเวณที่ต้นทางโปร่งใส ซึ่งอาจสร้างพื้นที่สี่เหลี่ยมที่ไม่ต้องการภายในบริเวณฟิลเตอร์

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

ตั้ง sRGB เมื่อตัวเลขมาจากแถบสี RGB

คำสั่งฟิลเตอร์พื้นฐาน SVG ใช้ linearRGB เป็นค่าเริ่มต้น แถบสีอย่าง rgb(128, 128, 128) โดยทั่วไปกำหนดใน sRGB ดังนั้นค่าคงที่เมทริกซ์ 0.5 ในพื้นที่สีเริ่มต้นของฟิลเตอร์จึงไม่ได้หมายถึงสีเทาที่แสดงเท่ากับ sRGB ครึ่งสเกล ใช้ color-interpolation-filters="sRGB" เมื่อเมทริกซ์ตั้งใจทำงานกับค่าช่อง sRGB เหล่านั้น แอตทริบิวต์นี้ต่างจาก color-interpolation การเปลี่ยนแอตทริบิวต์อีกตัวไม่ได้เลือกพื้นที่สีของฟิลเตอร์ MDN อธิบายค่าเริ่มต้นและความต่างนี้

สำหรับรูปเงาสีทึบ #3366cc ค่า RGB ที่ปรับให้อยู่ในช่วงมาตรฐานคือ 51/255, 102/255 และ 204/255 หรือ 0.2, 0.4 และ 0.8 ฟิลเตอร์ต่อไปนี้ทิ้งค่า RGB ขาเข้าแล้วตั้งค่าคงที่เหล่านั้น โดยคงอัลฟาขาเข้าไว้:

<filter id="solid-blue" color-interpolation-filters="sRGB">
  <feColorMatrix type="matrix" values="
    0 0 0 0 0.2
    0 0 0 0 0.4
    0 0 0 0 0.8
    0 0 0 1 0" />
</filter>

อ้างอิงฟิลเตอร์นี้จากวัตถุด้วย filter="url(#solid-blue)" มันลบความแตกต่างระหว่างสีต้นทางที่ทึบโดยตั้งใจ เหมาะกับรูปเงา ไม่ใช่การรักษารายละเอียดโทนภาพถ่าย ข้อกำหนด Filter Effects นิยามการแปลงช่องและการจัดการค่าสีที่ยังไม่คูณอัลฟาล่วงหน้า

การตั้ง sRGB เป็นการเลือกพื้นที่คำนวณ ไม่ใช่การรับประกันว่าสีจะเหมือนกันทุกจอหรือเมื่อพิมพ์ สำหรับความคลาดเคลื่อนในการส่งมอบที่กว้างกว่า ใช้รายการตรวจสีส่งออก SVG

ตรวจไฟล์ส่งมอบ ไม่ใช่เพียงภาพตัวอย่าง

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

ก่อนส่งมอบเวกเตอร์ ตรวจปลายทางจริง:

1. เปิด SVG ที่บันทึกผ่านวิธีนำเข้าหรือส่งออกเดียวกับที่ผู้รับจะใช้
2. เปรียบเทียบสีและขอบโปร่งแสงกับภาพตัวอย่างเบราว์เซอร์
3. เลือกรูปทรงแล้วตรวจสีเติม มีค่าใหม่ที่ต้องการ หรือเป็นสีเดิมภายใต้เอฟเฟกต์?
4. บันทึกแล้วเปิดใหม่หนึ่งครั้ง ยืนยันว่านิยามและการอ้างอิงฟิลเตอร์คงอยู่ หากจำเป็นต้องใช้เอฟเฟกต์
5. หากผู้รับต้องการสีพื้นธรรมดาที่แก้ไขได้ ใช้แบบแก้ fill โดยตรง และลบฟิลเตอร์ที่ไม่จำเป็นแล้วออกจากสำเนาส่งมอบนั้น

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

เมื่อใด PerfectVector จึงเหมาะกับกระบวนการนี้

หากมีสองพาธนี้อยู่แล้ว ให้แก้โดยตรง ไม่มีเหตุผลต้องแปลงเป็นราสเตอร์แล้วไล่เส้นใหม่เพื่อลบฟิลเตอร์สี

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

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

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

feColorMatrix เปลี่ยนค่า fill ใน SVG หรือไม่? ไม่ มันแปลงช่องสีที่เรนเดอร์ แอตทริบิวต์ fill ต้นทางยังคงเดิมเว้นแต่คุณแก้แยกต่างหาก

ทำไมสีเทาที่เลือกสว่างกว่าที่คาด? ตรวจพื้นที่คำนวณของฟิลเตอร์ คำสั่งฟิลเตอร์พื้นฐาน SVG ใช้ linearRGB เป็นค่าเริ่มต้น ตั้ง color-interpolation-filters เป็น sRGB เมื่อค่าคงที่เมทริกซ์แทนค่าแถบสี sRGB ที่ปรับให้อยู่ในช่วงมาตรฐาน

รักษาความโปร่งใสขณะเปลี่ยนสีอย่างไร? คงแถวอัลฟาเป็น 0 0 0 1 0 เพื่อรักษาอัลฟาขาเข้า ตรวจขอบโปร่งแสงและหลีกเลี่ยงการบวกค่าอัลฟา เว้นแต่ตั้งใจเปลี่ยนความโปร่งใส

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

แหล่งอ้างอิง

1. MDN: feColorMatrix — นิยามแถวเมทริกซ์ ช่องสี และชนิดการแปลงที่มีให้
2. MDN: color-interpolation-filters — อธิบายค่าเริ่มต้น linearRGB และการเลือก sRGB อย่างชัดเจน
3. W3C: Filter Effects, feColorMatrix — กำหนดพฤติกรรมการแปลงสีและอัลฟา
4. MDN: สีเติมและเส้นขอบ — อธิบายสีต้นทางที่รูปทรง SVG ใช้

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