রেসপনসিভ সাইটে স্প্ল্যাশ ভেক্টর গ্রাফিক্স ব্যবহার

রেসপনসিভ সাইটে গ্রাফিক্স ব্যবহার সাইটকে ধীর করতে পারে, কিন্তু ভেক্টর গ্রাফিক্স (SVG) ব্যবহার করে ব্যান্ডউইথ কমিয়ে excelente গ্রাফিক্স পাওয়া যায়। এটি মোবাইল সাইটেও ভালো কাজ করে। সাধারণত এই উদ্দেশ্যে ক্যানভাস (Canvas) এবং SVG ব্যবহার করা হয়।

HTML5 Scalable Vector Graphics (SVG) ব্যবহার করে একাধিক স্ক্রিন সাইজের জন্য ডিজাইন তৈরি করা যায়, কারণ এটি রেজোলিউশন-ইনডিপেন্ডেন্ট। ভেক্টর-ভিত্তিক লাইন ড্রইং সহজে উপস্থাপন করা যায় এবং ডিভাইসের পিক্সেল চিন্তা করতে হয় না। SVG গ্রাফিক্স স্কেল হলে কোনো গুণগত क्षতি হয় না এবং ব্রাউজারে চমৎকার দেখায়।

ভেক্টর ব্যাকগ্রাউন্ড উদাহরণ

CSS ফিক্সড পজিশনিং ব্যবহার করে SVGকে পূর্ণ-প্রস্থ ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করা যায়:

<!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>

আধুনিক বিকল্প: CSS-এ background-image: url('image.svg'); background-size: cover; ব্যবহার করাও SVG ব্যাকগ্রাউন্ড হিসেবে সেট করা যায়, যা আরও কার্যকর।