SVG to PNG: แปลง Vector เป็น Raster โดยไม่สูญเสียคุณภาพ

อัปเดตล่าสุด: June 28, 2026

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

คำตอบสั้น ๆ: คุณควรแปลง SVG เป็น PNG หรือไม่?

ควรเก็บ SVG ไว้เป็นแหล่งที่มาของคุณ และส่งออกเป็น PNG ก็ต่อเมื่อระบบปลายทางไม่สามารถใช้ข้อมูลแบบ vector ได้ ลูกค้าอีเมล, ช่องภาพของ CMS รุ่นเก่า, แพลตฟอร์มโฆษณาบางแห่ง, และกระบวนการพิมพ์บางส่วน ต้องการไฟล์ raster แบบแบน สำหรับไอคอนเว็บไซต์, favicon, หรือสิ่งใดก็ตามที่ต้องปรับขนาด ควรคงอยู่ใน SVG เมื่อคุณทำการแปลง ให้เรนเดอร์ PNG ที่ความกว้างจอแสดงผลที่ใหญ่ที่สุด 2x เพื่อให้ยังคมชัดบนหน้าจอ high-DPI, รักษา alpha channel สำหรับความโปร่งใส และเก็บไฟล์ .svg ต้นฉบับไว้พร้อมกับการส่งออก

ความแตกต่างที่แท้จริงระหว่าง SVG และ PNG คืออะไร?

SVG เป็นไฟล์ข้อความที่เต็มไปด้วยองค์ประกอบ <path>, <rect>, และ <circle> เบราว์เซอร์หรือตัวเรนเดอร์จะวาดรูปร่างเหล่านั้นตามความละเอียดที่คุณร้องขอ ดังนั้นไอคอน 16px และภาพฮีโร่ขนาด 1600px จึงมาจากแหล่งเดียวกันโดยไม่มีการสูญเสียคุณภาพใดๆ SVG2 specification กำหนดโมเดลนี้ ซึ่งรวมถึง viewBox ที่กำหนดพื้นที่พิกัด

PNG เป็นคอนเทนเนอร์แบบแรสเตอร์ (raster container) มันจัดเก็บตารางพิกเซลที่แน่นอนบวกกับช่อง alpha ทางเลือกสำหรับความโปร่งใส และรองรับการบีบอัดแบบไม่สูญเสียข้อมูล PNG format reference at libpng.org ครอบคลุมโครงสร้างชังก์ (chunk structure) อย่างละเอียด PNG จะไม่มีทาง "รู้" ว่ามันมาจากไฟล์เวกเตอร์ มันรู้เพียงแค่ความกว้างและความสูงของตัวมันเองเท่านั้น

image format guide เจาะลึกยิ่งขึ้นว่าเมื่อใดที่คอนเทนเนอร์แต่ละประเภทจะเหนือกว่า สรุปสั้นๆ คือ: SVG คือภาพวาดของคุณ ส่วน PNG คือสำเนาสิ่งพิมพ์ของภาพวาดนั้นในขนาดเฉพาะเจาะจง

การทำ Rasterization ทำงานอย่างไรกันแน่?

Rasterization คือขั้นตอนที่คณิตศาสตร์แบบ vector กลายเป็น pixels ตัว renderer จะอ่าน SVG คำนวณว่า pixels ใดบ้างที่ตกอยู่ในแต่ละรูปร่าง และเขียนค่าสีสำหรับแต่ละจุด จำนวนที่คุณควบคุมคือความกว้างและความสูงของ output ในหน่วย pixels

ตัวเลขเดียวนี้ตัดสินทุกอย่าง การ render SVG ตัวเดียวกันที่ 128px จะดูคมชัดเมื่อใช้เป็น favicon แต่จะดูขุ่นมัวบนจอภาพ 4K หากคุณ render ที่ 2048px มันจะดูคมชัดในทุกจุดแต่ไฟล์จะมีขนาดใหญ่กว่า SVG ไม่มี "resolution" ให้สูญเสีย คุณแค่กำลังเลือกจำนวน pixels ที่ต้องการให้ปรากฏ

