SVG shape-rendering crispEdges: ช่วยเมื่อไร?

ใช้ shape-rendering="crispEdges" เมื่อ SVG ตั้งใจให้ขอบแข็งและส่วนใหญ่เป็นเส้นตรง และทดสอบที่ขนาดแสดงผลสุดท้ายแล้วดูดีขึ้น หากความต่างเล็กน้อยให้คงค่าเริ่มต้น auto สำหรับภาพที่มีเส้นโค้ง คำแนะนำนี้อาจทำให้ขอบหยาบขึ้น มันเปลี่ยนวิธีที่ตัวเรนเดอร์ วาด รูปทรงที่มีอยู่ ไม่ได้เปลี่ยนตัวรูปทรง ข้อกำหนด SVG 2 เรียกมันว่าคำแนะนำ และอนุญาตให้ตัวเรนเดอร์ลดการลบรอยหยักหรือจัดขอบบางส่วนให้ตรงพิกเซลอุปกรณ์

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

crispEdges ขอให้ตัวเรนเดอร์ทำอะไร

SVG มีค่า shape-rendering สี่แบบ เป็นการจัดลำดับความสำคัญ ไม่ใช่รูปแบบส่งออกสี่ชนิด ค่าเริ่มต้น auto ให้ตัวเรนเดอร์สมดุลความเร็ว ความเปรียบต่างของขอบ และความแม่นยำเรขาคณิต crispEdges เน้นความเปรียบต่างของขอบและอาจลดการลบรอยหยัก ส่วน geometricPrecision เน้นเรขาคณิตที่ตรงต้นฉบับ เอกสารอ้างอิงแอตทริบิวต์ SVG ของ MDN อธิบายว่าตัวเรนเดอร์ อาจ จัดการขอบทั้งหมดต่างไป หรือเฉพาะขอบเกือบแนวนอนและแนวตั้ง ไม่มีการกำหนดว่าต้องใช้ฟิลเตอร์เพิ่มความคม

แอตทริบิวต์บนองค์ประกอบ SVG แม่ถ่ายทอดให้รูปทรงลูกได้ การใช้ที่รากจึงอาจกระทบวงกลมที่ควรเรียบ คุณกำหนดเฉพาะสี่เหลี่ยมหรือพาธเดียวได้ หากทั้งแอตทริบิวต์นำเสนอ SVG และการประกาศ CSS shape-rendering ใช้กับวัตถุเดียวกัน พร็อพเพอร์ตี CSS จะมีลำดับความสำคัญสูงกว่า

เราเปรียบเทียบรูปทรงเดียวกันที่สองขนาด

เราสร้างสัญลักษณ์กริดสี่เหลี่ยมและเส้นรอบรูปโค้งเป็นรูปทรง SVG ต้นฉบับ มาร์กอัป สีเติม และ viewBox เหมือนกันทั้งสามคอลัมน์ ต่างเฉพาะค่า shape-rendering แต่ละรูปเรนเดอร์ที่ 63 และ 111 พิกเซล CSS ใน Chromium โดยซูมเบราว์เซอร์ 100% ภาพนี้จับจากการทดสอบในเครื่องจริง ไม่ใช่ภาพประกอบผลที่จินตนาการขึ้น

เรขาคณิต SVG เดียวกัน สามคำแนะนำ สองขนาด

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

นี่เป็นการเรนเดอร์ Chromium ครั้งหนึ่ง ไม่ใช่การศึกษาความเข้ากันได้ของเบราว์เซอร์ โปรแกรมดู PDF โปรแกรมออกแบบ หรือเบราว์เซอร์ที่สเกลอุปกรณ์ต่างกันอาจแปลงพาธเดียวกันเป็นพิกเซลต่างไป นิยาม SVG 2 จงใจเปิดทางเลือกการนำไปใช้ไว้

ทดสอบกับรูปเดียวก่อนใช้ทุกส่วน

บันทึกสำเนา SVG แล้วใส่คำแนะนำบนรูปทรงตัวแทน เช่น ใช้กับส่วนสี่เหลี่ยมของไอคอน โดยให้รายละเอียดโค้งใช้ auto ต่อไป:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <rect x="4" y="4" width="16" height="8" fill="#154b67"
        shape-rendering="crispEdges" />
  <path d="M5 18 Q12 11 19 18" fill="none" stroke="#23a6a1"
        stroke-width="2" shape-rendering="auto" />
</svg>

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

เลือกวิธีแก้ให้ตรงอาการจริง

สำหรับสไปรต์ PNG ที่กริดพิกเซลแม่นยำเป็นตัวงานออกแบบ การเก็บราสเตอร์อาจชัดเจนที่สุด CSS image-rendering: pixelated ควบคุมวิธีสุ่มตัวอย่างภาพที่ปรับสเกล เป็นคนละพร็อพเพอร์ตีกับ SVG shape-rendering คู่มือแปลงพิกเซลอาร์ต อธิบายว่าเมื่อไรควรรักษากริด สร้างบล็อกเวกเตอร์บนกริด หรือจงใจทำเส้นรอบรูปให้เรียบ

เมื่อใด PerfectVector จึงเหมาะ

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

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

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

crispEdges ปิดการลบรอยหยักสำหรับทุกรูปทรง SVG หรือไม่? ไม่ มันขอให้ตัวเรนเดอร์เน้นความเปรียบต่างขอบ ข้อกำหนดอนุญาตการนำไปใช้ต่างกัน รวมถึงแบบที่เปลี่ยนเฉพาะขอบเกือบแนวตั้งหรือแนวนอนบางส่วน ทดสอบผลในโปรแกรมดูที่จะใช้

ควรใส่ shape-rendering="crispEdges" ให้ทั้ง SVG หรือไม่? เฉพาะเมื่อรูปทรงลูกทุกตัวได้ประโยชน์ คำแนะนำระดับรากกระทบลูกที่เป็นเส้นโค้งได้ด้วย การใช้แอตทริบิวต์กับรูปสี่เหลี่ยมเดียวประเมินง่ายกว่าและมีโอกาสทำเส้นโค้งหยาบน้อยกว่า

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

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

1. W3C — พร็อพเพอร์ตี shape-rendering ใน SVG 2 — นิยามสี่ค่าเป็นคำแนะนำตัวเรนเดอร์และอธิบายข้อแลกเปลี่ยนที่อนุญาต
2. MDN — แอตทริบิวต์ shape-rendering ของ SVG — อธิบายรูปทรง SVG ที่ใช้ได้ การรับทอด และลำดับความสำคัญ CSS
3. MDN — พร็อพเพอร์ตี shape-rendering ของ CSS — อธิบายพฤติกรรมพร็อพเพอร์ตีและเหตุที่การเรนเดอร์เส้นโค้งต่างกันได้
4. MDN — พร็อพเพอร์ตี image-rendering ของ CSS — แยกการปรับสเกลพิกเซลราสเตอร์ออกจากการเรนเดอร์ขอบรูปทรงเวกเตอร์