แปลง SVG เป็น PNG

แปลงเวกเตอร์ SVG ให้เป็นภาพ PNG ที่พร้อมใช้งาน

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

เวกเตอร์กับราสเตอร์ ในเงื่อนไขง่ายๆ

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

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

ทำไมถึง Rasterize SVG ตั้งแต่แรก?

ถ้า SVG ปรับขนาดได้สวยงามมาก ทำไมต้องแปลงมัน? ความเข้ากันได้มักเป็นคำตอบ หลายที่เพียงแค่ไม่รับ SVG โปรแกรมอีเมลหลายตัวลบหรือปฏิเสธการแสดง โปรแกรมแก้ไขเอกสารและซอฟต์แวร์นำเสนอมักต้องการภาพแบน ตลาดและเครือข่ายโฆษณาต้องการ PNG หรือ JPG และแพลตฟอร์มโซเชียลส่วนใหญ่ไม่สนใจการอัปโหลดเวกเตอร์ ระบบเนื้อหาบางระบบยังบล็อก SVG โดยสิ้นเชิงด้วยเหตุผลด้านความปลอดภัย เนื่องจากฟอร์แมตสามารถฝัง Script ได้

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

การเลือกความละเอียดเอาต์พุตที่ถูกต้อง

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

หน้าจอมาตรฐานดีที่ 1x ขนาดที่กำหนดของงานศิลป์ จอ High-DPI และ Retina บรรจุพิกเซลประมาณสองเท่าในพื้นที่เดียวกัน ดังนั้นการส่งออก 2x ทำให้ไอคอนและกราฟิกยังคมชัดแทนที่จะเบลอ สำหรับงานพิมพ์ โปสเตอร์ หรือจอแสดงผลขนาดใหญ่มาก 3x หรือ 4x ให้พื้นที่เผื่อ เนื่องจากต้นฉบับเป็นเวกเตอร์ การส่งออกที่ใหญ่กว่าไม่มีค่าใช้จ่ายด้านคุณภาพ เส้นโค้งเพียงแค่ถูกคำนวณใหม่ที่จำนวนพิกเซลสูงกว่าก่อนที่จะถูกทำให้แบน เมื่อไม่แน่ใจ ให้แสดงผลขนาดใหญ่ คุณสามารถลดขนาด PNG ใหญ่ลงได้เสมอ แต่ไม่มีทางกู้คืนรายละเอียดโดยการขยาย PNG เล็ก

ความโปร่งใสติดมาด้วย

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

ทุกอย่างอยู่บนอุปกรณ์ของคุณ

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

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