PNG เป็น Android Vector Drawable: รายการตรวจนำเข้า

Android Studio ไม่ได้แกะรอย PNG เป็นพาธเวกเตอร์ Vector Asset Studio นำไฟล์ SVG หรือ PSD เข้าและแปลงรูปทรงที่รองรับเป็น VectorDrawable XML เวิร์กโฟลว์ PNG ที่เชื่อถือได้จึงมีสองขั้น: แกะรอยพิกเซลเป็น SVG จริง แล้วนำ SVG นั้นเข้า Android Studio

เครื่องมือแปลง PNG เป็น VectorDrawable โดยตรงอาจรวมทั้งสองขั้นไว้ เหมาะกับไอคอนเรียบง่าย แต่ยังต้องตรวจเหมือนกัน ยืนยันว่าผลมีพาธ ตรงกับต้นฉบับ ใช้ viewport ที่ต้องการ และหลีกเลี่ยงฟีเจอร์ที่ตัวนำเข้า Android แทนไม่ได้

สำหรับอินเทอร์เฟซ Flutter ให้ทำตามเวิร์กโฟลว์ไฟล์ SVG ใน Flutter ซึ่งประกาศและแสดง SVG ผ่าน flutter_svg แทนการแปลงเป็น Android VectorDrawable XML โดยตรง

สำหรับโครงการ .NET MAUI ใช้รายการตรวจทรัพยากรภาพ MAUI เพื่อตรวจต้นฉบับ ผลบิลด์ และขนาดแสดง ทำตามระบบภาพของโครงการนั้นก่อนใช้ขั้นตอนนำเข้า Android VectorDrawable

เวิร์กโฟลว์แบบสั้น

1. เริ่มจาก PNG สะอาดลักษณะไอคอน แทนภาพถ่ายหรือพื้นผิว
2. แกะรอยเป็น SVG และยืนยันว่ามีพาธแก้ไขได้ ไม่ใช่ PNG ฝัง
3. ลบรูปทรงเกินและลดโหนดมากเกินโดยไม่เปลี่ยนภาพเงา
4. นำ SVG เข้าผ่าน Vector Asset Studio ของ Android Studio
5. ตรวจ XML ที่สร้างเรื่อง viewport พาธ สีเติม เส้นขอบ การไล่สี และการตัดภาพ
6. ทดสอบ drawable ที่ขนาดจริงบน Android เวอร์ชันเก่าสุดที่แอปรองรับ

เลือกเครื่องมือแปลงโดยตรงหรือแนวทาง SVG

ทั้งสองแนวทางจบที่ปลายทางเดียวกัน แต่เปิดให้ตรวจต่างขั้นตอน

แนวทางที่มี SVG เป็นไฟล์กลางมักตรวจง่ายกว่า เทียบผลแกะรอยกับ PNG ตรวจรูปทรงทีละชิ้น ซ่อมรู และลดพาธรกก่อน Android Studio แปลงไฟล์อีกครั้งได้

เครื่องมือแปลงโดยตรงไม่ได้ผิดเสมอไป เช่น SVG2Vector ปัจจุบันโฆษณาการแปลง PNG เป็น VectorDrawable ควบคู่กับ SVG และไฟล์อื่น มอง XML เป็นตัวเลือกที่ต้องทดสอบ ไม่ใช่ไฟล์เสร็จแล้ว: ดูตัวอย่างใน Android Studio ตรวจพาธ และทดสอบอุปกรณ์ตามที่อธิบายด้านล่าง (SVG2Vector)

ขั้นที่ 1: เปลี่ยน PNG เป็นพาธ SVG จริง

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

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

แกะรอยพิกเซล

