SVG প্লেসহোল্ডার জেনারেটর

SVG প্লেসহোল্ডার জেনারেটর কীভাবে কাজ করে

টুলটি কী করে

SVG প্লেসহোল্ডার জেনারেটর কাস্টম ডাইমেনশন, ব্যাকগ্রাউন্ড রং, টেক্সট ওভারলে, এবং ফন্ট সেটিংসসহ হালকা ভেক্টর প্লেসহোল্ডার ইমেজ তৈরি করে। এটি SVG মার্কআপ সরাসরি আউটপুট করে এবং HTML বা CSS-এ এমবেড করার জন্য প্রস্তুত একটি Base64 data URI হিসেবেও দেয়। SVG রেজোলিউশন-ইনডিপেন্ডেন্ট এবং সাধারণত 1KB-এর কম হওয়ায়, এই প্লেসহোল্ডারগুলো নেটওয়ার্ক রিকোয়েস্ট ছাড়াই তাৎক্ষণিক লোড হয়।

ডেভেলপারদের সাধারণ ব্যবহারক্ষেত্র

ফ্রন্টএন্ড ডেভেলপাররা প্রোটোটাইপিংয়ের সময় বাস্তব ইমেজ পাওয়ার আগে লেআউট স্পেস রিজার্ভ করতে SVG প্লেসহোল্ডার ব্যবহার করেন, যাতে cumulative layout shift (CLS) এড়ানো যায়। এগুলো ডিজাইন সিস্টেমে অ্যাভাটার fallback, থাম্বনেইল স্কেলেটন, এবং রেসপনসিভ ইমেজ কনটেইনারের জন্য উপকারী। ইমেইল ডেভেলপাররা HTML টেমপ্লেটে data URI প্লেসহোল্ডার এমবেড করেন, যেখানে ইমেইল ক্লায়েন্ট বাহ্যিক ইমেজ লোডিং ব্লক করতে পারে।

ডেটা ফরম্যাট, টাইপ বা ভ্যারিয়েন্ট

আউটপুটটি একটি স্ট্যান্ডার্ড SVG 1.1 ডকুমেন্ট, যাতে একটি filled rectangle এবং কেন্দ্রীভূত text element থাকে। data URI ভ্যারিয়েন্টটি এই SVG-কে Base64 স্ট্রিং হিসেবে এনকোড করে এবং img src অ্যাট্রিবিউট, CSS background-image প্রপার্টি, বা inline HTML-এ সরাসরি ব্যবহারের জন্য 'data:image/svg+xml;base64,' প্রিফিক্স যোগ করে। ডাইমেনশন পিক্সেলে নির্দিষ্ট করা হয়, তবে SVG যেকোনো কনটেইনার সাইজে পিক্সেলেশন ছাড়াই স্কেল করে, কারণ এটি একটি ভেক্টর ফরম্যাট।

সাধারণ ভুল ও এজ কেস

Data URI-গুলো ব্রাউজার ডকুমেন্ট থেকে আলাদাভাবে ক্যাশ করে না যেটির মধ্যে এগুলো এম্বেড করা থাকে, তাই অনেক পেজে একই প্লেসহোল্ডার ব্যবহার করলে একবার ক্যাশ হওয়া একটি এক্সটার্নাল ফাইলের তুলনায় মোট ট্রান্সফার সাইজ বেড়ে যায়। ডাইমেনশন ছোট হলে খুব লম্বা টেক্সট লেবেল SVG viewBox-এর বাইরে চলে যেতে পারে। কিছু পুরোনো ইমেইল ক্লায়েন্ট SVG data URI সাপোর্ট করে না, ফলে ভাঙা ইমেজ আইকনে ফিরে যায়। Content Security Policy (CSP) হেডারগুলো inline data URI ব্লক করতে পারে যদি img-src-এ 'data:' অন্তর্ভুক্ত না থাকে।

কোডের বদলে কখন এই টুল ব্যবহার করবেন

বিল্ড ডিপেনডেন্সি যোগ না করেই ওয়্যারফ্রেমিং বা প্রোটোটাইপিংয়ের সময় দ্রুত একবারের জন্য প্লেসহোল্ডার ইমেজ জেনারেট করতে এই ব্রাউজার টুলটি ব্যবহার করুন। প্রোডাকশনে ডাইনামিক প্লেসহোল্ডার জেনারেশনের জন্য (যেমন, ইউজার-আপলোড করা ইমেজের ফলব্যাক), সার্ভার-সাইড SVG টেমপ্লেটিং বা plaiceholder-এর মতো ডেডিকেটেড সার্ভিস ব্যবহার করুন, যা আপনার ইমেজ অপ্টিমাইজেশন পাইপলাইনের সাথে ইন্টিগ্রেট হয় এবং আসল ইমেজ থেকে ব্লার করা লো-কোয়ালিটি ইমেজ প্লেসহোল্ডার (LQIP) জেনারেট করতে পারে।