แปลง SVG เป็น PNG
ไฟล์ SVG คือชุดคำสั่งวาดภาพที่ไม่มีความละเอียดตายตัว การแปลงเป็น PNG คือการวาดคำสั่งเหล่านั้นลงบนตารางพิกเซล สิ่งเดียวที่ต้องตัดสินใจจึงเป็นว่าภาพผลลัพธ์ควรกว้างกี่พิกเซล
แปลงไฟล์รูปภาพ
หรือลากไฟล์ JPG, JPEG, JPE … มาวางที่นี่ ·
สูงสุด 95 MB ต่อไฟล์· ได้สูงสุด 20 ไฟล์· ลบหลังจาก 30 นาที
ไฟล์จะถูกประมวลผลบนเซิร์ฟเวอร์ของเราและถูกลบหลังจาก 30 นาที
ค่า 85 ทำให้ภาพถ่ายดูเหมือนต้นฉบับทุกประการ ควรลดค่านี้เฉพาะเมื่อต้องการไฟล์ที่เล็กลง
JPG, BMP และ EPS ไม่รองรับความโปร่งใส พิกเซลโปร่งใสจะถูกเติมด้วยสีนี้
รหัสสีแบบ Hex ที่ใช้แทนพิกเซลโปร่งใส เช่น #FFFFFF
รูปแบบนี้เก็บภาพได้เพียงภาพเดียว หากต้องการคงภาพเคลื่อนไหวไว้ ให้เลือกผลลัพธ์เป็น GIF หรือ WebP
ไอคอนหลายขนาดจะรวมความละเอียดหลายระดับไว้ในไฟล์เดียว เบราว์เซอร์และระบบปฏิบัติการจะเลือกขนาดที่ต้องใช้เอง
คงขนาดภาพเดิมไว้ หรือกำหนดด้านใดด้านหนึ่ง โดยระบบจะคงอัตราส่วนภาพไว้
จำนวนพิกเซลของด้านที่เลือกไว้ด้านบน
เปอร์เซ็นต์ของขนาดภาพต้นฉบับ
sRGB เหมาะสำหรับหน้าจอและเว็บไซต์ ควรคงค่าเดิมไว้สำหรับงานพิมพ์ ส่วนระดับสีเทาจะตัดสีออกทั้งหมด
เป็นข้อมูลเมตาเท่านั้น ค่า 0 จะคงค่าเดิมไว้ เครื่องพิมพ์และบางเว็บไซต์จะอ่านค่านี้ แต่จะไม่เปลี่ยนขนาดภาพเป็นพิกเซล
วิธีใช้เครื่องมือนี้
- 1
อัปโหลดไฟล์ SVG
วางโลโก้ ไอคอน หรืองานภาพประกอบที่บันทึกเป็น .svg ลงในช่องอัปโหลด ได้สูงสุด 20 ไฟล์ต่อครั้ง ไฟล์ละไม่เกิน 95 MB
- 2
กำหนดความกว้างของภาพผลลัพธ์
ปรับขนาดภาพผลลัพธ์ ตั้งไว้ที่ความกว้าง 1024 px ใส่ค่า ขนาด อื่นได้ หรือเปลี่ยนเป็น กำหนดความสูง หรือ กำหนดด้านที่ยาวที่สุด โดยอัตราส่วนของภาพจะคงเดิมเสมอ
- 3
แปลงเป็น PNG
กด แปลงเป็น PNG แล้วดาวน์โหลดทีละภาพหรือทั้งชุดเป็นไฟล์ ZIP พื้นที่โปร่งใสของ SVG จะยังคงโปร่งใส
จะแปลง SVG เป็น PNG ตามขนาดที่กำหนดได้อย่างไร
อัปโหลด SVG พิมพ์ความกว้างที่ต้องการเป็นพิกเซล (ตั้งไว้ที่ 1024 px) แล้วกด แปลงเป็น PNG ความสูงจะคำนวณตามสัดส่วนของภาพ และพื้นหลังจะโปร่งใส
แปลง SVG เป็น PNG ตามขนาดที่ต้องการ
SVG เป็นมาตรฐานของ W3C ตั้งแต่ปี 2001 ที่อธิบายรูปทรงด้วยพิกัด เช่น วาดวงกลมตรงนี้ แล้วเติมสีนี้ โลโก้ SVG จึงคมชัดทั้งบนนามบัตรและบนป้ายบิลบอร์ด แต่ PNG ปรับขนาดแบบนั้นไม่ได้ เมื่อกว้าง 512 px แล้ว การขยายต้องสร้างพิกเซลขึ้นมาเอง และขอบภาพจะเบลอ จึงควรกำหนดขนาดตอนแปลง ขณะที่ข้อมูลเวกเตอร์ยังอยู่
ไฟล์ SVG จำนวนมากระบุความกว้างและความสูงเล็ก ๆ ไว้ในโค้ด บางครั้งเพียง 24 หรือ 48 px สำหรับไอคอน การเรนเดอร์ที่ขนาดนั้นจะได้ PNG ขนาดเท่าภาพย่อ หน้านี้หลีกเลี่ยงปัญหาโดยตั้งความกว้างผลลัพธ์ที่ 1024 px และปรับภาพให้พอดี โดยคำนวณความสูงจากสัดส่วนของภาพ เปลี่ยนตัวเลขเป็นค่าใดก็ได้ถึง 20,000 px การทำให้ใหญ่ไม่ทำให้คุณภาพลดลง เพราะทุกขนาดวาดใหม่จากรูปทรงเวกเตอร์
แปลง SVG เป็น PNG สำหรับงานพิมพ์: นิ้ว DPI และพิกเซล
| นิ้ว | Pixels at | ||
|---|---|---|---|
| 72 DPI | 150 DPI | 300 DPI | |
| 1 | 72 | 150 | 300 |
| 2 | 144 | 300 | 600 |
| 3.5 | 252 | 525 | 1050 |
| 8.5 | 612 | 1275 | 2550 |
| 11 | 792 | 1650 | 3300 |
สี่สิ่งที่ควรตรวจสอบก่อนแปลง SVG เป็นภาพพิกเซล
แปลงฟอนต์เป็นเส้นขอบ
ข้อความที่ใช้ฟอนต์ซึ่งมีในเครื่องคุณแต่ตัวแปลงไม่มีจะถูกแทนที่ด้วยฟอนต์อื่น ให้แปลงตัวอักษรเป็นเส้นพาธก่อน
ฝังรูปภาพที่ลิงก์ไว้
SVG อาจอ้างอิงไฟล์รูปถ่ายแยกต่างหากด้วยพาธ หากไฟล์นั้นไม่ได้อยู่ใน SVG ภาพ PNG จะแสดงเป็นที่ว่างตรงตำแหน่งนั้น
ตรวจสอบแคนวาส
พื้นที่ว่างส่วนเกินรอบงานภาพในแคนวาสของ SVG จะกลายเป็นขอบโปร่งใสใน PNG ให้ปรับอาร์ตบอร์ดให้พอดีกับงานก่อนส่งออก
เลือกความกว้างตามการใช้งาน
ส่งออก PNG แยกตามงานแต่ละอย่าง เช่น 512 px สำหรับรูปโปรไฟล์ และ 2048 px สำหรับสไลด์ แทนการใช้ขนาดเดียวกับทุกงาน
SVG
Scalable Vector Graphics
SVG เป็นรูปแบบเวกเตอร์ที่อิงกับ XML ซึ่ง W3C กำหนดเป็นมาตรฐานในปี 2001 แทนที่จะใช้พิกเซล จะอธิบายรูปทรง เส้นพาธ และข้อความ จึงคมชัดในทุกขนาด และมักมีขนาดเล็กมากสำหรับโลโก้และไอคอน รองรับพื้นหลังโปร่งใส การจัดสไตล์ด้วย CSS สคริปต์ และภาพเคลื่อนไหว และเบราว์เซอร์ทุกตัวแสดงผลได้โดยตรง SVG ไม่เหมาะกับภาพถ่าย และภาพประกอบที่ซับซ้อนอาจแสดงผลช้า Illustrator, Inkscape, Figma และเบราว์เซอร์เปิดและแก้ไขไฟล์นี้ได้
- การบีบอัด
- –
- พื้นหลังโปร่งใส
- ได้
- ภาพเคลื่อนไหว
- ได้
- เปิดตัว
- 2001 · W3C
PNG
Portable Network Graphics
PNG เป็นรูปแบบภาพแรสเตอร์แบบไม่สูญเสียข้อมูล (lossless) ที่ PNG Development Group เผยแพร่ในปี 1996 และต่อมาได้รับการกำหนดเป็นมาตรฐานโดย W3C และ ISO รักษาทุกพิกเซลไว้อย่างแม่นยำ รองรับพื้นหลังโปร่งใสแบบ alpha เต็มรูปแบบ และแสดงข้อความ ขอบคม และสีพื้นเรียบได้โดยไม่มีสิ่งแปลกปลอมในภาพ (artefact) ความแม่นยำนี้ทำให้เหมาะกับภาพหน้าจอ โลโก้ ไอคอน และกราฟิกส่วนติดต่อผู้ใช้ ข้อแลกเปลี่ยนคือขนาด ภาพถ่ายที่บันทึกเป็น PNG มักใหญ่กว่าภาพเดียวกันในรูปแบบ JPEG หรือ WebP หลายเท่า เบราว์เซอร์ ระบบปฏิบัติการ และโปรแกรมแต่งภาพทุกตัวเปิดไฟล์ PNG ได้
- การบีบอัด
- แบบไม่สูญเสียข้อมูล
- พื้นหลังโปร่งใส
- ได้
- ภาพเคลื่อนไหว
- ไม่ได้
- เปิดตัว
- 1996 · PNG Development Group
การแปลง SVG เป็น PNG เปลี่ยนงานเวกเตอร์ที่ไม่ขึ้นกับความละเอียดให้เป็นบิตแมปขนาดคงที่ สำหรับที่ที่ไม่รับ SVG เช่น การอัปโหลดบนโซเชียล อีเมล และเอกสารออฟฟิศ ส่วนทิศทางตรงข้ามคือความพยายามกู้การปรับขนาดได้จากพิกเซล
คำถามที่พบบ่อยเกี่ยวกับการแปลง SVG เป็น PNG
ควรแปลง SVG เป็น PNG ที่ความละเอียดเท่าไร
ให้ใช้ขนาดที่ใหญ่ที่สุดที่ PNG จะแสดงผล แล้วคูณสองสำหรับหน้าจอโทรศัพท์และแล็ปท็อปที่มีความละเอียดสูง โลโก้ที่แสดงกว้าง 300 px บนเว็บไซต์ควรส่งออกประมาณ 600 px ไอคอนแอปมักใช้ 1024 px ส่วนงานสำหรับพิมพ์ให้นำจำนวนนิ้วคูณ 300 เช่น 3 นิ้วจะเท่ากับ 900 px
PNG ยังคงพื้นหลังโปร่งใสของ SVG ไว้หรือไม่
ได้ พื้นที่ของ SVG ที่ไม่มีสีเติมจะโปร่งใสทั้งหมด และรูปทรงกึ่งโปร่งใสจะคงความโปร่งใสไว้ หากต้องการพื้นหลังทึบ ให้แปลงเป็น JPG ด้วย แปลง SVG เป็น JPG แล้วเลือกสีพื้นหลัง
ทำไมข้อความใน PNG จึงดูต่างจากใน SVG
ข้อความใน SVG จะแสดงด้วยฟอนต์ที่ติดตั้งอยู่ในเครื่องที่เรนเดอร์ หาก SVG ระบุฟอนต์ที่ไม่ได้ฝังไว้ ระบบจะใช้ฟอนต์สำรองแทน ให้แปลงข้อความเป็นเส้นขอบก่อนส่งออก: Type → Create Outlines ใน Illustrator และ Path → Object to Path ใน Inkscape
การตั้งค่า DPI ทำให้ PNG คมชัดขึ้นหรือไม่
ไม่ได้ ค่า DPI ในไฟล์ ใน การตั้งค่าขั้นสูง เพียงบันทึกตัวเลขลงในไฟล์ให้เครื่องพิมพ์และโปรแกรมจัดหน้าบางตัวใช้กำหนดขนาดจริง ความคมชัดขึ้นอยู่กับขนาดพิกเซล ซึ่งกำหนดจากความกว้าง หากโรงพิมพ์ขอ 300 dpi ที่ขนาดหนึ่ง ให้ปรับทั้งสองค่า
ทำไมจึงต้องแปลง SVG เป็น PNG
หลายที่ที่รับรูปภาพไม่รับ SVG เช่น การอัปโหลดรูปโปรไฟล์และโพสต์บนโซเชียลมีเดีย โปรแกรมอีเมลส่วนใหญ่ ตลาดออนไลน์หลายแห่ง และ Microsoft Office รุ่นเก่า PNG ที่มีขนาดเหมาะสมจะแสดงผลได้ในทุกที่เหล่านี้
แปลง PNG กลับเป็น SVG ภายหลังได้หรือไม่
ทำได้เฉพาะด้วยการเทรซ ซึ่งวาดรูปทรงใหม่จากพิกเซลและให้ผลดีที่สุดกับโลโก้ที่เรียบง่าย ควรเก็บไฟล์ SVG ต้นฉบับไว้ หากสูญหาย คู่มือแปลง PNG เป็น SVG อธิบายวิธีการเทรซและผลที่คาดหวังได้