ทริคTools
SVG viewBox
viewBox กำหนดระบบพิกัดที่ทำให้ SVG ขยายหรือย่อได้อย่างถูกต้อง.
เริ่มอ่านตรงนี้ก่อน
อธิบายแบบง่าย
SVG viewBox คือเรื่องที่ช่วยให้เราเป็นเครื่องมือช่วยสร้างหรือแปลงของที่ใช้ซ้ำ เช่น SVG, icon, formulaได้ถูกทางขึ้น
ระดับ
เหมาะกับคนที่เริ่มลงมือทำแล้ว
ใช้เมื่อไหร่
ไอคอนย่อขยายแล้วผิดเพี้ยน
อ่านแล้วทำอะไรต่อ
ไอคอน UI ส่วนใหญ่ใช้ viewBox ขนาด 24 คูณ 24 เพื่อให้คาดเดาขนาดได้ง่าย
เห็นภาพ: ทริคนี้เป็นยังไง
ไม่มี viewBox
ขนาดคงที่ตาม width/height ขยายแล้วภาพถูกครอบ หรือเบลอ
viewBox="0 0 24 24"
ภาพยึดกรอบ 24×24 สเกลขึ้น-ลงได้ตามต้องการ คมทุกขนาด
ใช้ตอนไหน?
- ไอคอนย่อขยายแล้วผิดเพี้ยน
- เส้น (path) ถูกตัดขาด หรือไม่อยู่กึ่งกลาง
- คุณต้องการให้ไอคอนทุกตัวมีขนาดสม่ำเสมอกัน
ความหมาย
viewBox เป็นแอตทริบิวต์ที่จับคู่พิกัดภายในของ SVG เข้ากับขนาดที่แสดงผลจริงบนหน้าจอ
รูปแบบการเขียน viewBox
ตัวเลขสี่ตัวกำหนดค่า min-x (จุดเริ่มแกนนอน), min-y (จุดเริ่มแกนตั้ง), ความกว้าง และความสูง
viewBox="0 0 24 24"ตัวอย่างการใช้
ระบบไอคอนขนาด 24px
ไอคอน UI ส่วนใหญ่ใช้ viewBox ขนาด 24 คูณ 24 เพื่อให้คาดเดาขนาดได้ง่าย