> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# ไฟล์ SVG คืออะไร? วิธีเปิด ใช้ และสร้างไฟล์

> SVG อธิบายภาพด้วยโค้ดแทนพิกเซล จึงคมชัดได้ทุกขนาด อ่านคำอธิบายง่าย ๆ ว่าหมายถึงอะไร ใช้ทำอะไร และสร้างจากภาพที่มีได้อย่างไร

Source: https://perfectvector.com/th/blog/what-is-an-svg-file

Language: th
Author: Claire Yoon
Published: 2026-05-25T08:00:00+09:00
Updated: 2026-08-26T08:00:00+09:00

ไฟล์ SVG (Scalable Vector Graphics) คือภาพที่อธิบายด้วย XML และรูปทรงเวกเตอร์ แทนการมีเพียงตารางพิกเซลขนาดตายตัว มันเก็บภาพเป็นรูปทรง พาธ ข้อความ และสีเติมได้ องค์ประกอบเวกเตอร์เหล่านั้นจึงยังคมเมื่อปรับขนาด ขนาดไฟล์ขึ้นอยู่กับจำนวนและความซับซ้อนขององค์ประกอบ รวมถึงมีราสเตอร์ฝังอยู่หรือไม่ [ดูมาตรฐาน W3C SVG 2](https://www.w3.org/TR/SVG2/)

นี่คือคู่มือภาษาง่ายสำหรับผู้ที่เพิ่งเจอไฟล์ชนิดนี้: SVG คืออะไร ข้างในมีอะไร เหมาะและไม่เหมาะกับอะไร เปิดอย่างไร และสร้างจากภาพที่มีอยู่ได้อย่างไร ไม่ต้องมีพื้นฐานพัฒนาเว็บ

> **คำอธิบายฉบับสั้น**
>
> * SVG เก็บภาพเป็น**รูปทรงที่อธิบายด้วยโค้ด** แทนพิกเซล จึงปรับได้ทุกขนาดโดยไม่เบลอ
> * เหมาะกับ**โลโก้ ไอคอน ภาพประกอบง่าย ๆ และงาน Cricut หรืองานพิมพ์** ไม่เหมาะกับ**ภาพถ่าย**
> * **เปิด**ในเว็บเบราว์เซอร์ แอปออกแบบ (Illustrator, Inkscape, Figma, Canva) หรือแม้แต่โปรแกรมข้อความธรรมดาได้
> * **สร้าง**ด้วยการออกแบบในซอฟต์แวร์เวกเตอร์ หรือ[แปลงภาพที่คุณมีอยู่](https://perfectvector.com/th/image-to-vector) เป็น SVG

## SVG เทียบกับภาพทั่วไป (PNG หรือ JPG)

PNG หรือ JPG เป็นภาพ**ราสเตอร์**: ตารางพิกเซลสีขนาดตายตัวคล้ายโมเสก ซูมมากพอจะเห็นสี่เหลี่ยม นี่คือเหตุผลที่โลโก้ PNG เบลอเมื่อขยายมาก

SVG เป็นภาพ**เวกเตอร์**: ชุดคำสั่งที่บอกว่า "วาดวงกลมตรงนี้ เติมสีส้ม วาดเส้นโค้งนี้ตรงนั้น" เพราะภาพถูกวาดใหม่จากคำสั่งทุกครั้ง จึงดูคมทุกขนาด ความต่างข้อนี้คือประโยชน์หลัก (ดูรายละเอียดว่าควรใช้แต่ละแบบเมื่อใดได้ที่ [PNG เทียบกับ SVG](https://perfectvector.com/th/blog/png-vs-svg))

![โลโก้ที่ขยายเป็น PNG เบลอและเห็นพิกเซลด้านซ้าย เทียบกับ SVG คมชัดด้านขวา](https://perfectvector.com/blog/what-is-an-svg-file/raster-vs-svg-zoom.webp)

*ขยาย PNG แล้วจะเห็นพิกเซล SVG วาดใหม่จากรูปทรงจึงยังคมชัดทุกขนาด*

## ข้างในไฟล์ SVG มีอะไรจริง ๆ

สิ่งที่หลายคนประหลาดใจคือ SVG เป็น**ข้อความ** เปิดใน Notepad หรือโปรแกรมแก้ไขโค้ดใดก็อ่านได้ ภายในคือ XML รูปแบบข้อความที่ใช้แท็ก โดยรูปทรงแต่ละชิ้นเป็นบรรทัดโค้ด SVG ง่าย ๆ ของวงกลมสีส้มมีหน้าตาแบบนี้:

```
<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="orange" />
</svg>
```

นี่คือทั้งไฟล์ `circle` วาดรูปทรง `cx`/`cy` วางตำแหน่ง `r` ตั้งรัศมี และ `fill` ตั้งสี เพราะ SVG เป็น XML แบบข้อความ คุณจึงตรวจได้ และในไฟล์ง่าย ๆ แบบนี้ก็เปลี่ยนสีด้วยการแก้แอตทริบิวต์เดียว SVG เป็นมาตรฐานเปิดของ W3C ที่เบราว์เซอร์สมัยใหม่รองรับ [อ่านบทนำ SVG ของ W3C](https://www.w3.org/TR/SVG2/intro.html)

หากไฟล์มีนามสกุล .svgz [เปรียบเทียบ SVGZ กับ SVG](https://perfectvector.com/th/blog/svgz-vs-svg) อธิบายวิธีคืนมาร์กอัปและเลือกรูปแบบสำหรับแก้ไขหรือส่งขึ้นเว็บ

![โค้ด SVG สั้น ๆ ด้านซ้ายและวงกลมสีส้มที่แสดงผลด้านขวา สื่อว่า SVG คือโค้ดอ่านได้ที่อธิบายรูปทรง](https://perfectvector.com/blog/what-is-an-svg-file/svg-anatomy.webp)

*SVG เป็นเพียงข้อความ โค้ดนี้วาดวงกลมสีส้มทางขวา*

## ใช้ SVG ทำอะไร

SVG เหมาะในทุกกรณีที่กราฟิกต้องคมชัดหลายขนาด หรือแก้ไขเป็นรูปทรงได้:

* **โลโก้** SVG ไฟล์เดียวใช้ได้ทั้งนามบัตรและแบนเนอร์ โดยไม่ต้องมีไฟล์แยกทุกขนาด
* **ไอคอนและกราฟิกเว็บไซต์** ปุ่ม ลูกศร และภาพประกอบง่าย ๆ ยังชัดบนจอที่มีความหนาแน่นพิกเซลต่างกัน ประสิทธิภาพยังขึ้นกับความซับซ้อนของไฟล์และวิธีส่งไฟล์ให้ผู้ใช้
* **Cricut และเครื่องตัด** SVG เป็นรูปแบบมาตรฐานของไฟล์ตัด เครื่องเดินตามพาธเพื่อตัดไวนิล กระดาษ หรือ HTV ([เตรียมไฟล์ SVG สำหรับ Cricut](https://perfectvector.com/th/blog/svg-files-for-cricut) ครอบคลุมตั้งแต่ต้นจนจบ)
* **งานพิมพ์และป้าย** เวกเตอร์ปรับเป็นขนาดจริงเท่าใดก็ได้โดยไม่แตกเป็นพิกเซล

## SVG ไม่เหมาะกับอะไร

SVG สร้างมาเพื่องานกราฟิกสีเรียบ จึงไม่เหมาะกับ**ภาพถ่าย** ภาพถ่ายมีสีนับล้านที่ผสมกันละเอียดโดยไม่มีบริเวณสีเรียบ การฝืนเปลี่ยนเป็นรูปทรงจะได้ภาพสีเป็นชั้นคล้ายภาพวาด หรือไฟล์มหาศาลและยุ่งเหยิง หากกำลังคิดจะแปลงภาพถ่าย ให้อ่าน[สิ่งที่เกิดขึ้นจริงเมื่อแปลงภาพถ่ายเป็น SVG](https://perfectvector.com/th/blog/convert-photo-to-svg) ก่อน หากต้องการรายละเอียดภาพถ่ายจริง ให้เก็บ JPG หรือ PNG ไว้

## วิธีเปิดไฟล์ SVG

คุณมีทางเลือกง่าย ๆ สามแบบตามสิ่งที่ต้องการทำ:

* **แค่ดูภาพ:** ลากไฟล์เข้าเว็บเบราว์เซอร์ ภาพแสดงทันที ไม่ต้องติดตั้งซอฟต์แวร์
* **แก้ไขด้วยภาพ:** เปิดในแอปออกแบบ เช่น Inkscape (ฟรี), Illustrator, Figma หรือ Canva ([วิธีแก้ไข SVG](https://perfectvector.com/th/blog/how-to-edit-an-svg) อธิบายการเปลี่ยนสีและรูปทรง)
* **ดูหรือปรับโค้ด:** เปิดในโปรแกรมข้อความธรรมดา เช่น Notepad หรือ VS Code

หากไฟล์เปิดแล้วเป็นพื้นที่ว่าง ให้ใช้[รายการตรวจ SVG ว่าง](https://perfectvector.com/th/blog/svg-opens-blank) ก่อนบันทึกใหม่ พาธอาจอยู่นอกพื้นที่งาน มองไม่เห็น ถูกตัดขอบ หรือแอปนั้นไม่รองรับ

## วิธีสร้าง SVG

มีสองทาง และทางที่เหมาะขึ้นอยู่กับสิ่งที่คุณเริ่มต้น

**ออกแบบตั้งแต่ต้น** วาดโลโก้ ไอคอน หรือภาพประกอบในซอฟต์แวร์เวกเตอร์ (Inkscape, Illustrator, Figma หรือ Canva) แล้วส่งออกเป็น SVG วิธีนี้ให้ผลสะอาดที่สุด เพราะไฟล์เป็นเวกเตอร์ตั้งแต่เริ่ม

**แปลงภาพที่มีอยู่** นี่คือสิ่งที่คนส่วนใหญ่ต้องการจริง หากโลโก้หรืองานมีเพียง PNG หรือ JPG คุณเปลี่ยนเป็น SVG ด้วย**การแปลงเป็นเวกเตอร์** ซึ่งวาดพิกเซลใหม่เป็นรูปทรงแก้ไขได้ ([การแปลงภาพเป็นเวกเตอร์คืออะไร](https://perfectvector.com/th/blog/what-is-image-vectorization) อธิบายกระบวนการ)

## ตัวอย่างการทำงานด้วย PerfectVector

หากคุณมี PNG หรือ JPG และต้องการ SVG จริง นั่นคือเส้นทางการแปลง PerfectVector สร้างโลโก้ ไอคอน และภาพประกอบสีเรียบที่เหมาะสมใหม่เป็นพาธ SVG และรูปทรงสีที่แก้ไขได้ [เปลี่ยนภาพเป็น SVG](https://perfectvector.com/th/image-to-vector) เปรียบเทียบตัวอย่างฟรีกับต้นฉบับ และตรวจพาธก่อนใช้หนึ่งเครดิตปลดล็อกไฟล์เสร็จสมบูรณ์

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

## หมายเหตุสั้น ๆ เรื่องความปลอดภัย

SVG มีเนื้อหาที่ทำงานได้ รวมถึงองค์ประกอบ `<script>` ดังนั้นอย่าถือว่า SVG ที่ไม่เชื่อถือปลอดภัยโดยอัตโนมัติเพียงเพราะเป็นรูปแบบภาพ [MDN อธิบายสคริปต์ SVG โดยตรง](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/script) สำหรับขั้นตอนอัปโหลดในเว็บไซต์ ให้ตรวจชนิดและเนื้อหาไฟล์ เปลี่ยนชื่อไฟล์ที่จัดเก็บ จำกัดขนาด และให้บริการไฟล์ด้วยสิทธิ์น้อยที่สุด OWASP แนะนำการป้องกันหลายชั้นแบบนี้สำหรับไฟล์อัปโหลดที่ไม่เชื่อถือ [ดูคู่มือ File Upload Cheat Sheet ของ OWASP](https://cheatsheetseries.owasp.org/cheatsheets/File_Upload_Cheat_Sheet.html)

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

**ใช้ไฟล์ SVG ทำอะไร?**
โลโก้ ไอคอนเว็บไซต์ ปุ่ม ภาพประกอบง่าย ๆ และไฟล์ตัดสำหรับเครื่องอย่าง Cricut เมื่อกราฟิกต้องชัดหลายขนาดหรือแก้ไขเป็นรูปทรงได้ SVG เป็นตัวเลือกที่ดี มีการใช้บนเว็บมากเพราะไฟล์เล็กและปรับขนาดโดยไม่เสียคุณภาพ

**เปิดไฟล์ SVG อย่างไร?**
ลากเข้าเว็บเบราว์เซอร์สมัยใหม่เพื่อดู เปิดในแอปออกแบบที่รองรับ เช่น Inkscape, Illustrator, Figma หรือ Canva เพื่อแก้ไขด้วยภาพ หรือเปิดในโปรแกรมข้อความอย่าง Notepad เพื่อตรวจ XML การไม่มีภาพย่อในระบบปฏิบัติการไม่ได้แปลว่าไฟล์เสีย ให้เปิดในโปรแกรมดูที่รองรับเพื่อตรวจ

**สร้างไฟล์ SVG อย่างไร?**
ออกแบบในซอฟต์แวร์เวกเตอร์ (Inkscape, Illustrator, Figma หรือ Canva) แล้วส่งออกเป็น SVG หรือแปลงภาพที่มี เช่น โลโก้ PNG หรือ JPG เป็น SVG ด้วยการแปลงเป็นเวกเตอร์ การออกแบบตั้งแต่ต้นให้ผลสะอาดที่สุด ส่วนการแปลงเป็นทางรวดเร็วเมื่อมีเพียงราสเตอร์

**ไฟล์ SVG เป็นไฟล์เวกเตอร์หรือไม่?**
ใช่ SVG ย่อมาจาก Scalable Vector Graphics และเก็บภาพเป็นรูปทรงเวกเตอร์แทนพิกเซล นี่คือเหตุผลที่มันปรับขนาดได้โดยไม่เสียคุณภาพ

**SVG ต่างจาก PNG หรือ JPG อย่างไร?**
PNG และ JPG ประกอบด้วยพิกเซลและเบลอเมื่อขยายเกินความละเอียด ส่วน SVG ประกอบด้วยรูปทรงและยังคมทุกขนาด PNG และ JPG เหมาะกับภาพถ่ายกว่า SVG เหมาะกับโลโก้ ไอคอน และกราฟิกกว่า

**เปิดไฟล์ SVG ใน Microsoft Word หรือ Office ได้หรือไม่?**
ได้ใน Microsoft 365 และ Office เวอร์ชันที่รองรับ Microsoft มีเอกสารการแทรก SVG และใช้ตัวควบคุม Graphics Format เพื่อเปลี่ยนสีหรือรูปแบบ ตัวควบคุมที่มีอาจต่างตามแอปและเวอร์ชัน [ดูคู่มือแก้ไข SVG ของ Microsoft](https://support.microsoft.com/en-us/office/graphics-visuals/edit-svg-images-in-microsoft-365)

## แหล่งข้อมูล

1. [W3C — Scalable Vector Graphics (SVG) 2](https://www.w3.org/TR/SVG2/) — นิยามเชิงบรรทัดฐานขององค์ประกอบ SVG รูปทรง การแสดงผล และไวยากรณ์ XML
2. [W3C — เนื้อหาที่ฝังใน SVG](https://www.w3.org/TR/SVG2/embedded.html) — พฤติกรรมมาตรฐานของราสเตอร์และเนื้อหาอื่นที่ฝังใน SVG
3. [MDN — `<script>` ใน SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/script) — เอกสารอ้างอิงที่แสดงว่า SVG มีสคริปต์ที่ทำงานได้
4. [OWASP — File Upload Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/File_Upload_Cheat_Sheet.html) — การควบคุมความปลอดภัยเพื่อรับและให้บริการไฟล์อัปโหลดที่ไม่เชื่อถือ
5. [ฝ่ายสนับสนุน Microsoft — แก้ไขภาพ SVG ใน Microsoft 365](https://support.microsoft.com/en-us/office/graphics-visuals/edit-svg-images-in-microsoft-365) — การรองรับ Office และขั้นตอนแก้ไขกราฟิก SVG อย่างเป็นทางการ

***

SVG อธิบายงานด้วยพาธแทนตารางพิกเซลตายตัวได้ หากงานสีเรียบที่เหมาะสมของคุณมีเพียง PNG หรือ JPG ให้[ลากเส้นด้วย PerfectVector](https://perfectvector.com/th/image-to-vector) ตรวจรูปทรงในตัวอย่าง แล้วทดสอบ SVG ที่ปลดล็อกในเครื่องมือที่จะแก้ไข พิมพ์ หรือตัดไฟล์นั้น

## Explore

- [Read the HTML article](https://perfectvector.com/th/blog/what-is-an-svg-file)
- [วิธีแปลง PDF เป็น SVG: ส่งออกหรือลากเส้น](https://perfectvector.com/th/blog/convert-pdf-to-svg.md)
- [วิธีแปลงภาพเป็น SVG บน iPhone โดยไม่ต้องใช้แอป](https://perfectvector.com/th/blog/image-to-svg-on-iphone.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)