แปลง PNG เป็น SVG แบบเวกเตอร์

PNG เป็น SVG

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

การแปลงเป็นเวกเตอร์ทำงานอย่างไร

  1. 1

    วางไฟล์ PNG

    ผลลัพธ์ดีที่สุดเมื่อใช้ภาพต้นฉบับที่คมชัด ด้านที่ยาวที่สุดควรมีอย่างน้อย 512 px และมีพื้นที่สีเรียบ

  2. 2

    เลือกโหมด

    เลือกแบบขาวดำสำหรับการ trace ด้วย Potrace สีเดียว หรือแบบหลายสีที่ลดจำนวนสีเป็นพาเลตและสร้างพาธแยกตามแต่ละสี

  3. 3

    ปรับ threshold และความเรียบ

    ค่า threshold กำหนดว่าส่วนใดนับเป็นสีดำ ส่วนการทำให้เรียบจะช่วยลดขั้นบันไดของพิกเซลที่หยัก

  4. 4

    ดูตัวอย่างและดาวน์โหลด

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

ภาพแบบใดแปลงเป็นเวกเตอร์ได้ดี

แหล่งภาพ ผลลัพธ์ที่คาดหวัง
โลโก้สีดำบนพื้นขาว SVG พาธเดียวที่สะอาดและใกล้เคียงต้นฉบับระดับพิกเซล
ไอคอนสีเรียบ 2–4 สี SVG หลายพาธที่ดีพร้อมขอบคม
ภาพสเก็ตช์หมึกวาดมือ ใช้งานได้เมื่อปรับความเรียบที่ 3–5
ภาพถ่าย ไม่เหมาะ — สีจำนวนมากจะกลายเป็นก้อนจุดรบกวน
ภาพหน้าจอที่มี anti-aliasing พอใช้ได้หลังตั้ง threshold แต่รายละเอียดระดับ sub-pixel จะหายไป

การตั้งค่าที่สำคัญ

  • Threshold (โหมดขาวดำ). จุดตัดระหว่างส่วนที่ถูกเติมสีกับส่วนที่โปร่งใส ค่าเริ่มต้นคือ 128; ลดลงเพื่อเก็บเส้นบาง ๆ และเพิ่มขึ้นเพื่อตัดพื้นหลังที่เป็นเม็ดออก
  • จำนวนสี (โหมดหลายสี). จำนวนขั้นของพาเลต 4–8 เพียงพอสำหรับโลโก้ส่วนใหญ่ หากเกิน 16 มักได้ผลลัพธ์ที่มี noise และแสดงผลช้าลงในตัวดู SVG
  • การทำให้เรียบ / ค่า threshold ของมุม. ค่าสูงจะทำให้มุมโค้งมน เหมาะกับรูปทรงธรรมชาติ แต่ไม่เหมาะกับขอบไอคอนที่ต้องคม
  • การลดความซับซ้อนของพาธ. ลดจำนวน node การลดแบบแรงช่วยให้ไฟล์เล็กลง แต่อาจทำให้เส้นบาง ๆ บิดเบี้ยว

หลังจากส่งออก

เปิดไฟล์ SVG ใน Illustrator, Inkscape หรือ Figma แล้วตรวจสอบความหนาแน่นของ node พาธที่เก็บรายละเอียดด้วยมือมักเล็กและลื่นกว่าพาธที่ trace อัตโนมัติ สำหรับโลโก้ที่ต้องใช้พิมพ์ ควรวาดใหม่ด้วยมือโดยใช้ร่องรอยเวกเตอร์เป็นต้นแบบ

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

การ trace แบบเวกเตอร์จะรวมบริเวณสีให้เป็นพาธ ภาพถ่ายมีการไล่ระดับสีจำนวนมาก เมื่อติดตามแล้วจึงมักกลายเป็นโมเสกจุดรบกวน สำหรับภาพถ่ายควรใช้รูปแบบราสเตอร์อย่าง JPG หรือ WebP มากกว่า

ได้ หาก PNG ต้นฉบับมีพื้นหลังโปร่งใส SVG ที่ trace แล้วจะคงความโปร่งใสนั้นไว้ หากต้นฉบับเป็น JPG ให้ใช้เครื่องมือลบพื้นหลังก่อน

ได้ SVG ใช้องค์ประกอบ <path> มาตรฐานพร้อมพิกัดแบบ absolute โปรแกรมแก้ไขเวกเตอร์จึงอ่านได้และให้คุณแก้ไขทีละ node ได้

ขนาดที่เหมาะคือ 512–2048 px ที่ด้านยาว ไอคอนเล็กเกินไปจะเสียรายละเอียด ส่วนภาพใหญ่มากจะสร้าง node หลายพันจุดและทำให้ SVG ใหญ่เกินจำเป็น

ไม่ Potrace ทำงานเป็น WebAssembly ในเบราว์เซอร์ ไม่มีการส่งข้อมูลออกไป

เครื่องมือที่เกี่ยวข้อง

ตัวสร้างบาร์โค้ด

สร้างบาร์โค้ด 1D ที่สแกนได้ใน Code 128, Code 39, EAN-13, UPC-A, ITF-14 และ Codabar ส่งออกเป็น PNG, SVG หรือ PDF สำหรับงานพิมพ์

เครื่องมือปรับขนาดรูปภาพสำหรับโซเชียลมีเดีย

ปรับขนาดรูปภาพหนึ่งภาพเป็นพรีเซ็ตโซเชียลมีเดียในตัวสำหรับ Instagram, Facebook, X, LinkedIn, YouTube, Pinterest และ TikTok ดูตัวอย่าง PNG แต่ละไฟล์และดาวน์โหลดขนาดที่ต้องใช้

เครื่องมือสร้าง QR Code

สร้าง QR Code สำหรับ URL ข้อความธรรมดา ข้อมูล WiFi vCard และกิจกรรมในปฏิทิน ดาวน์โหลดเป็น PNG หรือ SVG ได้โดยไม่ต้องสมัครและไม่มีลายน้ำ

ตัวสร้าง GIF

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

บีบอัด GIF

ลดขนาด GIF แอนิเมชันในเบราว์เซอร์ด้วยการย่อมิติ เก็บเฟรมน้อยลง และปรับคุณภาพการเข้ารหัส ดูตัวอย่างลูปก่อนดาวน์โหลด

แปลง WebP เป็น JPG

แปลงรูปภาพ WebP เป็น JPG/JPEG ได้โดยตรงในเบราว์เซอร์ เลือกคุณภาพ ผสานความโปร่งใสเข้ากับสีพื้นหลัง แล้วดาวน์โหลดโดยไม่ต้องอัปโหลดไฟล์