SVG গ্র্যাবার একটি ওয়েবপেজে থাকা প্রতিটি SVG খুঁজে বের করে — ইনলাইন SVG এলিমেন্ট, এক্সটার্নাল .svg ফাইল রেফারেন্স, SVG স্প্রাইট (use/symbol প্যাটার্ন) এবং SVG ডেটা URI। প্রতিটি SVG বিভিন্ন সাইজে প্রিভিউ করুন, হালকা এবং গাঢ় ব্যাকগ্রাউন্ডের বিপরীতে ট্রান্সপারেন্সি চেক করুন, র (raw) SVG মার্কআপ কপি করুন অথবা অপ্টিমাইজ করা SVG ফাইল ডাউনলোড করুন।
আধুনিক ওয়েবসাইটে সব জায়গাতেই SVG দেখা যায় — লোগো, আইকন, ইলাস্ট্রেশন, ডেকোরেটিভ গ্রাফিক্স, ডেটা ভিজ্যুয়ালাইজেশন — কিন্তু সেগুলো এক্সট্রাক্ট করা আশ্চর্যজনকভাবে কঠিন। ইনলাইন SVG সরাসরি HTML-এ এম্বেড করা থাকে এবং সেগুলোকে "save as image" করা যায় না। SVG স্প্রাইট use/symbol রেফারেন্স ব্যবহার করে যা আলাদা কোনো ফাইল হিসেবে কাজ করে না। img src বা CSS-এর মাধ্যমে লোড হওয়া এক্সটার্নাল SVG-গুলো নেটওয়ার্ক ট্যাব না খুলে ইনস্পেক্ট করা সম্ভব হয় না। SVG গ্র্যাবার এই সব কটি সোর্স স্বয়ংক্রিয়ভাবে হ্যান্ডেল করে। এটি ইনলাইন SVG-এর জন্য DOM স্ক্যান করে, স্প্রাইট রেফারেন্সগুলোকে তাদের পূর্ণাঙ্গ সিম্বল ডেফিনিশনে রূপান্তর করে, এক্সটার্নাল SVG URL খুঁজে বের করে এবং SVG ডেটা URI ডিকোড করে। প্রতিটি SVG একটি গ্যালারিতে লাইভ প্রিভিউ সহ প্রদর্শিত হয় এবং আপনি ট্রান্সপারেন্সি যাচাই করার জন্য হালকা, গাঢ় এবং চেকারবোর্ড ব্যাকগ্রাউন্ডের মধ্যে টগল করতে পারেন। আপনার কম্পোনেন্টে ব্যবহারের জন্য র (raw) SVG কোড কপি করুন অথবা আপনার প্রোজেক্টে ব্যবহারের জন্য SVG ফাইল ডাউনলোড করুন।
পেজের সব উৎস থেকে SVG খুঁজে বের করে: DOM-এর ইনলাইন <svg> এলিমেন্ট, img বা object ট্যাগের মাধ্যমে লোড হওয়া এক্সটার্নাল .svg ফাইল, CSS background-image SVG, use/symbol স্প্রাইট রেফারেন্স (পূর্ণাঙ্গ SVG-তে রূপান্তর করে) এবং base64 ডেটা URI এনকোডেড SVG।
তিনটি ব্যাকগ্রাউন্ডের বিপরীতে প্রতিটি SVG বিভিন্ন সাইজে (মূল সাইজ, ২x, ৪x) প্রিভিউ করুন: গাঢ়, হালকা (সাদা) এবং চেকারবোর্ড। চেকারবোর্ড ট্রান্সপারেন্ট বা স্বচ্ছ জায়গাগুলো প্রকাশ করে যা হয়তো একরঙা ব্যাকগ্রাউন্ডে দেখা যায় না।
সম্পূর্ণ SVG মার্কআপ — viewBox, paths, groups এবং সমস্ত অ্যাট্রিবিউটসহ পেতে "Copy SVG"-এ ক্লিক করুন। সরাসরি আপনার HTML, JSX, Vue টেম্পলেট বা SVG স্প্রাইট ফাইলে পেস্ট করুন। কোডটি পরিষ্কার এবং যথাযথভাবে ফরম্যাট করা।
যথাযথ XML ডিক্লারেশন এবং এনকোডিং সহ আলাদা আলাদা SVG ফাইল (.svg) হিসেবে ডাউনলোড করুন। ফাইলগুলোর নামকরণ করা হয় SVG-এর ID, ক্লাস নেম বা aria-label অনুযায়ী — কেবল "download.svg" এর মতো সাধারণ কোনো নাম নয়।
প্রতিটি SVG তার উৎসের ধরণ (ইনলাইন, এক্সটার্নাল, স্প্রাইট, ডেটা URI), viewBox ডাইমেনশন, ফাইলের সাইজ এবং DOM-এর কোথায় এটি পাওয়া গেছে তা দেখায়। সাইটটি তাদের SVG স্ট্র্যাটেজি ঠিক কীভাবে ইমপ্লিমেন্ট করেছে তা বোঝার জন্য এটি কার্যকর।
যখন একটি পেজ use href="#icon-name" রেফারেন্স সহ SVG স্প্রাইট ব্যবহার করে, SVG গ্র্যাবার প্রতিটি রেফারেন্সকে তার পূর্ণাঙ্গ সিম্বল ডেফিনিশনে রূপান্তর করে — যা আপনাকে শুধুমাত্র use এলিমেন্টের পরিবর্তে একটি সম্পূর্ণ স্বতন্ত্র SVG দেয়।
একটি চমৎকার আইকন সিস্টেম সহ ওয়েবসাইট ভিজিট করুন এবং পুরো SVG আইকন সেটটি নিয়ে নিন। SVG গ্র্যাবার স্প্রাইট, ইনলাইন SVG এবং এক্সটার্নাল ফাইলের মধ্যে থাকা আইকনগুলো খুঁজে বের করে — এটি ইমপ্লিমেন্ট করার পদ্ধতি যাই হোক না কেন একটি সম্পূর্ণ আইকন লাইব্রেরি সংগ্রহ করতে পারে।
পার্টনারশিপ পেজ, কেস স্টাডি বা প্রেস কিটের জন্য কোনো কোম্পানির SVG লোগো প্রয়োজন? আধুনিক ওয়েবসাইটের বেশিরভাগ লোগোই SVG ফরম্যাটের। SVG গ্র্যাবার সেগুলো খুঁজে বের করে এবং তাদের মূল ভেক্টর কোয়ালিটিতে এক্সট্রাক্ট করে — যা অসীমভাবে স্কেলযোগ্য।
প্রোডাকশন ওয়েবসাইটগুলো কীভাবে জটিল SVG ইলাস্ট্রেশন, অ্যানিমেশন বা ডেটা ভিজ্যুয়ালাইজেশন ইমপ্লিমেন্ট করে তা স্টাডি করুন। প্যাথগুলো কীভাবে স্ট্রাকচার করা হয়েছে, viewBox কীভাবে কনফিগার করা হয়েছে এবং CSS অ্যানিমেশন কীভাবে প্রয়োগ করা হয়েছে তা ইনস্পেক্ট করতে র (raw) SVG কোড কপি করুন।
একটি নতুন আইকন সিস্টেমে স্যুইচ করছেন? রেফারেন্স সাইট থেকে SVG সংগ্রহ করুন এবং সেগুলো আপনার SVG স্প্রাইট বা কম্পোনেন্ট-ভিত্তিক আইকন সিস্টেমে যোগ করুন। ইন্টিগ্রেশনের জন্য প্রস্তুত যথাযথ viewBox ভ্যালু সহ পরিষ্কার SVG কোড পান।
আপনার সাইটে SVG কীভাবে ইমপ্লিমেন্ট করা হয়েছে তা রিভিউ করুন — সেগুলো কি ইনলাইন (ম্যানিপুলেশনের জন্য ভালো), এক্সটার্নাল (ক্যাশিংয়ের জন্য ভালো) নাকি স্প্রাইট (দক্ষতার জন্য ভালো)? SVG গ্র্যাবার প্রতিটি SVG-এর উৎসের ধরণ দেখায়, যা আপনাকে আপনার SVG স্ট্র্যাটেজি অপ্টিমাইজ করতে সহায়তা করে।
DevSuite Pro ফ্লোটিং ডক ওপেন করুন এবং SVG গ্র্যাবার আইকনে ক্লিক করুন। টুলটি সমস্ত SVG উৎসের জন্য পেজ স্ক্যান করবে এবং গ্যালারি তৈরি করবে।
পেজে পাওয়া প্রতিটি SVG একটি থাম্বনেইল গ্রিড হিসেবে প্রদর্শিত হবে। প্রতিটি এন্ট্রিতে SVG-এর নাম, উৎসের ধরণ এবং viewBox ডাইমেনশন দেখা যাবে।
একটি বড় প্রিভিউ ওপেন করতে যেকোনো SVG-তে ক্লিক করুন। গাঢ়, হালকা এবং চেকারবোর্ড ব্যাকগ্রাউন্ডের মধ্যে টগল করুন। SVG-টি কীভাবে স্কেল হয় তা দেখতে প্রিভিউটি রিসাইজ করুন।
আপনার কোডে ব্যবহারের জন্য র (raw) মার্কআপ পেতে "Copy SVG"-এ ক্লিক করুন অথবা আপনার ডিভাইসে স্বতন্ত্র .svg ফাইল হিসেবে সেভ করতে "Download"-এ ক্লিক করুন।
আরও SVG দেখতে আবার গ্যালারিতে ফিরে যান। কাউন্ট ব্যাজটি পেজে পাওয়া মোট SVG সংখ্যা দেখাবে।
বিনামূল্যে DevSuite Pro ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৩৯+ ডেভলপার টুল আনলক করুন।