อัปโหลดต้นฉบับไปเครื่องมือ PNG เป็น SVG ของ PerfectVector หรือใช้เครื่องมือแกะรอยอื่นที่ให้ตรวจผลได้ หากต้นฉบับอยู่บนโทรศัพท์และต้องการ SVG มาตรฐานก่อน ให้ทำตามเวิร์กโฟลว์ SVG บนโทรศัพท์ Android เทียบ SVG กับ PNG ที่ขนาดอินเทอร์เฟซที่ต้องการ แล้วเปิดในโปรแกรมเวกเตอร์และเลือกรูปทรง

ตรวจหา:

• ภาพเงาภายนอกสะอาด;
• รูและพื้นที่ว่างที่คงอยู่;
• จำนวนพื้นที่สีตามคาด;
• ไม่มีจุดเกินหรือกล่องพื้นหลัง;
• เส้นโค้งเรียบโดยไม่มีจุดต่อกันหนาแน่น;
• viewBox ที่ครอบงานถูกต้อง

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

ลดความซับซ้อนเฉพาะเมื่อมีประโยชน์

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

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

สองการแปลง สามการตรวจ

ขั้นที่ 2: นำ SVG เข้า Android Studio

เวิร์กโฟลว์ Vector Asset Studio ปัจจุบันของ Android รับไฟล์ SVG หรือ PSD ในเครื่อง แสดงตัวอย่าง แล้วสร้าง vector drawable แบบ XML (Android Developers)

1. ในหน้าต่าง Project คลิกขวาโฟลเดอร์ res
2. เลือก New > Vector Asset
3. เลือก Local file (SVG, PSD) เป็นประเภทไฟล์
4. เลือก SVG และตรวจตัวอย่างหาข้อผิดพลาดหรือส่วนที่เปลี่ยนไป
5. ตั้งชื่อทรัพยากรและขนาดที่ต้องการ
6. เลือก Next ยืนยันปลายทาง แล้วเลือก Finish

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

สิ่งใดคงอยู่หลังนำ SVG เป็น VectorDrawable?

VectorDrawable ไม่ใช่ตัวแสดง SVG เต็มรูปแบบ Vector Asset Studio รองรับชุดย่อยที่กำหนด จึงเป็นไปได้ว่า SVG ดูถูกต้องในเบราว์เซอร์แต่เปลี่ยนตอนนำเข้า

ขอบเขตเหล่านี้มาจากตารางความเข้ากันได้ปัจจุบันของ Vector Asset Studio ตัวนำเข้าระบุด้วยว่ารองรับเฉพาะเส้นขอบกึ่งกลาง หากต้นฉบับใช้เส้นขอบด้านในหรือด้านนอก ให้ขยายเป็นรูปทรงเติมสีหรือวาดขอบใหม่ก่อนนำเข้า

การไล่สีต้องตรวจเวอร์ชันเพิ่ม VectorDrawable API ระบุค่าการไล่สีหรือรายการสีตามสถานะสำหรับ fillColor และ strokeColor ตั้งแต่ API level 24 และระบุตัวเลือก fillType แบบ evenOdd และ nonZero ตั้งแต่ API level 24 เช่นกัน (เอกสาร VectorDrawable API) หากแอปรองรับเวอร์ชันเก่า ให้ทดสอบเส้นทางความเข้ากันได้จริงที่บิลด์ใช้ อย่าถือว่าตัวอย่าง Android Studio ตอบได้ทั้งหมด

อ่าน XML ที่สร้างก่อนยอมรับ

ไม่ต้องเขียน VectorDrawable XML ด้วยมือ แต่ตรวจโครงสร้างเร็ว ๆ ช่วยจับปัญหานำเข้าได้มาก

ความกว้าง ความสูง และ viewport

องค์ประกอบราก <vector> แยกขนาดแสดงออกจากพิกัดวาด:

• android:width และ android:height เป็นขนาด drawable เริ่มต้น มักใช้ dp;
• android:viewportWidth และ android:viewportHeight กำหนดพื้นที่พิกัดที่พาธใช้

