เปิดไฟล์ SVG อย่างไร? คู่มือครบทั้งคอมพิวเตอร์ มือถือ และเบราว์เซอร์

1. สี่วิธีเปิด SVG บนคอมพิวเตอร์

• เบราว์เซอร์ (ง่ายที่สุด): ลากไฟล์ SVG ไปวางในหน้าต่าง Chrome, Edge, Firefox หรือ Safari ก็จะแสดงผล; หรือคลิกขวาที่ไฟล์ เลือก "Open with" แล้วเลือกเบราว์เซอร์;
• ตั้งโปรแกรมเริ่มต้น: ถ้าทำงานกับ SVG เป็นประจำ ให้ผูกไฟล์ .svg ไว้กับเบราว์เซอร์หรือโปรแกรมออกแบบ ดับเบิลคลิกก็เปิดได้ทันที;
• โปรแกรมออกแบบ: Illustrator, Figma และ Inkscape ที่ให้ฟรี เปิดและแก้ไข SVG ได้ เหมาะกับงานที่ต้องปรับลึก;
• โปรแกรมแก้ไขโค้ด: SVG เป็นข้อความ XML เปิดด้วย VS Code จะเห็นและแก้ไขซอร์สได้ ช่วยแก้ปัญหาได้สะดวกมาก

วิธีตั้งโปรแกรมเริ่มต้น: บน Windows ให้คลิกขวาที่ไฟล์ SVG เลือก "Open with → Choose another app" แล้วติ๊ก "Always use this app"; บน macOS ให้คลิกขวาเลือก "Get Info" เลือกเบราว์เซอร์ในช่อง "Open with" แล้วกด "Change All" หลังจากนั้นดับเบิลคลิกก็ดูตัวอย่างได้ทันที

2. เปิด SVG บนมือถืออย่างไร

Android: แอปจัดการไฟล์บางตัวดูตัวอย่าง SVG ไม่ได้ ให้แตะค้างไฟล์ เลือก "Open with" แล้วเลือกเบราว์เซอร์ iPhone: บันทึกไฟล์ SVG ไว้ในแอป "Files" ระบบรุ่นใหม่ ๆ ดูตัวอย่างได้โดยตรง หากไม่ขึ้น ให้กดแชร์แล้วเปิดด้วย Safari ไฟล์ SVG ที่ได้รับผ่าน WeChat หรือ QQ จะถูกมองเป็นไฟล์ธรรมดา เลือก "Open with" เบราว์เซอร์ก็แสดงผลได้ตามปกติ

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

3. ดับเบิลคลิกแล้วขึ้นโค้ดหรือหน้าว่าง จะทำอย่างไร

ขึ้นโค้ดเต็มจอ: แปลว่าไฟล์ถูกผูกกับ Notepad หรือโปรแกรมแก้ไขข้อความ SVG เป็นข้อความอยู่แล้ว จึงเป็นเรื่องปกติ เปลี่ยนมาเปิดด้วยเบราว์เซอร์ก็จะเห็นรูป หน้าว่าง: ขอตรวจสอบว่าไฟล์สมบูรณ์ก่อน เปิดด้วยโปรแกรมแก้ไขโค้ด ไฟล์ SVG ที่ถูกต้องต้องขึ้นต้นด้วยแท็ก <svg> หรือคำประกาศ <?xml หากเห็น <html> หรือโค้ดเว็บแทน แปลว่าตอนดาวน์โหลดน่าจะบันทึกหน้าแจ้งข้อผิดพลาดมาเป็นไฟล์ .svg ให้ดาวน์โหลดใหม่ นอกจากนี้ ถ้าไฟล์อ้างอิงภาพหรือฟอนต์ภายนอกและโหลดไม่ขึ้น เนื้อหาก็จะขาดหายไป

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

4. เปิดแล้วอยากแก้ไข ใช้ตัวแก้ไขออนไลน์

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

5. อยากแค่ดูภาพ แปลงเป็น PNG สะดวกที่สุด

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

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