ข้ามไปยังเนื้อหา
FileMyLove

แปลง SVG เป็น PNG แล้วรูปหรือฟอนต์หาย ตรวจตรงไหนก่อน

เตรียมโลโก้ SVG ก่อนแปลงเป็น PNG ตรวจภาพที่อ้างอิงภายนอก ฟอนต์ และขนาดภาพ โดยเก็บต้นฉบับเวกเตอร์ไว้แก้ไขต่อ

โดย ทีม FileMyLoveอ่าน 4 นาที

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

เริ่มจากไฟล์ที่พร้อมใช้งาน

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

เก็บ SVG ต้นฉบับไว้เสมอ หากต้องแก้โลโก้ เปลี่ยนข้อความ หรือจัดวางวัตถุ ให้แก้ในโปรแกรมออกแบบต้นทางก่อนสร้าง PNG ใหม่

ทำไมส่วนประกอบอาจหาย

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

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

แนวทางแก้ของเรา: กลับไปที่โปรแกรมต้นทาง ฝังรูปที่ต้องใช้ และหากจำเป็นให้แปลงข้อความเป็นเส้นก่อนส่งออกสำเนา SVG โดยเก็บไฟล์ที่ยังแก้ข้อความได้แยกไว้ การแก้ที่ต้นทางช่วยให้ตรวจได้ชัดเจนกว่าการคาดเดาจาก PNG ที่ขาดบางส่วนแล้ว

ขนาด PNG ที่เครื่องมือสร้าง

หน้าแปลงกำหนดขนาดให้อัตโนมัติจากขนาดของ SVG: ถ้าด้านยาวน้อยกว่า 1,024 จะเรนเดอร์ให้ด้านยาวเป็น 1,024 พิกเซล และถ้าเกิน 8,192 จะลดลงมาไม่เกินค่านี้ โดยรักษาสัดส่วน ขนาดนี้เป็นการตั้งค่าของ FileMyLove ไม่ใช่มาตรฐานบังคับของ SVG

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

ตรวจสามจุดก่อนส่ง

  1. เทียบข้อความและวัตถุทีละส่วนกับแบบต้นฉบับ
  2. เปิดดูขอบภาพและพื้นที่ว่างที่อาจติดมาจากขอบเขตงาน
  3. ตรวจพื้นหลังและขนาดพิกเซลของไฟล์ที่ดาวน์โหลดจริง

หากต้องการพื้นหลังโปร่งใส ให้ดู PNG กับ JPG ต่างกันอย่างไร การเลือก PNG ไม่ได้ลบพื้นสีที่วาดอยู่ใน SVG ให้เอง