การปรับขนาดของ SVG ตามขนาดของหน้าจอ (Responsive)

การปรับขนาดของ SVG (Scalable Vector Graphics) สามารถทำได้โดยการปรับ width และ height โดยระบุเป็น % หรือใช้ media queries ปรับขนาดของ SVG เหมือนกับ tag อื่นๆ แต่ในกรณีที่ SVG เป็นรูปภาพแบบ Vector อาจทำให้องค์ประกอบ Vector ต่างๆของ SVG ไม่สามารถปรับขนาดตามได้ ในกรณีนี้ เราสามารถใช้ viewBox ร่วมกับ preserveAspectRatio เพื่อควบคุมการปรับขนาดของ Vector ต่างๆภายใน SVG ได้

ทำความเข้าใจเกี่ยวกับ viewBox และ preserveAspectRatio
viewBox เป็นคุณสมบัติของ SVG ที่ใช้เป็นตัวกำหนดขอบเขตของเนื้อหา SVG โดยมีรูปแบบของค่าเป็น x y width height ซึ่งค่า x และ y จะเป็นตำแหน่งเริ่มต้นของ viewBox และ width และ height จะเป็นขนาดของ viewBox ซึ่งขนาดของ viewBox เทียบได้กับขนาดของรูปภาพ
<svg width="200px" height="100px" viewbox="0 0 200 100" ....>....</svg>

หมายถึง รูปภาพ SVG  นี้มีความกว้าง 200 พิกเซล และสูง 100 พิกเซล  และ viewport 0 0 หมายถึงรูปภาพจะเริ่มต้นที่ตำแหน่งมุมมบนซ้ายของ SVG และ มีขนาดของ viewport เท่ากับขนาดความกว้างและความสูงของ SVG

preserveAspectRatio เป็นคุณสมบัติของ SVG ที่ใช้เป็นตัวกำหนดวิธีการปรับปรุงขนาดของเนื้อหาให้พอดีกับขนาดของ SVG ซึ่งจะมีค่าหลักเริ่มต้นเช่น xMidYMid ซึ่งจะทำให้เนื้อหา SVG อยู่ตรงกลางของ viewport และค่ารองเริ่มต้นคือ meet ซึ่งจะทำให้เนื้อหา SVG ปรับขนาดให้เหมาะสมกับ viewport
<svg width="200px" height="100px" viewbox="0 0 200 100" preserveAspectRatio="xMidYMid meet"....>....</svg>

ค่าหลักของ preserveAspectRatio ได้แก่
  • xMidYMid (ค่าเริ่มต้น) หมายถึงการบังคับให้ viewBox จัดตำแหน่งอยู่กึ่งกลาง SVG
  • xMidYMin viewBox อยู่กึ่งกลางแนวนอน และอยู่ชิดด้านบน
  • xMidYMax viewBox อยู่กึ่งกลางแนวนอน และอยู่ชิดด้านล่าง
  • xMinYMid viewBox อยู่กึ่งกลางแนวตั้ง และอยู่ชิดด้านซ้าย
  • xMaxYMid viewBox อยู่กึ่งกลางแนวตั้ง และอยู่ชิดด้านขวา
  • xMaxYMax viewBox อยู่มุมบนขวา
  • xMinYMin viewBox อยู่มุมล่างซ้าย
  • none หมายถึง viewBox จะไม่มีการปรับขนาด
ค่ารองของ preserveAspectRatio ได้แก่
  • meet (ค่าเริ่มต้น) จะทำให้ SVG จะพยายามปรับขนาดของรูปภาพให้สามารถมองเห็นได้ทั้งหมด ในกรณีที่ขนาดของรูปใหญ่กว่า viewbox รูปภาพจะถูกย่อขนาดลงเพื่อให้พอดีกับ viewbox
  • slice ทำให้ SVG พยายามที่จะปรับขนาดตามที่กำหนดโดยค่าแรก ส่วนเกินจะถูกตัดออก

xMidYMid meet

xMidYMid slice

xMidYMin meet

xMidYMin slice

xMidYMax meet

xMidYMax slice

xMinYMid meet

xMinYMid slice

xMaxYMid meet

xMaxYMid slice

xMaxYMin meet

xMaxYMin slice

xMaxYMax meet

xMaxYMax slice

xMinYMin meet

xMinYMin slice

ตัวอย่างการแสดงผล SVG แบบ Responsive
<svg preserveaspectratio="xMidYMid meet" style="width:100%;height:100px;" viewbox="0 0 940 100">
......
</svg>
<svg preserveaspectratio="xMidYMid meet" style="width: 100%; height: 200px;" viewbox="0 0 180 200">
......
</svg>
เคล็ดลับการปรับขนาดของ SVG ตามขนาดของหน้าจอ คือการกำหนดขนาดของ viewBox ให้คงที่ตามขนาดของรูปภาพ และปรับ width ของ SVG ตามขนาดของหน้าจอ หรือกำหนดเป็น % ก็ได้ ในกรณีที่ ความกว้างของ viewBox มีขนาดเล็กกว่าขนาดของ SVG viewBox จะถูกปรับขนาดเพื่อให้สามารถแสดงรูปภาพได้ทั้งหมด (ลองปรับขนาดของหน้าจอเพื่อดูการเปลี่ยนแปลงนะครับ)
ผู้เขียน goragod โพสต์เมื่อ 14 ม.ค. 2566 เปิดดู 230 ป้ายกำกับ CSSCSS3
^