ควรใช้ inline SVG เทียบกับ img เมื่อใด?

Question

Accepted Answer

SVG เป็นรูปแบบภาพแบบ **vector** (อิงกับ XML) จึงสามารถปรับขนาดได้ทุกขนาดโดยไม่เบลอ คุณสามารถนำมาใช้ได้สองวิธีหลัก ซึ่งแต่ละวิธีมีข้อแลกเปลี่ยนต่างกัน ## Inline SVG — เขียน markup โดยตรงใน HTML ```html ``` **ข้อดี:** คุณสามารถกำหนดสไตล์ด้วย CSS (`fill`, `stroke`), ทำแอนิเมชันให้แต่ละส่วน, เปลี่ยนสีผ่าน `currentColor` (สืบทอดสีของข้อความ) และตอบสนองต่ออีเวนต์ได้ เพราะมันเป็น DOM จริง ไม่มี HTTP request เพิ่มเติม **ข้อเสีย:** ทำให้ HTML บวม, ไม่ได้ถูก cache แยกต่างหาก, ไอคอนที่ใช้ซ้ำจะทำให้ markup ซ้ำซ้อน ## SVG ผ่าน `` — อ้างอิงเป็นไฟล์ ```html

``` **ข้อดี:** ถูก cache โดยเบราว์เซอร์, ทำให้ HTML สะอาด, เรียบง่าย **ข้อเสีย:** คุณ **ไม่สามารถ** กำหนดสไตล์หรือเขียนสคริปต์ควบคุมภายในของมันด้วย CSS/JS ของคุณได้ มันเป็นภาพทึบที่เข้าถึงภายในไม่ได้ ## แนวทางการตัดสินใจ ```text Need to recolor/animate/interact with the SVG → inline SVG Static logo/illustration, want caching + clean HTML →

Many repeated icons → an SVG sprite () or an icon component ``` ## การเข้าถึง (Accessibility) ```html ``` ## ทำไมจึงสำคัญ การเลือกระหว่าง inline กับ `` SVG ขึ้นอยู่กับว่าคุณจำเป็นต้อง **กำหนดสไตล์/ทำแอนิเมชัน** ให้กราฟิก (inline) หรือเพียงแค่ **แสดงผล** มันอย่างมีประสิทธิภาพ (``) ไอคอนที่เปลี่ยนสีเมื่อ hover หรือเปลี่ยนตามธีมควรใช้ inline (มักทำเป็นคอมโพเนนต์) ส่วน asset แบรนด์แบบสแตติกให้ใช้ผ่าน `` ไม่ว่าทางใด vector ก็ยังคงคมชัดในทุกความละเอียด เหมาะอย่างยิ่งสำหรับไอคอนและโลโก้

Inline SVG — เขียน markup โดยตรงใน HTML

SVG ผ่าน <img> — อ้างอิงเป็นไฟล์

แนวทางการตัดสินใจ

การเข้าถึง (Accessibility)

ทำไมจึงสำคัญ

SVG ผ่าน `<img>` — อ้างอิงเป็นไฟล์