การเปลี่ยนเฉพาะความกว้างและความสูงปรับสเกลรูปทรงเดิม การเปลี่ยน viewport เปลี่ยนการแมปพิกัดพาธเข้าในพื้นที่แสดง หากไอคอนดูถูกครอป มีพื้นที่เผื่อ หรือยืดผิด ให้เทียบสี่ค่านี้กับ viewBox ของ SVG และขนาดแสดงผลไอคอนที่ต้องการ

พาธและสี

แต่ละ <path> มี android:pathData ซึ่งคำสั่งใช้ไวยากรณ์พาธทั่วไปแบบเดียวกับแอตทริบิวต์ d ของ SVG ตรวจ fillColor, strokeColor, strokeWidth, ปลายเส้น รอยต่อเส้น และ fillType เมื่อมี

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

กลุ่มและการตัดภาพ

กลุ่มมีค่าการเลื่อน สเกล การหมุน และจุดหมุนได้ <clip-path> จำกัดรูปทรงที่เห็น หากผลเลื่อนหรือพื้นที่มาสก์หาย ให้ตรวจลำดับกลุ่มเทียบกับการแปลงพิกัดและโครงสร้างตัดภาพใน SVG ต้นฉบับ

ทดสอบ drawable ในตำแหน่งที่แอปจะใช้

ตัวอย่างนำเข้าพิสูจน์ว่า Android Studio อ่านไฟล์ได้ ไม่ได้พิสูจน์ว่าไฟล์ถูกต้องตอนรัน

ใช้รายการยอมรับนี้:

• drawable ตรงกับภาพเงาที่ต้องการของ PNG เมื่อแสดงในขนาด UI ปกติ
• รู ช่องในตัวอักษร และพื้นที่ซ้อนยังถูกต้อง
• สีเติมทึบและเส้นขอบใช้สีที่ต้องการ
• การไล่สีแสดงถูกต้องบน Android เวอร์ชันเก่าสุดที่รองรับ
• viewport รักษาระยะเผื่อและอัตราส่วนที่ต้องการ
• ไอคอนยังอ่านได้ในสถานะสว่าง มืด ปิดใช้งาน และย้อมสีที่แอปใช้
• XML ไม่มีเศษที่ไม่ตั้งใจหรือข้อมูลพาธมากเกินอย่างชัดเจน
• ทดสอบไฟล์ในคอมโพเนนต์จริง ไม่ใช่แค่ตัวอย่างนำเข้า
• ยังเก็บ PNG ต้นฉบับและไฟล์หลัก SVG แก้ไขได้

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

หากแปลงทั้งชุด ให้ใช้กระบวนการนี้กับตัวอย่างตัวแทนก่อน เวิร์กโฟลว์แปลงชุด UI ครอบคลุม viewport ร่วม ขนาดที่มองเห็น การทำงานสี และการตรวจส่งมอบระดับชุด

เมื่อควรเก็บ PNG

VectorDrawable เหมาะที่สุดกับไอคอนและภาพประกอบเรียบง่าย คำแนะนำ Android เตือนว่ากราฟิกละเอียด รวมภาพเปิดแอปจำนวนมาก อาจเหมาะกับแรสเตอร์กว่า อีกทั้งระบุว่าต้นทุนโหลดครั้งแรกของ vector drawable อาจสูงกว่าภาพแรสเตอร์ และแนะนำไฟล์เวกเตอร์ไม่เกิน 200 × 200 dp เพื่อหลีกเลี่ยงเวลาวาดนาน (Android Developers)

เก็บหรือออกแบบแรสเตอร์ใหม่เมื่อต้นฉบับพึ่ง:

• รายละเอียดภาพถ่าย;
• พื้นผิวนุ่ม เบลอ หรือเงาซับซ้อน;
• พื้นที่สีจิ๋วจำนวนมาก;
• เอฟเฟกต์ไม่รองรับที่เป็นตัวกำหนดรูปลักษณ์;
• รูปทรงหนาแน่นจน XML ตรวจและดูแลยาก

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

