แปลง WebP เป็น SVG: ลากเส้นให้เป็นพาธจริง

WebP เป็นภาพราสเตอร์ หรือตารางพิกเซลเหมือน JPG หรือ PNG เอกสาร WebP ของ Google นิยามทั้ง WebP แบบสูญเสียและไม่สูญเสียว่าเป็นรูปแบบบีบอัดภาพ ขณะที่ SVG นิยามกราฟิกเวกเตอร์ด้วยรูปทรงและพาธ จึงไม่มี "บันทึกเป็น SVG" ที่เปลี่ยนพิกเซลเป็นรูปทรงเวกเตอร์ ภาพต้องถูกลากเส้นเป็นรูปทรงและพาธก่อน (ภาพรวม WebP ของ Google; W3C SVG 2)

ต่อไปนี้คือวิธีแปลง WebP เป็น SVG สะอาดที่แก้ไขได้จริง สิ่งที่ต้องระวัง และกรณีที่ไม่ควรเสียเวลาแปลง

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

คำอธิบายโดยย่อ

• WebP เป็นราสเตอร์ จึงต้องลากเส้นเป็นเวกเตอร์ แทนการ "บันทึก" ให้เป็นเวกเตอร์
• ระวังเวกเตอร์ปลอม: เครื่องมือแปลงที่ฝัง WebP ใน .svg ซึ่งยังแตกเป็นพิกเซล
• WebP มีทั้งแบบสูญเสียและไม่สูญเสีย แบบสูญเสียมีนอยส์การบีบอัด จึงควรเริ่มจากต้นฉบับสะอาดที่สุด
• งานสีเรียบ คอนทราสต์สูง แปลงได้ดี ภาพถ่ายไม่เหมาะ
• ลากเส้นด้วยเครื่องมือแปลง WebP เป็น SVG แล้วตรวจว่าแก้ไขได้จริง

เริ่มจากส่วนที่เครื่องมือแปลงส่วนใหญ่มักข้าม

ควรเข้าใจให้ชัดว่าเกิดอะไรขึ้นจริง เพราะผลค้นหาอันดับต้น ๆ ไม่ได้อธิบายชัด:

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

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

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

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

กับดักที่ต้องหลีกเลี่ยง: SVG ฝังราสเตอร์ผ่านองค์ประกอบ <image> ได้ ไฟล์เช่นนั้นมีส่วนขยาย .svg แต่พิกเซลฝังไม่ได้เปลี่ยนเป็นพาธที่แก้ไขได้ และยังเบลอเมื่อขยาย ดูข้อกำหนด W3C สำหรับเนื้อหาฝังใน SVG คุณต้องใช้เครื่องมือที่ลากเส้นภาพเป็นพาธจริง

สูญเสียหรือไม่สูญเสีย? ส่งผลต่อสิ่งที่ได้

WebP มีแบบสูญเสียและไม่สูญเสีย และแบบที่คุณมีส่งผลต่อการลากเส้น:

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

WebP ยังรองรับความโปร่งใสผ่านช่องอัลฟา หากภาพมีพื้นโปร่งใส ให้ใช้เครื่องมือแปลงที่รักษาไว้ ไม่เช่นนั้นจะได้สี่เหลี่ยมสีเติมที่ไม่ต้องการหลังรูปทรง ดูข้อกำหนดบิตสตรีม WebP แบบไม่สูญเสียของ Google

วิธีแปลง WebP เป็น SVG ทีละขั้น

