วิธีตรวจว่า SVG มีภาพแรสเตอร์อยู่หรือไม่

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

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

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

SVG มีอะไรอยู่ได้บ้าง

SVG เป็นรูปแบบกราฟิกที่ใช้ XML และรองรับเนื้อหามากกว่าพาธ ข้อกำหนดเนื้อหาฝัง SVG 2 นิยามองค์ประกอบ <image> ซึ่งวางไฟล์อ้างอิงทั้งไฟล์ไว้ในสี่เหลี่ยม ไฟล์นั้นอาจเป็น PNG, JPEG หรือ SVG อีกไฟล์

จึงเกิดโครงสร้างที่พบบ่อยสี่แบบ:

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

การตรวจที่ 1: ตรวจวัตถุ

เปิด SVG ใน Illustrator, Inkscape, Affinity Designer หรือโปรแกรมอื่นที่มีแผง Objects หรือ Layers เลือกพื้นที่ที่สงสัยว่าเป็นแรสเตอร์

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

วิธีนี้เหมาะกับนักออกแบบที่ไม่อยากอ่าน XML แต่มีข้อจำกัดหนึ่งอย่าง: วัตถุ <image> สี่เหลี่ยมอาจอ้างอิง SVG อีกไฟล์ การตรวจซอร์สบอกสิ่งที่วัตถุนั้นโหลดจริง

การตรวจที่ 2: ตรวจซอร์ส SVG

ทำสำเนาแล้วเปิดไฟล์ .svg ในโปรแกรมข้อความธรรมดา ค้นหา <image หากไม่มีองค์ประกอบภาพ แสดงว่าไม่พบกลไกฝังภาพที่พบบ่อย หากพบ ให้อ่านค่า href

PNG ที่ฝังมักเริ่มแบบนี้:

<image href="data:image/png;base64,iVBORw0KGgo..." />

JPEG ที่ฝังมักเริ่มด้วย data:image/jpeg;base64, เอกสาร URL ข้อมูลของ MDN อธิบายว่าข้อมูลอยู่ใน URL โดยตรง และอาจเข้ารหัส Base64 ข้อมูลยาวมากที่อ่านไม่รู้เรื่องเป็นเรื่องปกติของรูปแบบนี้

แรสเตอร์ที่ลิงก์มีลักษณะเช่นนี้:

<image href="photos/product-shot.png" />

PNG นั้นไม่ได้เก็บใน SVG เอกสารพึ่งไฟล์แยกที่พาธนั้น หากย้ายหรือส่ง SVG ทางอีเมลโดยไม่มีภาพ งานอาจหายไป

ท้ายที่สุด ตัวอย่างนี้ไม่ได้พิสูจน์ว่าเป็นเนื้อหาแรสเตอร์:

<image href="icons/mark.svg" />

เอกสาร <image> ของ MDN ระบุชัดว่าองค์ประกอบนี้แสดงรูปแบบแรสเตอร์หรือ SVG อีกไฟล์ได้ ตรวจชนิดสื่อหรือนามสกุลก่อนจัดประเภท

สามโครงสร้างภายในหรือข้างไฟล์ SVG

การฝังกับการลิงก์เป็นคนละปัญหา

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

ความแตกต่างนี้สำคัญตอนส่งงาน:

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

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

เหตุใดการซูมจึงไม่เพียงพอ

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

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

ตัดสินใจว่าจะเก็บ ลิงก์ใหม่ หรือแทนที่

เก็บแรสเตอร์เมื่อพิกเซลเป็นความตั้งใจ

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

ลิงก์ใหม่หรือฝังเมื่อปัญหาคือการส่งต่อ

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

แทนแรสเตอร์เมื่อควรได้พาธ

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

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

ผู้ใช้ Scratch ควรอ่านเหตุใด Convert to Vector ไม่ได้แกะรอยบิตแมป ก่อนส่งออกไฟล์ห่อภาพอีกครั้ง

สร้างเอฟเฟกต์ที่ถูกแปลงเป็นแรสเตอร์ตอนส่งออกใหม่

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

การตรวจส่งงาน SVG ผสม

ก่อนส่งไฟล์ไปเว็บไซต์ ร้านพิมพ์ เครื่องตัด หรือผู้ร่วมงาน:

1. ค้นหา <image, data:image/, .png, .jpg และ .jpeg ในซอร์ส
2. ยืนยันว่าทรัพยากรอ้างอิงแต่ละชิ้นควรเป็นแรสเตอร์ เวกเตอร์ หรือไม่มีอยู่
3. ย้ายไฟล์ลิงก์ชั่วคราวแล้วเปิด SVG อีกครั้งเพื่อเผยการพึ่งไฟล์ที่ขาด
4. เลือกงานสำคัญและยืนยันว่าส่วนที่ควรแก้ไขได้เป็นพาธ
5. ตรวจขนาดพิกเซลเดิมของแรสเตอร์เทียบกับขนาดแสดงหรือพิมพ์สุดท้าย
6. เปิดสำเนาที่ส่งในโปรแกรมอีกตัว
7. เก็บต้นฉบับและภาพแรสเตอร์ตรวจแบบเมื่อรูปลักษณ์สำคัญกว่าการแก้ไข

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

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

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

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

รู้ได้อย่างไรว่าแรสเตอร์ฝังหรือลิงก์? ภาพฝังมักมี href เริ่มด้วย data:image จึงมีไบต์อยู่ภายใน SVG ภาพลิงก์มีพาธหรือ URL เช่น images/photo.png และพึ่งทรัพยากรแยกนั้น

ลบภาพฝังจาก SVG ได้ไหม? ได้ ลบหากไม่จำเป็น แทนด้วยแรสเตอร์ที่ต้องการ หรือแปลงงานสีเรียบที่เหมาะเป็นเวกเตอร์แล้วแทนด้วยพาธที่ได้ เก็บสำรองก่อนแก้ XML

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

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

1. W3C — เนื้อหาฝัง SVG 2 — นิยามองค์ประกอบ <image>, href และทรัพยากรแรสเตอร์หรือ SVG ที่อ้างอิงได้
2. MDN — SVG <image> — เอกสารใช้งานจริงของเนื้อหาภาพที่รองรับและการกำหนดขนาด
3. คู่มือเริ่มต้น Inkscape — การนำเข้าภาพ — อธิบายภาพนำเข้าแบบลิงก์เทียบกับฝัง และข้อแลกเปลี่ยนการส่งต่อ
4. MDN — URL ข้อมูล — อธิบายรูปแบบ data: ที่มักใช้เก็บข้อมูลภาพภายใน SVG

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