วิธีแปลง PNG เป็น SVG: เทรซโลโก้ ไอคอน และลายเส้น

PNG เป็นภาพแรสเตอร์ คือตารางพิกเซลขนาดคงที่ ซึ่งแต่ละพิกเซลมีสีและอาจมีค่าความโปร่งใสด้วย โลโก้ขนาด 500 × 500 px มีช่องสี่เหลี่ยมเพียง 250,000 ช่องเท่านั้น การขยายเป็นขนาดโปสเตอร์จึงทำได้เพียงทำให้แต่ละช่องใหญ่ขึ้นหรือทำให้รอยต่อระหว่างช่องเบลอ ส่วน SVG เป็นภาพเวกเตอร์ ซึ่งเป็นไฟล์ข้อความที่ระบุรูปทรง เช่น <path>, <circle> และ <rect> พร้อมพิกัดและสีที่ใช้เติม เบราว์เซอร์หรือเครื่องตัดจะวาดรูปทรงเหล่านี้ใหม่ตามขนาดที่ต้องการ โลโก้เวกเตอร์จึงคมชัดทั้งบนหน้าจอโทรศัพท์และบนแบนเนอร์งานแสดงสินค้า

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

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

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

ภาพถ่ายเป็นกรณีตรงกันข้าม ภาพบุคคลหรือภาพสินค้ามีโทนสีที่ต่างกันเล็กน้อยนับพันโทนผสมกลมกลืนกัน และฟอร์แมตเวกเตอร์ไม่มีวิธีอธิบายสิ่งนั้นได้อย่างมีประสิทธิภาพ หากสั่ง trace ที่ 16 สี จะได้ภาพประกอบแบบ posterize ที่เห็นแถบสีชัด หากสั่ง 64 สี จะได้รูปทรงเล็ก ๆ หลายหมื่นชิ้นในไฟล์ที่ใหญ่กว่า PNG มาก แต่ก็ยังไม่เหมือนภาพถ่าย การไล่สีนุ่ม ๆ เงา และแสงเรืองก็กลายเป็นแถบบาง ๆ ซ้อนกันในทำนองเดียวกัน ข้อความขนาดเล็กเป็นจุดที่สามที่มีปัญหา ที่ขนาด 10–12 px การลดรอยหยัก (anti-aliasing) ทำให้ตัวอักษรทุกตัวกลืนไปกับพื้นหลัง และตัว trace แยก "e" กับ "o" ไม่ออก

ความละเอียดสำคัญกว่าการตั้งค่าใด ๆ ตัว trace ปรับเส้นโค้งแต่ละเส้นให้เข้ากับขั้นบันไดของพิกเซลตามขอบ ยิ่งขั้นบันไดละเอียด เส้นโค้งก็ยิ่งตรงตามจริง หากคุณส่งออก PNG เองจาก Figma, Canva, Photoshop หรือสไลด์ ให้ส่งออกใหม่ที่ขนาดสองถึงสามเท่าของขนาดที่แสดง โลโก้ที่กว้าง 1500–2000 px ให้ข้อมูลแก่ตัว trace เพียงพอ อย่าขยาย PNG ขนาดเล็กด้วยตัวขยายภาพ AI ก่อน เว้นแต่ผลลัพธ์ดูสะอาดที่การซูม 100 % เพราะพื้นผิวขอบที่ AI สร้างขึ้นจะถูก trace ตามอย่างซื่อตรงเหมือนขอบจริง

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

สุดท้าย ลดจำนวนสีเองก่อนที่ตัว trace จะทำให้ ซ่อนเงา แสงเรือง และเลเยอร์ไล่สีในไฟล์ต้นฉบับ และแทนการไล่สีด้วยสีกลางของมัน หากเวกเตอร์ไม่จำเป็นต้องมีการไล่สี นับสีพื้นทึบที่เหลือรวมสีเส้นขอบ แล้วจดตัวเลขไว้ เพราะเป็นตัวเลขที่มีประโยชน์ที่สุดที่คุณจะกรอกในขั้นตอนถัดไป หากต้องเลือกระหว่าง JPEG กับ PNG ของโลโก้เดียวกัน ให้เลือก PNG เพราะการบีบอัด JPEG ทำให้เกิดสัญญาณรบกวนรอบขอบทุกจุด ตามที่อธิบายไว้ใน JPG vs JPEG vs PNG

ตัว trace ทุกตัวถามคำถามสามข้อเดียวกัน แม้ป้ายชื่อจะต่างกัน ข้อแรกคือจะเก็บสีไว้กี่สี ในตัวแปลง PNG เป็น SVG โหมดสี ให้เลือกระหว่าง สี, ระดับสีเทา และ ขาวดำ ส่วน จำนวนสี กำหนดว่าจะจัดพิกเซลเป็นกี่กลุ่ม ตั้งแต่ 2 ถึง 64 ให้ตั้งตามจำนวนสีที่คุณจดไว้ หากตั้งสูงเกินไป ตัว trace จะแยกพิกเซลขอบที่ลดรอยหยักออกเป็นสีบาง ๆ ของตัวเอง ซึ่งปรากฏเป็นรัศมีจาง ๆ รอบทุกรูปทรง หากตั้งต่ำเกินไป สีแบรนด์สองสีจะถูกรวมเป็นสีเดียว

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

