เกณฑ์อัลฟา SVG: ตัดความโปร่งใสอย่างเด็ดขาด

สำหรับจุดตัดอัลฟาที่ 0.5 ให้ใช้ feComponentTransfer กับ <feFuncA type="discrete" tableValues="0 1"/> อัลฟาขาเข้าที่ต่ำกว่า 0.5 จะกลายเป็นโปร่งใส ส่วนค่าที่เท่ากับหรือสูงกว่าจะกลายเป็นทึบ ละฟังก์ชัน RGB ไว้เมื่อต้องการให้การแมปของช่องเหล่านั้นคงค่าเดิม

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

เปรียบเทียบพิกเซลต้นทางที่ทราบค่าก่อนเลือกเกณฑ์

เราสร้าง PNG แบบ RGBA 8 บิตขนาดเล็กที่มีอัลฟาค่อย ๆ เปลี่ยน ช่องสี่เหลี่ยมโปร่งใส ปื้นสีขาวทึบ และแถบตัวอย่างที่ควบคุมค่าสำหรับทดสอบหกแถบ SVG แต่ละไฟล์ในการทดสอบฝังไบต์ PNG ชุดเดียวกันในองค์ประกอบ image หนึ่งตัว รูปแบบที่ไม่มีฟิลเตอร์ แบบ discrete และแบบ table ที่ใช้การประมาณค่าในช่วง ต่างกันเฉพาะการตั้งค่าฟิลเตอร์

ลายตารางหมากรุกด้านล่างอยู่บนหน้าเว็บรอบภาพ นอก SVG เพื่อเผยให้เห็นความโปร่งใส ไม่ได้แสร้งว่าเป็นส่วนหนึ่งของช่องอัลฟาของภาพ

หน้าทดสอบโหลด SVG รูปแบบต่าง ๆ จริง วาดลงบน canvas ของเบราว์เซอร์ แล้วเก็บตัวอย่างมาวัดภายในแถบทดสอบหกแถบ ไบต์อัลฟาขาออกมีค่าดังนี้:

ค่าอัลฟาที่ปรับให้อยู่ในช่วงมาตรฐานคือไบต์เหล่านี้หารด้วย 255 ดังนั้น 127/255 จึงต่ำกว่า 0.5 เล็กน้อย ส่วน 128/255 สูงกว่าเล็กน้อย ตัวอย่างเหล่านี้อยู่คนละฝั่งของจุดตัดทางคณิตศาสตร์ ไบต์ PNG 8 บิตไม่สามารถแทนค่า 0.5 ได้พอดี

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

ใช้การถ่ายโอนกับอัลฟา

ฟิลเตอร์หลักมีเพียงสั้น ๆ:

<filter id="alpha" filterUnits="userSpaceOnUse"
  x="0" y="0" width="320" height="240">
  <feComponentTransfer in="SourceGraphic">
    <feFuncA type="discrete" tableValues="0 1"/>
  </feComponentTransfer>
</filter>

ใช้กับภาพด้วย filter="url(#alpha)" บริเวณฟิลเตอร์ของตัวอย่างนี้ครอบคลุมต้นทางและวิวพอร์ตขนาด 320 คูณ 240 ทั้งหมด ใช้ขอบเขตที่เหมาะกับภาพของคุณเอง แทนการคัดลอกขนาดนี้ไปใส่ไฟล์ที่ไม่เกี่ยวข้อง

เอกสารอ้างอิง feFuncA ของ MDN ระบุว่าองค์ประกอบนี้เป็นฟังก์ชันถ่ายโอนอัลฟาภายใน feComponentTransfer ส่วนเอกสารอ้างอิง component transfer อธิบายการแมปแต่ละช่องใหม่และการคำนวณบนค่าสีที่ยังไม่คูณล่วงหน้าด้วยอัลฟา