ฉันได้แปลงไอคอนหนึ่งให้เป็นสามความกว้างเพื่อทดสอบเรื่องนี้: การ export ขนาด 64px มีขนาด 4 KB และดูสะอาดตาบนแถบเครื่องมือ, การ export ขนาด 512px มีขนาด 24 KB และดูถูกต้องที่ 2x, และการ export ขนาด 2048px มีขนาด 142 KB ซึ่งแยกไม่ออกจาก vector เมื่อแสดงผลเต็มหน้าจอ SVG ต้นฉบับมีขนาด 1.2 KB ตลอด บทเรียนคือว่าสิ่งที่กำลังปรับจูนไม่ใช่ขนาดของ SVG แต่เป็นขนาดของ PNG

Anti-aliasing คือส่วนที่เหลือของงานนี้ เมื่อขอบแนวทแยงหรือโค้งมาบรรจบกับ pixel grid, renderer จะผสมสีขอบเข้ากับพื้นหลังเพื่อให้เส้นดูไม่เป็นหยัก นี่คือเหตุผลที่ว่าทำไมการ stroke ขนาด 1px ถึงอาจดูเบลอได้หากคุณ render เล็กเกินไป และทำไมพื้นหลังแบบโปร่งใสจึงสำคัญ: anti-aliasing จะทำการผสมผสานกับสิ่งที่อยู่ด้านหลังรูปร่างนั้น

เมื่อไหร่ที่คุณควรใช้ SVG แทน?

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

• ไอคอนบนเว็บและสัญลักษณ์ UI ที่ต้องแสดงผลที่ขนาด 16px และ 48px ด้วยสินทรัพย์เดียวกัน (asset).
• โลโก้ในส่วนหัวของเว็บไซต์ที่ต้องปรับขนาดตาม viewport.
• แผนภาพและกราฟที่ข้อความต้องคมชัดแม้จะซูมเข้าไป.
• ทุกจุดที่คุณอาจต้องการแก้ไขงานศิลปะในภายหลัง.

เบราว์เซอร์สมัยใหม่สามารถจัดการกับ SVG ได้ทั้งแบบ inline, เป็นแหล่งที่มาของ <img>, และเป็นพื้นหลัง CSS โดยไม่มีปัญหา MDN's image type reference ยืนยันการรองรับ SVG อย่างกว้างขวางในเอนจิ้นปัจจุบัน หากเหตุผลเดียวที่คุณแปลงไฟล์คือ "PNG รู้สึกปลอดภัยกว่า" จริงๆ แล้วคุณกำลังเพิ่มน้ำหนักไฟล์โดยไม่จำเป็น.

เมื่อไหร่ที่คุณจำเป็นต้องใช้ PNG จริงๆ?

แปลงเป็น PNG เมื่อปลายทางปฏิเสธเวกเตอร์ หรือเมื่อคุณต้องการสำเนาแรสเตอร์แบบคงที่และพกพาได้:

• อีเมล HTML ซึ่งไคลเอนต์ส่วนใหญ่จะลบหรือบล็อก SVG ทั้งหมด
• ช่อง CMS รุ่นเก่า หรือวิดเจ็ตจากภายนอกที่รับเฉพาะการอัปโหลดแบบแรสเตอร์
• ระบบงานพิมพ์หรือ PDF ที่คาดหวังภาพแบนที่ทราบค่า DPI
• การแชร์ไปยังแพลตฟอร์มที่เข้ารหัสใหม่ในการอัปโหลดและจะทำให้ SVG เสียรูป
• ชุด favicon ซึ่งยังคงคาดหวังการสำรองข้อมูลเป็น PNG ควบคู่ไปกับ SVG ใดๆ

สำหรับ favicon โดยเฉพาะอย่างยิ่ง favicon icon converter guide จะแสดงการส่งออกหลายขนาดที่คุณต้องการโดยปกติแล้ว

