วิธีแปลง SVG เป็น PNG
- 1. เลือกไฟล์ SVGคลิก “เลือกไฟล์ SVG” หรือลากไฟล์มาวางในกรอบ
- 2. คลิก “แปลง”เลือก “ขนาด” ตั้งแต่ 1× ถึง 8× แล้วคลิก “แปลง”
- 3. ดาวน์โหลดดาวน์โหลดไฟล์ PNG ทีละไฟล์ หรือรวมทั้งหมดเป็น ZIP
เกี่ยวกับ SVG และ PNG
SVG เป็นรูปแบบเวกเตอร์ ไฟล์บอกวิธีวาดรูปทรงและข้อความ จึงคมชัดทุกขนาด เป็นรูปแบบที่ใช้กันทั่วไปสำหรับโลโก้และไอคอนบนเว็บ
PNG เป็นตารางพิกเซลที่มีขนาดตายตัว โซเชียลมีเดีย ลายเซ็นอีเมล เอกสารสำนักงาน และแอปแชตส่วนใหญ่รับ PNG แต่ไม่ค่อยรับ SVG
| SVG | PNG | |
|---|---|---|
| ประเภท | เวกเตอร์ | พิกเซล |
| ขยายแล้วไม่เบลอ | ใช่ | ไม่ |
| ความโปร่งใส | รองรับ | รองรับ |
| แก้ไขเป็นข้อความได้ | ได้ | ไม่ได้ |
| โซเชียลมีเดีย อีเมล แอปสำนักงานรับไหม | ไม่ค่อยรับ | รับเกือบทุกที่ |
| เหมาะกับ | โลโก้และไอคอนบนเว็บ | ทุกที่ที่ต้องใช้รูปภาพทั่วไป |
การเลือกขนาดผลลัพธ์
ตัวเลือก “ขนาด” คูณความกว้างและความสูงที่กำหนดไว้ใน SVG ถ้าไม่ได้กำหนดไว้จะใช้ viewBox ตารางนี้แสดงผลของโลโก้ที่วาดไว้ขนาด 200 × 100
| ขนาด | ขนาด PNG | เหมาะกับ |
|---|---|---|
| 1× | 200 × 100 | ขนาดเดิมของ SVG |
| 2× (ค่าเริ่มต้น) | 400 × 200 | หน้าจอความละเอียดสูง |
| 4× | 800 × 400 | สไลด์และงานพิมพ์ |
| 8× | 1600 × 800 | งานพิมพ์ขนาดใหญ่และแบนเนอร์ |
สิ่งที่อาจดูต่างไป
SVG แต่ละไฟล์ถูกแสดงผลแบบเดียวกับที่เบราว์เซอร์แสดงรูปภาพ สคริปต์ในไฟล์จึงไม่ทำงาน บางอย่างอาจไม่ปรากฏในผลลัพธ์
- ฟอนต์เว็บที่โหลดจากที่อื่นอาจไม่ถูกใช้ ข้อความจึงอาจเปลี่ยนเป็นฟอนต์มาตรฐาน ถ้าต้องการตัวอักษรตรงตามแบบ ให้แปลงข้อความเป็นเส้นโครงร่างในโปรแกรมออกแบบก่อน
- รูปที่ลิงก์ผ่าน URL อาจไม่แสดง ส่วนรูปที่ฝังอยู่ใน SVG แสดงได้ตามปกติ
- SVG ที่เคลื่อนไหวหรือโต้ตอบได้จะกลายเป็นภาพนิ่งภาพเดียว
- พื้นที่ที่ SVG ไม่ได้ระบายสีจะยังโปร่งใส ถ้าเห็นกล่องสีขาว แปลว่าใน SVG มีสี่เหลี่ยมสีขาวอยู่หลังภาพ
ความเป็นส่วนตัว
การแปลงทำงานในเบราว์เซอร์ของคุณ ไฟล์ไม่ถูกอัปโหลดไปยังเซิร์ฟเวอร์
คำถามที่พบบ่อย
ได้ PNG ความละเอียดสูงจาก SVG อย่างไร
ตั้ง “ขนาด” เป็น 4× หรือ 8× ก่อนคลิก “แปลง” SVG เป็นเวกเตอร์ PNG ขนาดใหญ่จึงคมชัดเท่าขนาดเล็ก
แปลง SVG เป็น PNG 4K ได้ไหม
ขึ้นอยู่กับขนาดเดิมของ SVG ที่ 8× SVG กว้าง 480 พิกเซลจะกลายเป็นกว้าง 3840 พิกเซล ซึ่งเท่ากับความกว้างของ 4K
กำหนดความกว้างและความสูงเองได้ไหม
ไม่ได้ ตัวเลือก “ขนาด” ขยายได้แค่ 1×, 2×, 4× หรือ 8× ให้ตั้งความกว้างและความสูงใน SVG ก่อน หรือเลือกขนาดที่ใกล้ที่สุดแล้วปรับขนาด PNG ทีหลัง
แปลง SVG เป็น PNG แล้วยังโปร่งใสไหม
ใช่ พื้นที่ที่ SVG ปล่อยว่างไว้จะยังโปร่งใสใน PNG
ทำไมข้อความใน PNG ดูต่างไป
SVG น่าจะใช้ฟอนต์เว็บที่ไม่ได้ฝังไว้ในไฟล์ จึงแสดงเป็นฟอนต์สำรองแทน แปลงข้อความเป็นเส้นพาธในโปรแกรมออกแบบแล้วลองใหม่
สคริปต์ใน SVG ทำงานระหว่างแปลงไหม
ไม่ SVG ถูกแสดงผลเป็นรูปภาพ สคริปต์ที่อยู่ข้างในจึงไม่ทำงาน