ข้อกำหนด Filter Effects ปัจจุบันกำหนดให้ฟังก์ชันช่องที่ไม่ได้ระบุใช้การแมปแบบคงค่าเดิม มาร์กอัปของเราละ feFuncR, feFuncG และ feFuncB จึงเปลี่ยนเฉพาะฟังก์ชันถ่ายโอนอัลฟา แต่ไม่ได้หมายความว่าสีที่เห็นบนพื้นหลังจะเหมือนเดิม เพราะการเปลี่ยนอัลฟาจะเปลี่ยนรูปลักษณ์เมื่อคอมโพสิต

<svg xmlns="http://www.w3.org/2000/svg" width="320" height="240" viewBox="0 0 320 240">
<defs><filter id="alpha" filterUnits="userSpaceOnUse"
  x="0" y="0" width="320" height="240">
  <feComponentTransfer in="SourceGraphic">
    <feFuncA type="discrete" tableValues="0 1"/>
  </feComponentTransfer>
</filter></defs>
<image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAADwCAYAAABxLb1rAAAJ6ElEQVR4nO3UVexsZxXG4eLBnRXcIVD3tKey66krENwhuEPQHjTFneAOwR2CM2hw6ql7m3rx4If3kgsCf+ierpk9z5c89+/6Ln4b1bphI4BV1D4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPWKOrxdXjGnHNuFZcO64T143rxfXjBnHDuFHcOG4SN42bxc3jFnHLuFVU3DpuE7eN28Xt4w5xx7hT3DnuEneNu8Xd4x5xz7hX3Ds2jk1i09gsNo8tYsvYKraObWLb2C62jx1ix1gXO8XOsUvsGkPsFrvHHrFn7BV7xz6xb+wX+8cBcWAcFAfHIXFoHBaHxxFxn7hv3C/uHw+IB8aD4sHxkHhoPCweHo+IR8aj4tHxmHhsPC4eH0+IJ8aT4snxlHhqPC2eHs+IZ8az4tnxnHhuPC+eHy+IF8aL4shYHy+Ol8RL42Xx8nhFHBWvjFfFq+M18dp4Xbw+3hBvjDfFm+Mt8dZ4W7w93hHvjHfFu+M98d54X7w/PhAfjA/Fh+Mj8dH4WHw8PhGfjE/Fp+Mz8dn4XHw+vhBfjC/Fl+Mr8dX4Wnw9vhHfjG/Ft+M7MYvvxvfi+/GD+GH8KH4cP4mfxs/i5/GL+GX8Ko6OY+LYOC6OjxPixDgpTo5T4tQ4LU6PM+LMOCvOjnPi3Dgvzo8L4sK4KC6OS+LSuCwujyvi1/Gb+G38Ln4ff4g/xp/iz/GX+Gv8Lf4e/4gN1d8OASwBFEABFEABFMASQAEUQAEsARRAARTA7gFrJIACKIACKIAlgAIogAIogAJYAiiAAiiAJYACKIACKIACWAIogAIogCWAAiiAAiiAAlgCKIACKIAlgAIogAIogAJYAiiAAiiAJYACKIACuOAEUAAFUAAFsARQAAVQAAVQAEsABVAABbAEUAAFUAAFUABLAAVQAAWwBFAABVAABVAASwAnEcANTa8EsJ0ACqAACqAAlgAKoAAKoAAKYAmgAAqgAJYACqAACqAACmAJoAAKoACWAAqgAAqgAApgCaAACqAAlgAKoAAKoAAKYAmgAAqgAJYACqAACuCCE0ABFEABFMASQAEUQAEUQAEsARRAARTAEkABFEABFEABLAEUQAEUwBJAARRAARRAASwBFEABFMASQAEUQAEUQAEsARRAARTAuvIB7P6b/0YABVAABVAASwAFUAAFsARQAAVQAAVQAEsABVAAF54ACqAACqAAlgAKoAAKoAAK4BoJoAAKoAAKYAmgAAqgAJYACqAACqAACmAJoAAK4MITQAFc+QDG0XFMHBvHxfFxQpwYJ8XJcUqcGqfF6XFGnBlnxdlxTpwb58X5cUFcGBfFxXFJXBqXxeVxRQlgOwEUQAEUQAEsARRAARRAARTANRJAARRAARTAEkABFEABLAEUQAEUQAEUwBJAARTAhSeAAiiAAiiAJYACKIACKIACuEYCKIACKIACWAIogAIogCWAAiiAAiiAAlgCKIACuPAEUAAFUAAFsARQAAVQAAVQANdIAAVQAAVQAEsABVAABbAEUAAFUAAFUABLAAVQABeeAAqgAAqgAJYACqAACqAACuAaCaAACqAACmAJoAAKoACWAAqgAAqgAApgCaAACuDCE0ABFEABFMASQAEUQAEUQAFcIwEUQAEUQAEsARRAARTAEkABFEABFMBRArhxbBKbxmaxeWwRW8ZWsXVsE9vGdrF97BA7xrrYKXaOXWLXGGK32D32iD1jr9g79ol9Y7/YPw6IA+OgODgOiUPjsDg8jigBFEABFMASQAEUQAEUQAEsARRAARTAEkABFEABXAICKIACKIACWAIogAIogAIogCWAAiiAAlgCKIACKIACKIAlgAIogAJYAiiAAiiAAiiAJYACKIACWAIogAIogAIogCWAAiiAAlgCKIACKIALTgAFUAAFUABLAAVQAAVQAAWwBFAABVAASwAFUAAFUAAFsARQAAVQAEsABVAABVAABbAEUAAFUABLAAVQAAVQAAWwBFAABVAASwAFUAAFcMEJoAAKoAAKYAmgAAqgAAqgAJYACqAACmAJoAAKoAAKoACWAAqgAApgCaAACqAACqAAlgAKoAAKYAmgAAqgAAqgAJYACqAACmAJoAAKoAAuOAEUQAEUQAEsARRAARRAARTAEkABFEABLAEUQAEUQAEUwBJAARRAASwBFEABFMCJBJDFssgB7P4blkj7AJaSADIJ7QNYWosYwO4/Ycm0D2CpLVIAu/+CJdQ+gKUmgCy19gEsvUUIYPcfsKTaBzAJnQHsvp0l1j6ASRBAllL7ACajI4DdN7Pk2gcwKVdlALtvZQLaBzApAshSaR/A5FwVAey+kYloH8AkzTOA3bcxIe0DmCQBZCm0D2Cy5hHA7puYmPYBTNqYAey+hQlqH8CkCSALrX0AkzdGALtvYKLaB7ASrkwAu7czYe0DWAkCyEJqH8DK+H8C2L2ZiWsfwEr5XwLYvZUV0D6AlSKALJT2AayctQSweyMron0AK+k/BbB7GyukfQArSQBZCO0DWFn/LoDdm1gx7QNYaf8awO4trKD2Aaw0AaRV+wBW3voF2MCKah8A0KV9AECX9gEAXdoHAHRpHwDQpX0AQJf2AQBd2gcAdGkfANClfQBAl/YBC2xoMvYdRzYZ+471Tca+Y9Zk7Ds2NBn1jrE/ZUqGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEcOKGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEcOKGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEEGCZtQ8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKDLPwG8PYVZS9xMPAAAAABJRU5ErkJggg==" width="320" height="240" filter="url(#alpha)"/>
</svg>

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

แยกการเปลี่ยนค่าเป็นขั้นออกจาก table ที่ใช้การประมาณค่าในช่วง

การถ่ายโอนทั้งสองชนิดใช้ tableValues แต่ตีความรายการต่างกัน เอกสารอ้างอิง type แสดงฟังก์ชันถ่ายโอนที่มีให้ ส่วนเอกสารอ้างอิง tableValues อธิบายรายการค่าค้นหา

สำหรับ discrete แต่ละรายการครอบคลุมช่วงขาเข้าที่กว้างเท่ากัน เมื่อมีสองรายการ 0 1 ช่วงแรกคือ 0 ≤ A < 0.5 และช่วงที่สองคือ 0.5 ≤ A ≤ 1 ขาออกจะกระโดดระหว่างสองค่า

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

สูตรช่วงในข้อกำหนด ยังอธิบายทางเลือกต่อไปนี้ด้วย:

ภาพหน้าจอของเราทดสอบกรณี discrete และ table ที่มีสองรายการ แถวที่มีสี่รายการอธิบายการแมปตามข้อกำหนด ไม่ใช่ภาพรูปแบบเพิ่มเติมที่วัดจริง เลือก type อย่างตั้งใจ อย่าคิดว่ารายการที่มีเพียงศูนย์กับหนึ่งจะต้องสร้างเกณฑ์แบบทวิภาคเสมอ

แยกอัลฟาขาเข้าออกจาก opacity ที่ใช้ภายหลัง

ส่งอัลฟาต้นทางจริงให้ฟิลเตอร์ ในตัวอย่างนี้อัลฟาเก็บอยู่ในพิกเซล PNG สำหรับการทดสอบเวกเตอร์ ให้ใช้อัลฟาของสีเติมหรือ fill-opacity ก่อนใช้ฟิลเตอร์

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

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

หากความโปร่งแสงเป็นส่วนหนึ่งของงานออกแบบ ให้รักษาไว้หรือใช้การถ่ายโอนแบบค่อยเป็นค่อยไปแทนการบังคับตัด สำหรับมาสก์การมองเห็นสีเดียวโดยตั้งใจ คู่มือ CSS mask ของ SVG อธิบายกระบวนการแสดงผลอีกแบบหนึ่ง

สีขาวทึบต้องวินิจฉัยด้วยวิธีอื่น

ปื้นสีขาวยังอยู่เพราะอัลฟาทึบทั้งหมด การดำเนินการนี้เลือกตามอัลฟา ไม่ใช่ตามว่าพิกเซลดูเป็นสีขาวหรือไม่ พิกเซลพื้นหลังที่ทึบทั้งหมดไม่กลายเป็นโปร่งใสภายใต้การแมป discrete 0 1 นี้

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

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

เตรียมราสเตอร์โปร่งใสก่อนสร้างเวกเตอร์กลับขึ้นมา

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

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

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

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

discrete tableValues 0 1 ใช้จุดตัดอัลฟาเท่าไร? อัลฟาขาเข้าที่ต่ำกว่า 0.5 แมปเป็น 0 ส่วนค่าที่เท่ากับหรือสูงกว่า 0.5 แมปเป็น 1 ในแถบ PNG 8 บิตที่ทดสอบ ไบต์ 127 กลายเป็นโปร่งใสและไบต์ 128 กลายเป็นทึบ

ทำไม tableValues 0 1 จึงไม่เปลี่ยนความโปร่งใส? เมื่อใช้ type table รายการเหล่านี้กำหนดการประมาณค่าในช่วงเชิงเส้นจาก 0 ถึง 1 ซึ่งคงค่าเดิม ใช้ type discrete สำหรับการแมปสองขั้นที่แสดงในบทความนี้

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

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

1. W3C — Filter Effects ระดับ 1 — นิยามค่าเริ่มต้นแบบคงค่าเดิม การถ่ายโอนช่องที่ยังไม่คูณอัลฟาล่วงหน้า และสูตรช่วงของ table/discrete
2. MDN — feComponentTransfer — อธิบายการแมปช่องใหม่ที่คำสั่งฟิลเตอร์พื้นฐานนี้ทำ
3. MDN — feFuncA — ระบุฟังก์ชันถ่ายโอนช่องอัลฟา
4. MDN — type — แสดงชนิดฟังก์ชันถ่ายโอนองค์ประกอบและบริบทแอตทริบิวต์
5. MDN — tableValues — อธิบายรายการค่าค้นหาที่ใช้ในการถ่ายโอน table และ discrete

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