การปรับขนาดของ 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 จะถูกปรับขนาดเพื่อให้สามารถแสดงรูปภาพได้ทั้งหมด (ลองปรับขนาดของหน้าจอเพื่อดูการเปลี่ยนแปลงนะครับ)