วิธีการแปลง SVG เป็น PNG บน Command Line อย่างไร?

Command line ให้ผลลัพธ์ที่ทำซ้ำได้และเป็นวิธีที่เร็วที่สุดเมื่อคุณมีไฟล์มากกว่าแค่ไม่กี่ไฟล์ ฉันได้เรนเดอร์ไอคอนทดสอบสำหรับคู่มือนี้ด้วยเครื่องมือสามตัวเพื่อเปรียบเทียบผลลัพธ์

rsvg-convert (librsvg) เป็นตัวเรนเดอร์ที่คาดการณ์ได้ที่สุดที่ฉันเคยใช้ มันเคารพ viewBox จัดการกับฟอนต์ได้อย่างสะอาด และคงความโปร่งใสเป็นค่าเริ่มต้น

## Install librsvg
brew install librsvg            # macOS
sudo apt install librsvg2-bin   # Debian/Ubuntu

## Export at 2x of the display width, transparent background
rsvg-convert -w 1024 -h 1024 input.svg -o output.png

ImageMagick ติดตั้งอยู่แล้วในเครื่องจำนวนมากและเหมาะสำหรับงานครั้งเดียวที่รวดเร็ว การเรนเดอร์ SVG ของมันมอบหมายให้เอนจินภายใน ดังนั้นควรตรวจสอบไฟล์ที่ซับซ้อนด้วยสายตา

## Transparent background, fixed size
magick -background none input.svg -resize 1024x1024 output.png

sharp (Node.js) คือสิ่งที่ฉันใช้ในสคริปต์ Build มันรวดเร็ว สตรีมได้ดี และเหมาะกับไปป์ไลน์ของระบบการออกแบบ

import sharp from "sharp";

await sharp("input.svg", { density: 384 })
  .resize(1024, 1024)
  .png()
  .toFile("output.png");

ตัวเลือก density มีความสำคัญใน sharp: มันกำหนดค่า DPI ภายในที่ใช้ก่อนการปรับขนาด และค่าที่สูงขึ้นจะป้องกันไม่ให้เส้นบางๆ หายไปในการส่งออกขนาดเล็ก

จะรักษาความโปร่งใสได้อย่างไรเมื่อทำการแปลงไฟล์?

PNG รองรับ alpha channel แบบ 8 บิต ดังนั้นความโปร่งใสจึงเป็นคุณสมบัติหลัก สาเหตุที่การส่งออกบางครั้งกลับมาพร้อมกับกล่องสีขาวก็เพราะว่าตัว SVG เอง หรือตัวแปลงไฟล์ได้เพิ่มพื้นหลังทึบแสงเข้าไป

ให้ตรวจสอบสองสิ่ง ประการแรก ยืนยันว่า SVG ไม่มีแท็ก <rect> ที่เติมเต็มพื้นหลังแบบเต็มแคนวาส ประการที่สอง แจ้งให้ renderer ทราบอย่างชัดเจนว่าไม่ให้วาดพื้นหลังนั้น:

• ด้วย rsvg ให้ละเว้น background flag ใด ๆ และมันจะยังคงโปร่งใสอยู่
• ด้วย ImageMagick ให้ส่งค่า -background none ก่อนอินพุต
• ด้วย sharp ห้ามเรียกใช้ .flatten() และห้ามตั้งค่า .background()
• ด้วย cairosvg ให้กำหนดสีพื้นหลังเป็น none

หากงานศิลปะต้องการพื้นหลังในภายหลัง ควรนำมาประกอบ (composite) ในขั้นตอนที่สอง แทนที่จะฝังมันลงไปในการส่งออก คู่มือ transparent images guide ครอบคลุมรายละเอียด alpha-channel สำหรับ PNG และ WebP ส่วนแนวทางปฏิบัติที่ดีที่สุดสำหรับการลบพื้นหลัง background removal best practices จะช่วยเมื่อแหล่งที่มาของคุณเป็นภาพถ่ายมากกว่าเวกเตอร์ที่สะอาด

