SVG to PNG Converter: เปลี่ยนกราฟิกเวกเตอร์เป็นภาพแรสเตอร์ทุกขนาด

Q: สามารถแปลง SVG เป็น PNG แบบกลุ่มได้หรือไม่?

ได้ — ImageMagick (magick mogrify), rsvg-convert, หรือ headless browser สามารถจัดการโฟลเดอร์ของไฟล์ SVG ได้ สำหรับชุดไอคอน สคริปต์จะเรนเดอร์ทุก SVG ในทุกขนาดที่คุณต้องการในครั้งเดียว ดูที่ /blog/svg-to-png-guide

ปรับปรุงล่าสุด: June 28, 2026

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

คำตอบสั้นๆ: แปลง SVG เป็น PNG ได้อย่างไร?

เปิดไฟล์ SVG ในโปรแกรมแปลงไฟล์หรือเครื่องมือออกแบบ กำหนดขนาดพิกเซลเป้าหมาย (โดยคำนึงถึงจอ Retina หากจำเป็น — ส่งออกที่ขนาด 2x ของขนาดหน้าจอ) และส่งออกเป็น PNG เลือกขนาดให้ใหญ่พอสำหรับทุกพื้นที่ที่จะใช้ไฟล์ PNG เพราะคุณไม่สามารถขยาย PNG ในภายหลังได้โดยที่คุณภาพจะไม่ลดลง ใช้ SVG to PNG converter สำหรับการส่งออกครั้งเดียวอย่างรวดเร็ว หรือใช้เครื่องมือออกแบบสำหรับงานแบบชุด (batch work) เก็บไฟล์ SVG ต้นฉบับไว้ เพราะมันยังคงเป็นแหล่งที่มาที่ปรับขนาดได้หากคุณต้องการขนาดอื่นในอนาคต

อะไรคือความแตกต่างระหว่าง SVG และ PNG?

ความแตกต่างระหว่างเวกเตอร์กับแรสเตอร์อธิบายทุกอย่างเกี่ยวกับเหตุผลและเวลาในการแปลงไฟล์

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

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

ต้องแปลง SVG เป็น PNG เมื่อใด?

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

ภาพตัดกระดาษที่มีรูปทรงและสีต่างกัน ซึ่งเปรียบเสมือนการแปลงรูปเวกเตอร์ให้เป็นพิกเซล

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

สำหรับเว็บไซต์ โดยทั่วไปแล้ว SVG จะเป็นที่ต้องการมากกว่า เนื่องจากยังคงความคมชัดบนหน้าจอ Retina และมีขนาดไฟล์เล็ก คู่มือ retina display guide อธิบายว่าทำไมกราฟิกแบบเวกเตอร์จึงช่วยขจัดปัญหาความละเอียดสำหรับโลโก้และไอคอนได้อย่างสมบูรณ์

ต้องเลือกความละเอียดอย่างไรให้เหมาะสม?

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

รูปทรงนามธรรม 3 มิติแบบไดนามิก ซึ่งเป็นประเภทของสินทรัพย์ที่ต้องการความละเอียดในการส่งออกที่เหมาะสม

ขนาดการแสดงผล	ส่งออกที่ 1x	ส่งออกที่ 2x (retina)
64px icon	64px	128px
256px logo	256px	512px
1200px hero	1200px	2400px

หากไฟล์ PNG จะถูกใช้ในหลายขนาด ให้ส่งออกที่ขนาดใหญ่ที่สุดและปล่อยให้ CSS ทำการปรับขนาดลง
สำหรับความคมชัดระดับ retina ให้ส่งออกที่ 2x (หรือ 3x สำหรับโทรศัพท์) ของขนาดการแสดงผล
การส่งออกที่เล็กเกินไปเป็นข้อผิดพลาดทั่วไปที่ไม่สามารถแก้ไขได้

สูตรคณิตศาสตร์นั้นง่ายมาก: เพียงแค่กำหนดความกว้างการแสดงผลที่ใหญ่ที่สุด คูณสองสำหรับ retina และส่งออกที่ความกว้างพิกเซลนั้น คู่มือ retina display guide จะครอบคลุมขั้นตอนการทำงาน 2x และ 3x อย่างละเอียด

ต้องแปลง SVG เป็น PNG อย่างไร?

มีหลายวิธีที่ใช้ได้ ซึ่งขึ้นอยู่กับปริมาณงานและความต้องการในการควบคุม

Online converter — อัปโหลด SVG, ตั้งค่ามิติ, และดาวน์โหลด PNG เหมาะสำหรับงานที่ไม่บ่อย
Design tool (Figma, Illustrator, Inkscape) — เปิด SVG และส่งออกในขนาดที่ต้องการ ให้การควบคุมที่ดีที่สุด
Command line (rsvg-convert, ImageMagick) — สามารถทำสคริปต์เพื่อประมวลผลแบบกลุ่มได้
Browser — เปิด SVG และจับภาพหน้าจอ (screenshot) ที่ขนาดเป้าหมาย

ภาพศิลปะนามธรรม 3 มิติที่สวยงาม แสดงรายละเอียดที่การส่งออกแบบ PNG ความละเอียดสูงสามารถรักษาไว้ได้

