กลับไปหน้า Tools
ทริคTools

พื้นฐาน SVG

SVG คือมาร์กอัปกราฟิกแบบเวกเตอร์ที่ขยายได้ไม่แตก ใช้กับไอคอน สัญลักษณ์ รูปทรงตกแต่ง และ asset ของ UI.

เริ่มอ่านตรงนี้ก่อน

อธิบายแบบง่าย

พื้นฐาน SVG คือเรื่องที่ช่วยให้เราเป็นเครื่องมือช่วยสร้างหรือแปลงของที่ใช้ซ้ำ เช่น SVG, icon, formulaได้ถูกทางขึ้น

ระดับ

เหมาะกับคนเริ่มต้น

ใช้เมื่อไหร่

คุณต้องการไอคอนคมๆ หรือสัญลักษณ์ตกแต่ง

อ่านแล้วทำอะไรต่อ

ใช้ไอคอนเครื่องหมายบวกสำหรับปุ่มเพิ่ม/สร้างรายการใหม่บนแถบเครื่องมือ

เห็นภาพ: ทริคนี้เป็นยังไง

โค้ด SVG
<svg viewBox="0 0 24 24">
  <path d="M12 5v14M5 12h14" />
</svg>
ได้ไอคอน

เครื่องหมายบวก + คมทุกขนาด ไม่แตก เปลี่ยนสีด้วย CSS ได้

SVG คือโค้ด ไม่ใช่รูป — สั่งวาดด้วยข้อความ เลยคมทุกขนาด

ใช้ตอนไหน?

  • คุณต้องการไอคอนคมๆ หรือสัญลักษณ์ตกแต่ง
  • คุณอยากได้โค้ดที่ก๊อปไปใช้ต่อได้ทั้งบนเว็บและใน Power Apps
  • คุณต้องการไฟล์ภาพที่ดาวน์โหลดเก็บไว้แล้วนำกลับมาใช้ซ้ำได้

ความหมาย

SVG ใช้โค้ดแบบ XML (รูปแบบข้อความที่มีแท็กกำกับ) อธิบายเส้น (path), เส้นขอบ, สีพื้น และระบบพิกัด ทำให้ภาพย่อขยายได้คมชัดไม่แตก

SVG อย่างง่าย

ไอคอน UI ทั่วไปใช้ viewBox (กรอบพิกัดของภาพ) ขนาด 24 คูณ 24 พร้อมข้อมูลเส้น (path), เส้นขอบ และสีพื้น

<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
  <path d="M12 5v14M5 12h14" />
</svg>

ตัวอย่างการใช้

ไอคอนเครื่องหมายบวก

ใช้ไอคอนเครื่องหมายบวกสำหรับปุ่มเพิ่ม/สร้างรายการใหม่บนแถบเครื่องมือ

ลองเล่นดู