กราฟิกสำหรับไซต์ที่ตอบสนองของคุณอาจทำให้ช้าลงได้ แต่การปรับสมดุลด้วยกราฟิกแบบเวกเตอร์สามารถช่วยลดแบนด์วิดท์ได้ ด้วยวิธีนี้ กราฟิกที่น่าทึ่งก็ใช้งานได้ดีบนไซต์บนมือถือเช่นกัน โดยทั่วไป แคนวาสและ SVG ใช้เพื่อจุดประสงค์นี้
ใช้ HTML5 Scalable Vector Graphics (SVG) เพื่อสร้างการออกแบบสำหรับหน้าจอหลายขนาด เนื่องจากสามารถจัดการกับมันได้อย่างสมบูรณ์แบบ นำเสนอการวาดเส้นแบบเวกเตอร์อย่างง่ายดาย และไม่ต้องกังวลกับพิกเซลบนอุปกรณ์ของคุณ เนื่องจากกราฟิกที่สร้างด้วย SVG นั้นไม่ขึ้นกับความละเอียด ปรับขนาดผลลัพธ์และดูดีในเบราว์เซอร์
ที่นี่ เราจะมาดูวิธีการทำงานกับพื้นหลังแบบเวกเตอร์สำหรับไซต์ที่ตอบสนองของเรา ตอนนี้ เรามีตัวอย่าง SVG มาดูกันว่าเราจะใช้ไฟล์เวกเตอร์ได้อย่างไร อันดับแรก เราจะดำเนินการกำหนดตำแหน่ง CSS คงที่ โดยมีความกว้าง 100%
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
position:fixed;
top:0;
left:0;
width:100%;
z-index: -1;
}
</style>
</head>
<body>
<img src="/html5/src/svg/extensions/imagelib/smiley.svg" id="demo" alt="smiley">
</body>
</html> คุณสามารถดูผลลัพธ์ได้ที่นี่ ไฟล์ SVG ของเราดูดีและทำงานได้ดีโดยไม่มีการบิดเบือนแม้ว่าเบราว์เซอร์จะถูกเปลี่ยนตำแหน่งก็ตาม มันยังดูไม่เบลอและสมบูรณ์แบบ
สำหรับการเพิ่มลงในพื้นหลัง เราได้ทำการเปลี่ยนแปลงข้างต้นแล้ว แต่คุณต้องเพิ่มความทึบด้วย เนื่องจากภาพพื้นหลังโดยทั่วไปจะโปร่งใส มาเพิ่มกันเถอะ
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: -1;
opacity: 0.1;
}
</style>
</head>
<body>
<img src="https://www.tutorialspoint.com/html5/src/svg/extensions/imagelib/smiley.svg" id="demo" alt="smiley ">
</body>
</html> คุณสามารถดูผลลัพธ์ได้ที่นี่ ไฟล์ SVG ของเราดูดีและมองเห็นความทึบเป็นภาพพื้นหลังได้ -