สำหรับการทำงานแบบชุด (batch work) command line จะดีกว่าเพราะสามารถใช้การตั้งค่าเดียวกันกับทุกไฟล์ สำหรับโลโก้ที่สำคัญเพียงชิ้นเดียว เครื่องมือออกแบบจะให้การควบคุมตัวเลือกการส่งออกได้มากที่สุด

การแปลงชุดไอคอนแบบกลุ่ม (Batch)

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

จัดระเบียบไฟล์ SVG ทั้งหมดให้อยู่ในโฟลเดอร์เดียว โดยตั้งชื่อให้สอดคล้องกัน
กำหนดขนาดส่งออกที่ต้องการ (เช่น 16, 32, 64 สำหรับชุดไอคอน)
ใช้เครื่องมือ rasterizer แบบกลุ่มเพื่อส่งออกไฟล์ SVG แต่ละตัวในแต่ละขนาด
ตรวจสอบผลลัพธ์บางส่วนสำหรับความคมชัดและความโปร่งใส

Batch task	Tool	When
Rasterize folder	Command-line converter	Icon sets, many sizes
Single export	Image converter	One-off graphics
Resize outputs	Image resizer	After rasterizing
Compress outputs	Image compressor	Before serving

ข้อดีของการทำ batch rasterizing คือความสม่ำเสมอ — ไอคอนทุกตัวจะถูกส่งออกด้วยการตั้งค่าที่เหมือนกันอย่างแม่นยำ ทำให้ชุดไอคอนดูเป็นระเบียบ batch processing guide ครอบคลุมขั้นตอนการทำงานที่กว้างขึ้นสำหรับการใช้การดำเนินการกับโฟลเดอร์ของรูปภาพ และเมื่อ rasterize แล้ว ไฟล์ PNG สามารถถูก compressed ร่วมกันเพื่อลดขนาดที่ให้บริการได้

ข้อผิดพลาดทั่วไปในการแปลงไฟล์

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

เมื่อใดควรเก็บ SVG ไว้แทน

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

การแปลงออกไปเพราะความสะดวกสบายมากกว่าความจำเป็น เป็นการทิ้งความสามารถในการปรับขนาด (scalability) ที่ทำให้ SVG เป็นตัวเลือกที่ถูกต้องตั้งแต่แรก สำหรับข้อกำหนดทางเทคนิค W3C SVG standard จะกำหนดว่า SVG สามารถแสดงอะไรได้บ้าง และ PNG specification จะบันทึกรูปแบบ raster ที่มันแปลงไปให้ ตรงกับรูปแบบกับข้อจำกัด — และเมื่อไม่มีข้อจำกัดใดบังคับให้ใช้ PNG ให้ปล่อยให้ SVG ทำหน้าที่ของมัน

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

ความแตกต่างระหว่าง SVG และ PNG คืออะไร?

SVG เป็นรูปแบบเวกเตอร์ (shapes described mathematically, resolution-independent) ส่วน PNG เป็นแบบแรสเตอร์ (a grid of pixels) SVG สามารถปรับขนาดได้โดยไม่สูญเสียความคมชัด ในขณะที่ PNG มีขนาดคงที่ตามมิติของพิกเซล ดังนั้น ให้แปลง SVG เป็น PNG เมื่อคุณต้องการรูปภาพแรสเตอร์ที่มีขนาดคงที่

ควรแปลง SVG เป็น PNG เมื่อใด?

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

จะเลือกความละเอียดได้อย่างไร?

ให้จับคู่กับขนาดหน้าจอที่ 1x หรือ 2x (สำหรับ retina) เนื่องจาก SVG เป็นแบบ resolution-independent คุณจึงสามารถแปลงเป็นแรสเตอร์ได้ตามขนาดพิกเซลที่คุณต้องการ — ให้เรนเดอร์ที่ 2x ของขนาดหน้าจอเพื่อความคมชัดบนหน้าจอ retina

สามารถแปลง SVG เป็น PNG แบบกลุ่มได้หรือไม่?

ได้ — ImageMagick (magick mogrify), rsvg-convert, หรือ headless browser สามารถจัดการโฟลเดอร์ของไฟล์ SVG ได้ สำหรับชุดไอคอน สคริปต์จะเรนเดอร์ทุก SVG ในทุกขนาดที่คุณต้องการในครั้งเดียว ดูที่ SVG to PNG guide

SVG รองรับความโปร่งใสหรือไม่?

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

การแปลง SVG เป็น PNG ทำให้คุณภาพลดลงหรือไม่?

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

สามารถแปลง SVG เป็น PNG ได้ทุกขนาดหรือไม่?

ได้ — เนื่องจาก SVG เป็นเวกเตอร์และ resolution-independent คุณจึงสามารถแปลงเป็นแรสเตอร์ได้ตามขนาดพิกเซลที่คุณต้องการ ตั้งแต่ไอคอน 16px ไปจนถึงแบนเนอร์ 4000px โดยไม่มีการสูญเสียคุณภาพ นี่คือข้อได้เปรียบหลักเหนือรูปแบบแรสเตอร์ ให้เรนเดอร์ที่ 2x ของขนาดหน้าจอเพื่อความคมชัดบนหน้าจอ retina ตัว SVG เองจะไม่สูญเสียความคมชัดเลย มีเพียง PNG ที่ถูกแปลงเป็นแรสเตอร์เท่านั้นที่มีขนาดคงที่ตามขนาดส่งออก