SVG viewBox และการปรับขนาดแบบตอบสนอง

width และ height ของ SVG กำหนดขนาดที่แสดงผลใน DOM ส่วนแอตทริบิวต์ viewBox กำหนดพื้นที่พิกัดภายใน ทั้งสองส่วนเป็นอิสระจากกัน ดังนั้น viewBox ที่เป็น "0 0 100 100" เมื่อใช้ร่วมกับ width="200" height="200" จะขยายพื้นที่พิกัดเป็น 2 เท่า

viewBox="min-x min-y width height" รูปแบบที่ใช้บ่อยที่สุดคือ viewBox="0 0 100 100" ซึ่งกำหนดพื้นที่พิกัดขนาด 100x100 โดยเริ่มจากจุดกำเนิด ค่าพิกัดใน SVG จะอ้างอิงพื้นที่นี้ ไม่ใช่พิกเซล

สำหรับ SVG แบบปรับตามขนาด ให้ละเว้นแอตทริบิวต์ width และ height (หรือกำหนดเป็น 100%) แล้วให้ viewBox กำหนดสัดส่วน เพิ่ม CSS ดังนี้: svg { width: 100%; height: auto; } SVG จะปรับขนาดให้พอดีกับคอนเทนเนอร์ โดยยังรักษาอัตราส่วนไว้

preserveAspectRatio ควบคุมวิธีที่ viewBox จะพอดีกับวิวพอร์ตของ SVG เมื่ออัตราส่วนแตกต่างกัน ค่าที่ใช้ได้มีดังนี้: "xMidYMid meet" (ค่าเริ่มต้น — มีแถบว่าง), "xMidYMid slice" (ตัดส่วนเกินเพื่อเติมพื้นที่) และ "none" (ยืดให้พอดีโดยไม่รักษาอัตราส่วน)

การเปลี่ยนค่า min-x และ min-y จะเลื่อนส่วนที่มองเห็นของพื้นที่พิกัด SVG viewBox="50 50 100 100" จะแสดงบริเวณตั้งแต่ (50,50) ถึง (150,150) วิธีนี้ช่วยให้เลื่อนมุมมองแบบโต้ตอบได้ด้วยการอัปเดตค่า viewBox ด้วย JavaScript

ลดขนาดของ viewBox เพื่อซูมเข้า: viewBox="25 25 50 50" จะแสดงบริเวณที่เล็กลงและขยายให้เต็มองค์ประกอบ SVG เพิ่มขนาดเพื่อซูมออก อัปเดต viewBox เมื่อเกิดเหตุการณ์ล้อเมาส์ เพื่อซูมแบบโต้ตอบได้โดยไม่ต้องปรับขนาดองค์ประกอบ SVG

SVG ในแท็ก img จะปรับขนาดตามหน้าจอด้วย object-fit แต่ไม่สามารถจัดรูปแบบด้วย CSS หรือควบคุมด้วยสคริปต์ได้ ส่วน SVG แบบอินไลน์จะเข้าถึงได้เต็มที่ด้วย CSS และ JavaScript แต่ทำให้ขนาด HTML เพิ่มขึ้น ให้เลือกใช้ตามความต้องการด้านการโต้ตอบ

SVG สำหรับไอคอนใช้ viewBox แบบคงที่ เช่น "0 0 24 24" และไม่กำหนด width/height เพื่อให้ CSS เป็นผู้กำหนดขนาด: .icon { width: 1.5rem; height: 1.5rem; } viewBox ช่วยให้ไอคอนปรับขนาดได้อย่างถูกต้องทุกขนาด พร้อมคงความคมชัดของกราฟิกเวกเตอร์

กำหนดไอคอนไว้ในองค์ประกอบ <symbol viewBox="0 0 24 24"> ภายใน SVG ที่ซ่อนไว้ จากนั้นอ้างอิงด้วย <use href="#icon-name"> องค์ประกอบ use แต่ละรายการสามารถมี width, height, fill และสีของตัวเองได้ ทำให้ใช้ไฟล์ชุดไอคอนเดียวกับไอคอนทั้งหมด

SVG ที่ใช้ fill="currentColor" จะรับค่าคุณสมบัติสี CSS จากองค์ประกอบนั้นหรือองค์ประกอบแม่ กำหนด color: red ให้กับ SVG หรือองค์ประกอบแม่ แล้วไอคอนจะเติมสีแดงโดยอัตโนมัติ วิธีนี้ทำให้ไอคอนสีเดียวเปลี่ยนตามสีข้อความได้โดยไม่ต้องจัดรูปแบบเฉพาะสำหรับ SVG

หากเนื้อหา SVG ดูเหมือนถูกตัดหรืออยู่ในตำแหน่งที่ไม่คาดคิด ให้บันทึกข้อมูลหรือตรวจสอบค่า viewBox ข้อผิดพลาดที่พบบ่อยคือกำหนด viewBox ตามขนาดพิกเซลของภาพต้นฉบับโดยไม่ปรับให้สอดคล้องกับขนาดที่แสดงผล ทำให้เกิดปัญหาการปรับขนาด ตรวจสอบว่า viewBox สอดคล้องกับขอบเขตเนื้อหาจริงของภาพ SVG

จะทำให้ SVG ปรับขนาดตามหน้าจอเพื่อพอดีกับความกว้างของคอนเทนเนอร์ใด ๆ ได้อย่างไร

viewBox ของ SVG กำหนดพื้นที่พิกัดภายในที่เป็นอิสระจากขนาดพิกเซลที่แสดงผล จึงช่วยให้ปรับขนาดตามหน้าจอได้ การกำหนด width:100%; height:auto ร่วมกับ viewBox ทำให้ SVG ปรับเข้ากับคอนเทนเนอร์ทุกขนาดได้ รูปแบบชุดไอคอนด้วย symbol+use การกำหนดธีมด้วย currentColor และการควบคุมด้วย preserveAspectRatio รวมกันเป็นเครื่องมือสำหรับใช้ SVG ที่ยืดหยุ่นและปรับธีมได้