আপনার প্রতিক্রিয়াশীল সাইটের জন্য গ্রাফিক্স এটিকে ধীর করে দিতে পারে, কিন্তু ভেক্টর গ্রাফিক্সের সাথে ভারসাম্য বজায় রাখা ব্যান্ডউইথ কমাতে সাহায্য করতে পারে৷ এর মাধ্যমে, আশ্চর্যজনক গ্রাফিক্স মোবাইল সাইটেও দুর্দান্ত কাজ করে। সাধারণত, ক্যানভাস এবং SVG এই উদ্দেশ্যে ব্যবহার করা হয়।
একাধিক স্ক্রিনের আকারের জন্য একটি ডিজাইন তৈরি করতে HTML5 স্কেলেবল ভেক্টর গ্রাফিক্স (SVG) ব্যবহার করুন, যেহেতু এটি এটিকে পুরোপুরি পরিচালনা করে৷ সহজে ভেক্টর ভিত্তিক লাইন অঙ্কন উপস্থাপন করুন এবং আপনার ডিভাইসে পিক্সেল সম্পর্কে চিন্তা করবেন না যেহেতু SVG এর সাথে তৈরি গ্রাফিক্সগুলি রেজোলিউশন স্বাধীন। এটি ফলাফল স্কেল করে এবং ব্রাউজারে দুর্দান্ত দেখায়৷
৷এখানে, আমরা আমাদের প্রতিক্রিয়াশীল সাইটের জন্য ভেক্টর ব্যাকগ্রাউন্ডের সাথে কীভাবে কাজ করব তা দেখব। এই মুহূর্তে, আমাদের একটি ডেমো SVG আছে। আসুন দেখি কিভাবে আমরা একটি ভেক্টর ফাইল ব্যবহার করতে পারি। প্রথমত, আমরা সিএসএস ফিক্সড পজিশনিং করব, প্রস্থ 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 ফাইলটি দুর্দান্ত দেখাচ্ছে এবং একটি পটভূমি চিত্র হিসাবে যোগ করার জন্য অস্বচ্ছতা দৃশ্যমান -
