แปลงไอคอน PNG เป็น SVG สำหรับชุด UI ที่สม่ำเสมอ

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

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

ขั้นตอนแบบสั้น

1. ทำรายการชุด PNG และหาสำเนาซ้ำหรือต้นทางที่หาย
2. เลือกไอคอนตัวแทนและกำหนดกริด ระยะว่าง รูปแบบสีเติมหรือเส้นขอบ และกฎสีร่วม
3. แปลงไอคอนตัวอย่างเป็นพาธจริง
4. ตรวจขอบรูป โหนด พื้นที่ว่าง และบริเวณสี
5. ปรับชุดให้เป็นมาตรฐานในโปรแกรมเวกเตอร์เดียว แล้วแปลงและตรวจไอคอนที่เหลือ
6. ทดสอบ SVG ที่ส่งออกใน UI และขั้นตอนแอสเซ็ตจริง

เลือกว่าไอคอน PNG ใดควรเป็น SVG

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

หากต้นทางที่เหลือเป็นภาชนะไอคอนแทน PNG กู้ผ่านขั้นตอนที่ตรง ICO เป็น SVG หรือ ICNS เป็น SVG ก่อน แล้วปรับงานผลลัพธ์ตามกฎชุด UI ด้านล่างเดียวกัน

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

กำหนดกฎชุด UI ก่อนแปลง

โฟลเดอร์ไอคอนที่สะอาดแต่ละตัวก็ยังดูไม่สอดคล้องเมื่อรวม เขียนกฎชุดก่อน แม้ PNG เดิมยังไม่ตามกฎ

เลือกพื้นที่พิกัดเดียว

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

บันทึก:

• viewBox ร่วม;
• จุดกลางและเส้นฐานที่ตั้งใจให้เห็น;
• ระยะว่างภายในขั้นต่ำ;
• ส่วนใดตั้งใจให้ยื่นเกินขอบเขตที่เห็นตามปกติได้

เลือกรูปแบบสีเติมหรือเส้นขอบ

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

ตัดสินวิธีควบคุมสี

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

แปลงตัวอย่างตัวแทนก่อน

เลือกสี่ถึงหกไอคอนที่เปิดกรณียาก รวมวงกลมหรือส่วนโค้ง เส้นทแยง ช่องในตัวอักษรหรือรูเล็ก และไอคอนหนาแน่นที่สุดในชุด หากใช้หลายสี รวมตัวนั้นด้วย

1. เตรียม PNG

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

เก็บสำเนาต้นฉบับทุกไฟล์ไม่แตะ การแก้ตัดสินง่ายเมื่อเทียบ SVG กับต้นทางได้แทนพึ่งความจำ

2. แปลงไอคอนตัวอย่าง

ใช้เครื่องมือแปลงเวกเตอร์อัตโนมัติหรือเครื่องมือในโปรแกรมออกแบบ ขั้นตอน Image Trace ปัจจุบันของ Illustrator มีตัวควบคุมสี พาธ มุม และสัญญาณรบกวน คุณสมบัติ Vectorize ปัจจุบันของ Figma ให้โหมดสีหลังแปลง และระบุว่าภาพซับซ้อนหรือความละเอียดต่ำอาจแปลงไม่ดี (Adobe Image Trace; Figma Vectorize)

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

หาก Figma เป็นโปรแกรมหลักของชุด ขั้นตอน Figma Vectorize กับ SVG ภายนอก ช่วยเทียบสองวิธีบนตัวอย่างเดียว ตัดสินรูปทรงหลังนำเข้า รวมรูและบริเวณสีที่ต้องแก้

3. ตรวจพาธ ไม่ใช่เฉพาะภาพตัวอย่าง

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

มองหา:

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

หากรูปง่ายฝังใต้จุดมาก ใช้ การวินิจฉัยโหนดมากเกิน ก่อนลดความซับซ้อน การแก้รุนแรงย้ายมุมและปิดช่องเล็กได้ จึงเทียบพาธแก้กับ PNG

ปรับไอคอนเป็นชุดเดียว

เมื่อตัวอย่างแปลงมีโครงสร้างดี วางบนกริดร่วมและตรวจด้วยกัน นี่คือจุดที่ชุดกลายเป็นระบบ

การตรวจระดับชุด

ตรวจที่ขนาดอินเทอร์เฟซจริงและซูมแก้ไขใหญ่กว่า:

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

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

ขั้นตอนนี้เมื่อใช้ PerfectVector

