SVG প্রিভিউ / এডিটর

SVG Preview / Editor কীভাবে কাজ করে

টুলটি কী করে

SVG Preview / Editor আপনি এডিট করার সাথে সাথে SVG মার্কআপ লাইভ রেন্ডার করে এবং দ্রুত পরিদর্শনের জন্য মেটাডেটা (width, height, viewBox, element count) বের করে। একটি টগল চেকার্ড ব্যাকগ্রাউন্ড যোগ করে, যাতে স্বচ্ছ অংশগুলো স্পষ্ট দেখা যায়। টুলটি URL-এনকোডেড data URI-ও তৈরি করে, যা CSS background-image বা HTML src অ্যাট্রিবিউটে সরাসরি ব্যবহারযোগ্য।

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

আইকন ডিজাইনাররা বিভিন্ন সাইজে viewBox গণিত এবং stroke width টেস্ট করেন। ফ্রন্টএন্ড ডেভেলপাররা অপ্টিমাইজেশনের (ম্যানুয়াল বা SVGO দিয়ে) পর হাতে-এডিট করা SVG আইকন ঠিকভাবে রেন্ডার হচ্ছে কি না যাচাই করেন। ইমেইল ডেভেলপাররা HTML-এ ইনলাইন করার জন্য ব্র্যান্ড মার্কের কমপ্যাক্ট data URI ভার্সন তৈরি করেন। শিক্ষকরা preserveAspectRatio এবং overflow-এর মতো অ্যাট্রিবিউট রেন্ডারিংকে কীভাবে প্রভাবিত করে তা দেখান।

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

ইনপুট হলো কাঁচা SVG XML মার্কআপ। আউটপুট হলো স্যান্ডবক্সড iframe-এ রেন্ডার করা একই SVG, সাথে একটি URL-এনকোডেড data URI (data:image/svg+xml;charset=utf-8,…)। element-count মেট্রিক প্রতিটি ওপেনিং ট্যাগ গণনা করে (defs, g, gradients, এবং অনুরূপ নেস্টেড এলিমেন্টসহ), যা জটিলতার একটি আনুমানিক ধারণা দেয়। এক্সট্র্যাক্ট করা অ্যাট্রিবিউট ভ্যালুগুলো কাঁচা ফর্মেই দেখানো হয়।

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

`use` বা `image` এলিমেন্টের href দিয়ে রেফারেন্স করা বাহ্যিক রিসোর্স স্যান্ডবক্সড iframe-এর ভেতরে লোড হবে না। script এলিমেন্টের ভেতরের inline JavaScript স্যান্ডবক্স দ্বারা ব্লক হয় — অ্যানিমেশন SMIL বা CSS keyframes-এর ওপর নির্ভর করা উচিত। নির্দিষ্ট কোনো ফন্টের ওপর নির্ভর করা SVG যদি সিস্টেমে ইনস্টল না থাকে, তবে ডিফল্টে ফলব্যাক করবে; প্রিভিউয়ের জন্য ফন্ট এমবেড করুন বা সিস্টেম ফন্ট ব্যবহার করুন।

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

একবারের আইকন ডিজাইন, ডিবাগিং, বা data URI তৈরি করার জন্য ব্রাউজার টুলটি ব্যবহার করুন। প্রোডাকশন অ্যাসেটের জন্য, টিউন করা কনফিগসহ SVGO দিয়ে SVG চালিয়ে মেটাডেটা সরান এবং মার্কআপ মিনিফাই করুন, এবং সব জায়গায় data URI ইনলাইন না করে আপনার অ্যাপে আইকন লোড করতে স্প্রাইট সিস্টেম বা উপযুক্ত bundler ইন্টিগ্রেশন ব্যবহার করুন।