เวิร์กโฟลว์นี้กับ PerfectVector

PerfectVector จัดการการแปลงครั้งแรก สำหรับไอคอนที่เหมาะ แปลง PNG เป็น SVG เทียบรูปทรงแกะรอยกับต้นฉบับ และดาวน์โหลด SVG ที่จะเก็บเป็นไฟล์หลักแก้ไขได้ จากนั้นนำไฟล์เข้าผ่าน Vector Asset Studio และตรวจ XML ที่สร้าง

ประเมินผลตลอดเส้นทาง:

1. การแกะรอยรักษาภาพเงาและรูต้นฉบับหรือไม่?
2. รูปทรง SVG แก้ไขได้และไม่มีแรสเตอร์ฝังหรือไม่?
3. Android Studio นำสีเติม การไล่สี การตัดภาพ และการแปลงพิกัดที่จำเป็นเข้าได้หรือไม่?
4. drawable แสดงถูกต้องที่ขนาดจริงและระดับ API ขั้นต่ำหรือไม่?

SVG สะอาดทำให้ส่งต่อง่ายขึ้น แต่ไม่ได้ทำให้ฟีเจอร์ Android ที่ไม่รองรับทำงาน ลดความซับซ้อนของงานหรือเก็บ PNG เมื่อปลายทางทำรูปลักษณ์ให้ตรงไม่ได้

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

Android Studio แปลง PNG เป็น VectorDrawable โดยตรงได้ไหม? ไม่ได้ Vector Asset Studio ปัจจุบันนำ SVG หรือ PSD ในเครื่องเข้า ไม่ใช่ PNG แกะรอย PNG เป็น SVG จริงก่อน หรือใช้เครื่องมือแปลงโดยตรงแล้วตรวจ XML ใน Android Studio

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

การไล่สี SVG ใช้ใน Android VectorDrawable ได้ไหม? Vector Asset Studio รองรับการไล่สีเส้นตรง รัศมี และเชิงมุม แต่การรองรับตอนรันขึ้นกับ XML ที่สร้างและกลยุทธ์เวอร์ชัน Android VectorDrawable API ระบุสีเติมและเส้นขอบไล่สีตั้งแต่ API level 24 จึงต้องทดสอบบนเวอร์ชันเก่าสุดที่แอปรองรับ

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

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

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

1. Android Developers — เพิ่มกราฟิกเวกเตอร์สำหรับหลายความหนาแน่น — อธิบายเวิร์กโฟลว์นำ SVG และ PSD เข้า Vector Asset Studio ชุดย่อย SVG ที่รองรับ ข้อควรระวังประสิทธิภาพ และทรัพยากร drawable ที่สร้าง
2. Android Developers — เอกสาร VectorDrawable API — นิยามแอตทริบิวต์ XML ของ vector, path, group และ clip-path รวม viewport สี กฎเติมสี และพฤติกรรมตามระดับ API
3. W3C — เนื้อหาฝัง SVG — ยืนยันว่า SVG มีเนื้อหาภาพแรสเตอร์ผ่านองค์ประกอบภาพได้
4. คู่มือ Inkscape — การแกะรอยภาพ — อธิบายความแตกต่างระหว่างแกะรอยพิกเซลแรสเตอร์กับทำงานกับบิตแมปเดิม
5. SVG2Vector — การแปลง PNG เป็น VectorDrawable — แสดงแนวทางเครื่องมือแปลงโดยตรงปัจจุบันที่กล่าวถึงในการเปรียบเทียบ

---

พร้อมทดสอบไอคอนผลิตจริงแล้ว? แปลง PNG เป็น SVG ตรวจพาธ แล้วนำไฟล์ที่ตรวจแล้วเข้า Android Studio เก็บ drawable เมื่อ viewport สี รู และการแสดงตอนรันผ่านรายการตรวจแล้วเท่านั้น