একটি SVG ডেটা URI হিসাবে একটি প্লেসহোল্ডার ছবি তৈরি করুন। আকার, রঙ এবং লেবেল বেছে নিন, তারপর মার্কআপ, ডেটা URI বা একটি তৈরি img ট্যাগ কপি করুন। কোনো রিকোয়েস্ট নেই, কোনো বাহ্যিক সার্ভিস নেই।
কোনো রিকোয়েস্ট ছাড়াই প্লেসহোল্ডার ছবি। মাত্রা, রঙ এবং লেবেল নির্ধারণ করুন এবং কাঁচা SVG, একটি ডেটা URI বা একটি সম্পূর্ণ img ট্যাগ কপি করুন। কিছুই ডাউনলোড হয় না, তাই প্লেসহোল্ডারটি অফলাইন এবং ডিজাইন ফাইলের ভিতরেও কাজ করে।
খালি থাকলে প্রস্থ ও উচ্চতা দেখানো হবে, যা বেশিরভাগ প্লেসহোল্ডারে কাঙ্ক্ষিত।
প্রিভিউ
কেন একটি ইনলাইন SVG প্লেসহোল্ডার সার্ভিসের চেয়ে ভালো
একটি ডেটা URI নেটওয়ার্ক রিকোয়েস্ট নয়
প্লেসহোল্ডার সার্ভিসগুলো সুবিধাজনক, কিন্তু শুধুমাত্র সেই মুহূর্ত পর্যন্ত যতক্ষণ তারা না থাকে: ডোমেইন আপনাকে রেট-লিমিট করে, অফিসের প্রক্সি ব্লক করে, আপনি বিমানে ডেমো দেন, অথবা সার্ভিস নীরবে তার আউটপুট পরিবর্তন করে এবং আপনার অর্ধেক মকআপ সরে যায়। এই ব্যর্থতার প্রতিটিই একই জিনিসের কারণে ঘটে - প্লেসহোল্ডারটি অন্য কারো সার্ভারে থাকে।
একটি SVG ডেটা URI-র এমন কোনো নির্ভরতা নেই। পুরো ছবিটিই আপনার মার্কআপে থাকা একটি স্ট্রিং, তাই এটি অফলাইনে, ইমেইল ক্লায়েন্টের ভিতরে, স্ট্যাটিক এক্সপোর্টে এবং তিন বছর পরে তোলা স্ক্রিনশটেও একইভাবে রেন্ডার হয়। এটি লেটেন্সিতেও কিছু খরচ করে না: কোনো DNS লুকআপ নেই, কোনো সংযোগ নেই, কোনো রাউন্ড ট্রিপ নেই। ডেভেলপমেন্টের সময় বিশটি প্লেসহোল্ডার থাকা একটি পেজে, এই পার্থক্যটি খুবই লক্ষণীয়।
URL-এনকোডেড রাখুন, base64 নয়
এই টুলটি যে ডেটা URI নির্গত করে তা পার্সেন্ট-এনকোডেড, base64 নয়। দুটোই বৈধ, কিন্তু পার্সেন্ট-এনকোডিং দুটি কারণে SVG-এর জন্য ভালো ডিফল্ট।
প্রথমটি হলো আকার। Base64 পেলোড প্রায় এক-তৃতীয়াংশ বাড়িয়ে দেয়, যেখানে পার্সেন্ট-এনকোডিং শুধুমাত্র সেই কয়েকটি অক্ষরকে বাড়ায় যেগুলোকে আসলে এস্কেপ করতে হয়, তাই SVG-এর জন্য - যা বেশিরভাগই সাধারণ ASCII - এটি সাধারণত ছোট হয়। দ্বিতীয়টি হলো পাঠযোগ্যতা: আপনি আপনার স্টাইলশিটে একটি পার্সেন্ট-এনকোডেড SVG দেখে এখনও বুঝতে পারেন এটি কী, একটি রঙ পরিবর্তন করতে পারেন, বা টাইপো খুঁজে পেতে পারেন। একটি base64 ব্লবকে ডিকোড করতে হয় তার আগে এটি কোনো অর্থ বহন করে।
পার্সেন্ট-এনকোডিং-এর একমাত্র বিষয় যার যত্ন প্রয়োজন তা হলো একক উদ্ধৃতি, তাই এখানে এটি স্পষ্টভাবে এস্কেপ করা হয়েছে: CSS url() মানগুলো সাধারণত একক উদ্ধৃতিতে মোড়ানো থাকে, এবং SVG-এর ভিতরে একটি আনএস্কেপড অ্যাপোস্ট্রফি মানটি আগেভাগেই শেষ করে দেবে।
সাইজিং, স্কেলিং এবং viewBox
জেনারেটেড SVG-তে স্পষ্ট প্রস্থ ও উচ্চতা অ্যাট্রিবিউট এবং একটি ম্যাচিং viewBox উভয়ই থাকে। সেই সংমিশ্রণটি ইচ্ছাকৃত। প্রস্থ এবং উচ্চতা ব্রাউজারকে একটি ইনট্রিনসিক সাইজ দেয় যাতে ছবিটি লেআউট হওয়ার আগে লেআউট না ঝাঁপিয়ে পড়ে, এবং viewBox একই ছবিকে CSS-এ আপনি যেকোনো আকারে পরিষ্কারভাবে স্কেল করতে দেয়।
যেহেতু এটি ভেক্টর, লেবেলটি যেকোনো স্কেলে ধারালো থাকে - হাই-ডিপিআই ডিসপ্লেতে কোনো ঝাপসা টেক্সট নেই, কোনো আলাদা 2x অ্যাসেট নেই। আপনি যদি প্লেসহোল্ডারটিকে এর কন্টেইনার পূরণ করতে চান, CSS-এ width: 100%; height: auto সেট করুন এবং viewBox আপনার জন্য অ্যাসপেক্ট রেশিও সংরক্ষণ করবে। আপনি যদি অ্যাসপেক্ট রেশিও নির্বিশেষে একটি নির্দিষ্ট বক্স চান, জেনারেট করা অ্যাট্রিবিউটগুলো রাখুন এবং ব্রাউজার সেগুলোকে সম্মান করবে।
সচরাচর জিজ্ঞাসিত প্রশ্ন
লেবেল কেন ডিফল্টভাবে মাত্রা দেখায়?
কারণ প্লেসহোল্ডার সাধারণত এটাই বোঝায়: স্লটটি কত বড়। ক্ষেত্রটি খালি রাখলে "600x350" স্টাইলের টেক্সট দেখা যায়, আর কিছু টাইপ করলে সেটি প্রতিস্থাপিত হয়।
আমি কি CSS-এ ডেটা URI ব্যবহার করতে পারি?
হ্যাঁ। এটি `background-image: url('...')`-এ বসান। SVG-এর ভিতরের একক উদ্ধৃতিগুলো ঠিক এই ক্ষেত্রের জন্যই এস্কেপ করা হয়েছে, তাই মানটি আগেভাগে শেষ হবে না।
টেক্সট কি ছবির সাথে স্কেল হবে?
হ্যাঁ। SVG-তে একটি viewBox আছে, তাই CSS দিয়ে রিসাইজ করলে টেক্সট সহ পুরো গ্রাফিকটি আনুপাতিকভাবে স্কেল হয়। আপনি যে ফন্ট সাইজ বেছে নেন তা viewBox-এর সাপেক্ষে, রেন্ডার হওয়া পিক্সেলের নয়।
পরিবর্তে কি base64 পাওয়া যায়?
ইচ্ছাকৃতভাবে এই টুল থেকে নয়। পার্সেন্ট-এনকোডিং সাধারণত SVG-এর জন্য ছোট হয় এবং মানব-পাঠযোগ্য থাকে, ফলে পরে পুনরায় জেনারেট না করেই রঙ পরিবর্তন করা সহজ হয়।
নামযুক্ত রঙ কাজ করে, নাকি শুধু hex?
দুটোই। `tomato` বা `slategray`-এর মতো যেকোনো CSS নামযুক্ত রঙ টেক্সট ক্ষেত্রে গ্রহণ করা হয়, সাথে 3-, 6- এবং 8-অঙ্কের hex মানও।
প্লেসহোল্ডার কি ইমেইলে কাজ করে?
ইমেইল ক্লায়েন্টে SVG-এর সমর্থন অসম্পূর্ণ - বিশেষ করে Gmail এটি সরিয়ে ফেলে। ইমেইলের জন্য, প্রথমে SVG-কে PNG-তে রেন্ডার করুন। ওয়েব, অ্যাপ এবং ডিজাইন টুলের জন্য ডেটা URI ঠিক আছে।