ควรตั้งขนาดและโหมดสีของ PNG อย่างไร?

ให้เลือกขนาดพิกเซลจากพื้นที่ที่ใหญ่ที่สุดที่รูปภาพจะปรากฏ จากนั้นคูณสองสำหรับจอ Retina ปรับอัตราส่วนให้เข้ากับ SVG viewBox เพื่อไม่ให้เกิดการยืดผิดสัดส่วนใดๆ

สำหรับโหมดสี ให้ใช้ 8-bit RGB สำหรับงานบนหน้าจอ PNG ยังรองรับ indexed (palette) mode และ 16-bit ต่อช่อง แต่ 8-bit RGB สามารถครอบคลุมโลโก้ ไอคอน และ UI art ด้วยไฟล์ที่เล็กที่สุดและเหมาะสมที่สุด หากภายหลังคุณต้องการ web asset ที่มีขนาดเล็กลง Workflow compress images without losing quality จะถูกนำมาใช้หลังจาก export และคุณสามารถเปรียบเทียบ containers ได้ด้วย JPG, PNG, and WebP comparison

เกิดอะไรขึ้นเมื่อเรสเตอไรซ์ด้วยขนาดที่เล็กเกินไป?

ความล้มเหลวแบบคลาสสิกคือการส่งออกที่ 1x แล้วขยาย PNG ด้วย CSS เนื่องจากพิกเซลถูกกำหนดค่าไว้แล้ว เบราว์เซอร์จึงสร้างพิกเซลที่ขาดหายไปขึ้นมาเอง ทำให้ขอบดูนุ่มนวล คุณไม่สามารถได้ความคมชัดนั้นกลับคืนมาจาก PNG ได้; คุณต้องเรนเดอร์ใหม่จาก SVG

ให้ระวังปัญหาเฉพาะเหล่านี้:

• เส้นบางจะหายไปเมื่อความกว้างของเอาต์พุตใกล้เคียงกับน้ำหนักของเส้น
• ข้อความขนาดเล็กจะกลายเป็นภาพเบลอเมื่อต่ำกว่าเทียบเท่า 16px
• รายละเอียดที่ประณีตจะเกิดการสุ่ม (dither) กลายเป็นสัญญาณรบกวนบนเกรเดียนต์ที่มีคอนทราสต์ต่ำ
• มุมโค้งมนจะถูกตัดอย่างไม่สม่ำเสมอหากไม่มี anti-aliasing
• การเยื้องครึ่งพิกเซลทำให้เกิดขอบ 1px ที่ดูเบลอ

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

จะแปลงไฟล์ SVG ทั้งโฟลเดอร์เป็นชุดได้อย่างไร?

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