PerfectVector อยู่ในขั้นแปลงระหว่างเตรียมต้นทางกับปรับชุดมาตรฐาน ใช้สร้างตัวอย่าง PNG ตัวแทนคืนเป็นรูปเวกเตอร์แก้ไขได้ แล้วตัดสินผลตามเกณฑ์สำคัญของชุดนี้:

1. แต่ละไอคอนรักษาขอบรูปและพื้นที่ว่างหรือไม่?
2. เลือกและเปลี่ยนสีบริเวณตั้งใจได้หรือไม่?
3. โค้งใช้ชุดโหนดจัดการได้หรือไม่?
4. ผลปรับมาตรฐานง่ายกว่าการแปลงด้วยมือหรือในแอปหรือไม่?

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

จัดการโดยไม่เสียต้นทาง

เก็บไฟล์สองระดับ:

• คลังต้นทาง: PNG ไม่แตะ ไฟล์ออกแบบเดิม และบันทึกที่มา
• ไฟล์หลักแก้ไขได้: ไอคอนเวกเตอร์ปรับมาตรฐานบนกริดร่วม
• ไฟล์ส่งมอบ: SVG ปรับไฟล์แล้วที่ผลิตภัณฑ์ใช้

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

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

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

ก่อนส่งมอบ ทดสอบไอคอนไม่กี่ตัวในทุกสภาพแวดล้อมสำคัญ: ไลบรารีออกแบบ คอมโพเนนต์แอป และขั้นบิลด์หรือปรับไฟล์ ตรวจสถานะปิดใช้งานและสีผกผันหากระบบใช้ ไฟล์โครงสร้างสะอาดยังไม่ผ่านชุดได้หากสมมติฐานสีหรือขนาดไม่ตรงคอมโพเนนต์ หาก Android เป็นปลายทาง ใช้ รายการตรวจนำเข้า PNG เป็น VectorDrawable ยืนยันขนาด viewport สีเติม ความซับซ้อนพาธ และการรองรับตัวนำเข้าก่อนแอสเซ็ตเข้าแอป สำหรับ Godot ใช้ รายการตรวจนำเข้า SVG ของ Godot เลือกชนิดนำเข้าพื้นผิวและตรวจขนาดแรสเตอร์ oversampling และงานที่รองรับ สำหรับ Unity ใช้ รายการตรวจนำเข้า SVG ของ Unity เลือกตัวนำเข้าตรงโปรแกรมแก้ไขและตรวจปลายทาง UI Toolkit หรือ sprite

สำหรับ SwiftUI ตรวจ ขั้นตอนแค็ตตาล็อกแอสเซ็ต SVG และการเรนเดอร์ เพื่อยืนยันทรัพยากรภาพมีชื่อ พฤติกรรมสี original หรือ template และขนาดแสดงผลสุดท้าย

รายการตรวจส่งมอบชุด UI

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

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

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

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

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

ควรเก็บ PNG หลังชุด SVG เสร็จหรือไม่? ควร เก็บ PNG เดิมและต้นทางออกแบบก่อนหน้าในคลัง ให้ที่มาและภาพอ้างอิงเมื่อต้องแปลงใหม่ ใช้เวกเตอร์หลักปรับมาตรฐานสำหรับแก้และสร้าง SVG ส่งมอบจากมัน

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

1. W3C — ระบบพิกัด การแปลง และหน่วย SVG — นิยาม viewport ระบบพิกัด viewBox และการจับคู่งานเข้าบริเวณแสดง
2. W3C — พาธ SVG — นิยามคำสั่งเส้นและโค้งที่สร้างรูปทรงพาธ SVG แก้ไขได้
3. W3C — เนื้อหาฝัง SVG — ยืนยันว่า SVG มีเนื้อหาภาพแรสเตอร์แทนพาธได้
4. Adobe Illustrator — แปลงภาพเป็นเวกเตอร์ด้วย Image Trace — อธิบายขั้นตอนแปลงแรสเตอร์ปัจจุบันและผลพาธแก้ได้
5. Figma Learn — แปลงภาพคงที่เป็นเลเยอร์เวกเตอร์ — อธิบาย Vectorize ปัจจุบัน โหมดสี และข้อจำกัดภาพต้นทาง

---

เริ่มจากไอคอนยากไม่กี่ตัว ไม่ใช่ทั้งโฟลเดอร์ แปลง PNG ตัวอย่างเป็น SVG ตรวจพาธและบริเวณสี แล้วปรับผลที่เลือกตามกฎชุด UI ก่อนขยายขั้นตอน