การปรับขนาดของ 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 นี้มีความกว้าง 200 พิกเซล และสูง 100 พิกเซล และ viewport 0 0 หมายถึงรูปภาพจะเริ่มต้นที่ตำแหน่งมุมมบนซ้ายของ SVG และ มีขนาดของ viewport เท่ากับขนาดความกว้างและความสูงของ SVG
preserveAspectRatio เป็นคุณสมบัติของ SVG ที่ใช้เป็นตัวกำหนดวิธีการปรับปรุงขนาดของเนื้อหาให้พอดีกับขนาดของ SVG ซึ่งจะมีค่าหลักเริ่มต้นเช่น xMidYMid ซึ่งจะทำให้เนื้อหา SVG อยู่ตรงกลางของ viewport และค่ารองเริ่มต้นคือ meet ซึ่งจะทำให้เนื้อหา SVG ปรับขนาดให้เหมาะสมกับ viewport
ค่าหลักของ preserveAspectRatio ได้แก่
ตัวอย่างการแสดงผล SVG แบบ Responsive
ทำความเข้าใจเกี่ยวกับ 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 จะไม่มีการปรับขนาด
- 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 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 จะถูกปรับขนาดเพื่อให้สามารถแสดงรูปภาพได้ทั้งหมด (ลองปรับขนาดของหน้าจอเพื่อดูการเปลี่ยนแปลงนะครับ)