1. เริ่มจากต้นฉบับดีที่สุด ใช้ WebP ต้นฉบับคุณภาพสูงที่สุด หากเป็นไฟล์สูญเสียที่บีบอัดหนัก คาดว่าผลลากเส้นจะมีนอยส์มากกว่า
2. ใช้เครื่องมือแปลงเวกเตอร์จริงแทนเครื่องมือแปลงไฟล์ทั่วไป คุณต้องการเครื่องมือที่ลากเส้นภาพเป็นพาธ ไม่ใช่ฝังราสเตอร์
3. แปลงเป็นเวกเตอร์ วาง WebP ลงในเครื่องมือแปลง WebP เป็น SVG แล้วให้สร้างภาพใหม่เป็นพาธสะอาด โหนดน้อย
4. ลดจำนวนสีและรักษาความโปร่งใส รวมสีเกือบซ้ำ (WebP แบบสูญเสียเพิ่มมาบางสี) และยืนยันว่าพื้นโปร่งใสยังโปร่งใส
5. ดาวน์โหลดและตรวจ ตามด้านล่าง

ตัวอย่างการทำงานด้วย PerfectVector

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

ตรวจผลอย่างรวดเร็ว การแปลง WebP เป็น SVG จริงมี:

• พาธที่แก้ไขได้ แทน WebP ฝังใน .svg (ซูมแล้วควรยังคม)
• จำนวนโหนดน้อย หมายถึงเส้นโค้งสะอาดแทนจุดหลายพัน (อ่านเพิ่มเรื่องจำนวนโหนด)
• รักษาความโปร่งใส หากต้นฉบับมี โดยไม่มีสี่เหลี่ยมพื้นหลังเกิน
• พาเลตเรียบร้อย มีเฉพาะสีที่ตั้งใจ ไม่มีสีเกินจาก WebP แบบสูญเสีย

เมื่อใดควรข้ามเครื่องมือแปลง

การลากเส้นไม่เหมาะกับ WebP ทุกภาพ:

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

เช่นเคย การแปลงเวกเตอร์เหมาะกับงานภาพประกอบสีเรียบ เช่น โลโก้ ไอคอน และกราฟิกง่าย ๆ ไม่ใช่ภาพถ่าย (หากยังไม่คุ้น เริ่มที่การแปลงภาพเป็นเวกเตอร์คืออะไร)

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

บันทึก WebP เป็น SVG ตรง ๆ ได้หรือไม่? ไม่ได้ WebP เป็นราสเตอร์ (พิกเซล) และ SVG เป็นเวกเตอร์ (รูปทรงและพาธ) ไม่มี "บันทึกเป็น" ที่เปลี่ยนจากอย่างหนึ่งเป็นอีกอย่าง ภาพต้องถูกลากเส้นเป็นรูปทรงเวกเตอร์ ซึ่งเป็นงานของเครื่องมือแปลงเวกเตอร์

ทำไม WebP ยังดูแตกเป็นพิกเซลหลัง “แปลง” เป็น SVG? เครื่องมือแปลงทั่วไปน่าจะฝัง WebP ในเปลือก .svg แทนการลากเส้น นั่นเป็นเวกเตอร์ปลอมและยังแตกเป็นพิกเซล ใช้เครื่องมือที่ลากเส้นภาพเป็นพาธจริงที่แก้ไขได้

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

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

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

แหล่งข้อมูล

1. Google for Developers — รูปแบบภาพสำหรับเว็บ — ภาพรวมอย่างเป็นทางการของ WebP แบบสูญเสีย ไม่สูญเสีย และความสามารถอัลฟา
2. Google for Developers — ข้อกำหนดภาชนะ WebP — รายละเอียดรูปแบบสำหรับภาพนิ่ง แอนิเมชัน และความโปร่งใส
3. W3C — Scalable Vector Graphics (SVG) 2 — มาตรฐานกำหนดโมเดลกราฟิกเวกเตอร์ของ SVG
4. W3C — เนื้อหาที่ฝังใน SVG — ข้อกำหนดที่แสดงว่า SVG มีราสเตอร์ฝังได้โดยไม่แปลงเป็นพาธ

---

มีโลโก้หรือกราฟิก WebP ที่ต้องปรับขนาดหรือไม่? แปลงเป็น SVG จริงที่แก้ไขได้ ลากเส้น ลดจำนวนสี แล้วดาวน์โหลดในไม่กี่วินาที