mkdir -p png
for svg in icons/*.svg; do
  name=$(basename "$svg" .svg)
  rsvg-convert -w 512 -h 512 "$svg" -o "png/${name}.png"
done

ใน Node, sharp จัดการกับไดเรกทอรีด้วย Promise.all และรวดเร็วพอสำหรับไอคอนหลายร้อยตัว ควรคงขนาดเดียวต่อรอบ (run) และสร้างขนาดเพิ่มเติมในรอบแยกต่างหาก เพื่อที่ไฟล์ที่ล้มเหลวเพียงไฟล์เดียวจะไม่ทำให้กระบวนการทั้งหมดหยุดชะงัก

สามารถย้อนกลับจาก PNG เป็น SVG ได้หรือไม่?

ไม่ได้เลยในทางที่สมบูรณ์แบบ PNG คือตารางพิกเซลที่เสร็จสมบูรณ์แล้ว การติดตามกลับเป็นเวกเตอร์ด้วยเครื่องมือ autotrace เป็นไปได้ แต่ผลลัพธ์จะเป็นเพียงการประมาณค่า: เส้นโค้งจะได้รับจุดยึด (anchor points) เพิ่มเติม ข้อความจะกลายเป็นโครงร่าง และรายละเอียดเล็ก ๆ น้อย ๆ จะถูกคาดเดาขึ้นมา มันจะไม่ตรงกับแหล่งที่มาแบบเวกเตอร์ต้นฉบับเลย

หากคุณมีเฉพาะโลโก้แบบแรสเตอร์และต้องการความสามารถในการปรับขนาด วิธีปฏิบัติคือการสร้างเวกเตอร์ขึ้นมาใหม่ในเครื่องมือวาดภาพ แทนที่จะทำการติดตาม (trace) ให้ถือว่า SVG-to-PNG เป็นกระบวนการทางเดียว และเก็บรักษาแหล่งที่มาต้นฉบับไว้ คู่มือ convert image format guide ระบุความไม่สมมาตรเดียวกันนี้ในคู่แรสเตอร์และเวกเตอร์อื่น ๆ

รายการตรวจสอบสุดท้ายก่อนที่คุณจะส่งออก

• เก็บไฟล์ .svg ต้นฉบับไว้และไม่เขียนทับ
• ความกว้างที่ส่งออกต้องอย่างน้อย 2x ของความกว้างการแสดงผลที่ใหญ่ที่สุด
• อัตราส่วนภาพต้องตรงกับ viewBox ของ SVG
• พื้นหลังต้องโปร่งใส เว้นแต่คุณจะทำให้มันแบนโดยเจตนา
• ขอบควรมีการ anti-alias และเส้นที่บางยังคงมองเห็นได้
• ต้องทำการบีบอัดไฟล์หลังจากการส่งออกหากจะเผยแพร่บนเว็บ

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

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

เมื่อไหร่ที่ควรแปลง SVG เป็น PNG?

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

จะเลือกความละเอียดสำหรับ PNG อย่างไร?

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

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

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

การแปลงแบบ command-line ทำอย่างไร?

ImageMagick: magick input.svg -density 144 -resize 512x512 output.png. ตัวเลือก -density ควบคุมความละเอียดในการ render rsvg-convert หรือ headless browser เป็นทางเลือกสำหรับ SVG ที่ซับซ้อน ดู converter guide

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

ไม่ — เมื่อถูก rasterize เป็น PNG รูปทรงเวกเตอร์จะกลายเป็นพิกเซลและสูญเสียความสามารถในการแก้ไข คุณต้องแก้ไข SVG (ซึ่งเป็น text-based XML) และทำการ re-rasterize เก็บ SVG ไว้เป็นแหล่งข้อมูลที่แก้ไขได้; ส่วน PNG คือผลลัพธ์ที่คงที่

สามารถแก้ไข SVG ได้หรือไม่?

ใช่ — SVG เป็น XML ที่อิงข้อความ ดังนั้นคุณจึงสามารถแก้ไขได้ในโปรแกรม text editor ใดๆ หรือ vector editor (Illustrator, Inkscape, Figma) นี่คือข้อได้เปรียบหลักเหนือกว่า PNG: คือ SVG ยังคงสามารถแก้ไขและเป็นแบบ resolution-independent ได้ แก้ไข SVG และ re-rasterize เป็น PNG เมื่อใดก็ตามที่คุณต้องการผลลัพธ์ raster ที่คงที่

เครดิตรูปภาพ

• งานศิลปะเวกเตอร์เรขาคณิตนามธรรมสีน้ำเงินและเขียว — photo by Steve A Johnson on Pexels
• ชุดแล็ปท็อปและแท็บเล็ตกราฟิกบนโต๊ะดีไซเนอร์สีสันสดใส — photo by Alex Andrews on Pexels
• แล็ปท็อปบนโต๊ะไม้ในพื้นที่ทำงานที่สะอาดสำหรับการออกแบบโลโก้ — photo by Tom Swinnen on Pexels
• ภาพโคลสอัพของมือที่วาดบนแท็บเล็ตด้วยสไตลัส — photo by Berna on Pexels

เปิดเครื่องมือ Imagic AI ที่เกี่ยวข้อง