Đồ họa cho trang web đáp ứng của bạn có thể khiến nó chậm hơn, nhưng việc cân bằng nó với đồ họa vector có thể giúp giảm thiểu băng thông. Thông qua đó, đồ họa tuyệt vời cũng hoạt động tuyệt vời trên trang web dành cho thiết bị di động. Nói chung, canvas và SVG được sử dụng cho mục đích này.
Sử dụng Đồ họa Vectơ có thể mở rộng HTML5 (SVG) để tạo thiết kế cho nhiều kích thước màn hình, vì nó xử lý hoàn hảo. Dễ dàng trình bày các bản vẽ đường dựa trên vector và không lo lắng về các pixel trên thiết bị của bạn vì đồ họa được tạo bằng SVG không phụ thuộc vào độ phân giải. Nó chia tỷ lệ kết quả và trông tuyệt vời trong trình duyệt.
Ở đây, chúng ta sẽ xem xét cách làm việc với Vector Background cho trang web đáp ứng của chúng ta. Ngay bây giờ, chúng tôi có một SVG demo. Hãy để chúng tôi xem cách chúng tôi có thể sử dụng tệp vectơ. Đầu tiên, chúng tôi sẽ thực hiện định vị cố định CSS, với chiều rộng 100%
Ví dụ
<!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> Tại đây, bạn có thể xem kết quả. Tệp SVG của chúng tôi trông tuyệt vời và hoạt động tốt mà không bị biến dạng ngay cả khi trình duyệt được định vị lại. Nó vẫn không bị mờ và hoàn hảo.
Để thêm nó vào nền, chúng tôi đã thực hiện các thay đổi ở trên. Tuy nhiên, bạn cũng cần thêm độ mờ vì ảnh nền thường trong suốt. Hãy để chúng tôi thêm nó vào
Ví dụ
<!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> Tại đây, bạn có thể xem kết quả. Tệp SVG của chúng tôi trông rất đẹp và độ mờ có thể nhìn thấy để được thêm làm hình nền -