คำถามข้อที่สามใช้กับการ trace ขาวดำเท่านั้น คือจะขีดเส้นแบ่งระหว่างหมึกกับกระดาษตรงไหน ค่าขีดแบ่ง มีค่าตั้งแต่ 1 ถึง 254 โดยค่าเริ่มต้นคือ 128 พิกเซลที่เข้มกว่าค่านี้จะกลายเป็นสีดำ พิกเซลที่สว่างกว่าจะเป็นพื้นที่ว่าง สำหรับลายเซ็นที่เขียนด้วยปากกาลูกลื่นสีน้ำเงินเส้นบาง ให้เพิ่มเป็น 160–180 เพื่อให้เส้นจางยังคงอยู่ สำหรับภาพวาดด้วยมาร์กเกอร์เส้นหนาบนกระดาษที่ออกเทาเล็กน้อย ให้ลดเป็นราว 100 เพื่อไม่ให้พื้นผิวกระดาษกลายเป็นจุดกระจาย เปลี่ยนทีละค่าแล้วเปรียบเทียบ เพราะการตั้งค่าเหล่านี้ส่งผลต่อกัน

อย่าดูแค่ภาพขนาดย่อ ให้เปิดไฟล์ SVG ในเบราว์เซอร์ แล้วซูมที่ 400–800 % ตรงเส้นโค้งที่แคบที่สุด เช่น ส่วนวงกลมของตัวอักษรหรือปลายแหลม ผลที่ดีจะเห็นส่วนโค้งเรียบและมุมคมตรงที่ดีไซน์มีมุม ส่วนผลที่ไม่ดีจะเห็นเส้นสั่น รอยบุ๋ม และปลายมน จากนั้นเปิดไฟล์ในโปรแกรมเวกเตอร์ เช่น Inkscape, Illustrator หรือ Figma แล้วเปิดมุมมองเส้นขอบหรือโหนด โลโก้สองสีแบบเรียบง่ายมักใช้โหนดไม่กี่ร้อยจุด หากของคุณมีหลายพันจุด แปลว่าตัวติดตามเส้นตามสัญญาณรบกวน และเส้นพาธจะแก้ไขหรือตัดได้ยาก

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

ตัวเลือกบนเดสก์ท็อปที่ใช้ฟรีคือ Inkscape นำเข้า PNG เลือกภาพ แล้วเปิด Path > Trace Bitmap (Shift+Alt+B) โหมดสแกนครั้งเดียว เช่น Brightness cutoff ให้พาธสีดำหนึ่งเส้น เหมาะกับงานเส้น ส่วนโหมดสแกนหลายครั้งจะติดตามตามจำนวนสีหรือระดับสีเทาที่กำหนดเป็นเลเยอร์ซ้อนกัน การติดตามขาวดำของ Inkscape สร้างบน Potrace ซึ่งเป็นไลบรารีติดตามเส้นที่ Peter Selinger เผยแพร่ในปี 2001 ตัว Potrace เองเป็นโปรแกรมบรรทัดคำสั่งที่อ่าน PBM, PGM, PPM หรือ BMP ไม่ใช่ PNG รองรับเฉพาะภาพสองโทน และเขียนผลเป็น SVG, PDF, EPS หรือ DXF จึงเหมาะกับการเขียนสคริปต์ประมวลผลภาพสแกนจำนวนมาก

ใน Adobe Illustrator ฟีเจอร์ Image Trace มาแทน Live Trace เดิมตั้งแต่ Illustrator CS6 วาง PNG เปิด Window > Image Trace แล้วเริ่มจากพรีเซ็ต เช่น Black and White Logo, 3 Colors หรือ 16 Colors จากนั้นปรับ Paths, Corners และ Noise ในส่วนขั้นสูง ผลติดตามจะยังเป็นแบบสดจนกว่าคุณจะคลิก Expand ซึ่งจะแปลงเป็นพาธปกติที่แก้ไขได้ หากไม่ได้ติดตั้งโปรแกรมทั้งสอง ตัวแปลงบนเบราว์เซอร์ทำขั้นตอนเดียวกัน คือลดสี หาขอบ และปรับเส้นโค้ง ตัวแปลงรูปเป็น SVG รองรับ JPG, WebP และ HEIC และเขียนเป็น EPS, PDF หรือ DXF แทน SVG ได้

บนเว็บ SVG เป็นคำแนะนำของ W3C ตั้งแต่ปี 2001 และเบราว์เซอร์ปัจจุบันทุกตัวแสดงผลได้ในแท็ก <img> เป็นพื้นหลัง CSS หรือฝังใน HTML ซึ่งสามารถเปลี่ยนสีเมื่อวางเมาส์ได้ด้วย โลโก้ที่ติดตามเส้นแล้วมักแทน PNG หลายขนาดสำหรับจอ retina ได้ด้วยไฟล์เล็กไฟล์เดียว สำหรับเครื่องตัด SVG เป็นฟอร์แมตที่ Cricut Design Space และ Silhouette Studio ต้องการ รูปทรงที่ติดตามแต่ละชิ้นกลายเป็นเส้นตัด และผลติดตามหลายสีจะมาเป็นเลเยอร์แยกที่ตัดจากไวนิลคนละสีได้ เครื่องเลเซอร์และซอฟต์แวร์ CNC มักนิยม DXF ซึ่ง PNG เป็น DXF สร้างได้จากการตั้งค่าติดตามเส้นเดียวกัน

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