SVG অপ্টিমাইজার

SVG অপ্টিমাইজার কী?

SVG অপ্টিমাইজার হলো ওয়েব ডিজাইনার, আইকন লেখক এবং ফ্রন্ট-এন্ড ডেভেলপারদের জন্য একটি বিনামূল্যের ব্রাউজার টুল, যাদের প্রকাশের আগে হাতে লেখা বা রপ্তানি করা SVG হালকা করা দরকার। ভেক্টর এডিটর অদৃশ্য ওজন যোগ করে: XML মন্তব্য, মেটাডেটা ব্লক, Inkscape/Sodipodi/Illustrator অ্যাট্রিবিউট, অপ্রয়োজনীয় দশমিক, অকেজো ট্রান্সফর্ম, র‍্যাপার গ্রুপ, এবং এমন ID ও defs যা কিছুই রেফারেন্স করে না। সেটিংসে প্রতিটি পরিচ্ছন্নতা চালু/বন্ধ করুন, মার্কআপ পেস্ট করুন বা একটি .svg ফাইল ড্রপ করুন, মূল ও অপ্টিমাইজড রেন্ডার পাশাপাশি হালনাগাদ হতে দেখুন, এবং আগে, পরে, সাশ্রয়, Gzip ও Brotli পরিসংখ্যান পড়ুন। ফলাফল কপি করুন বা .min.svg হিসেবে ডাউনলোড করুন। ইনলাইন আইকন, স্প্রাইট শিট, লোগো ও অলংকরণ হালকা করতে এটি ব্যবহার করুন।

SVG অপ্টিমাইজার কীভাবে ব্যবহার করবেন

1. আপনার SVG পেস্ট করুন, বা একটি .svg ফাইল ড্রপ/আপলোড করুন — মার্কআপ ইনপুট বক্স পূরণ করে।
2. সেটিংস খুলুন এবং ঠিক যেসব পরিচ্ছন্নতা চান সেগুলো চালু করুন: স্থানাঙ্ক গোল করা, মন্তব্য, মেটাডেটা ও এডিটর অ্যাট্রিবিউট সরানো, খালি গ্রুপ, অব্যবহৃত ID ও defs, ট্রান্সফর্ম একত্র করা, ইনলাইন স্টাইল মিনিফাই, hex রং সংক্ষিপ্ত করা, ডিফল্ট মান সরানো এবং ফাঁকা স্থান মিনিফাই।
3. স্থানাঙ্ক গোল করা চালু থাকলে, নির্ভুলতা সেট করুন (0-5 দশমিক)।
4. চিত্রটি এখনও ঠিক দেখাচ্ছে কিনা নিশ্চিত করতে মূল ও অপ্টিমাইজড রেন্ডার পাশাপাশি তুলনা করুন।
5. প্রকৃত আকার সাশ্রয় দেখতে আগে, পরে, সাশ্রয়, Gzip ও Brotli পরিসংখ্যান পড়ুন।
6. অপ্টিমাইজড SVG কপি করুন, বা .min.svg ফাইল হিসেবে ডাউনলোড করুন।

উদাহরণ

<svg xmlns="http://www.w3.org/2000/svg"><!-- Generator: Sketch --><title>icon</title><rect x="0" y="0" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><path d="M1.00000 2.49999 L10.333333 8"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><path d="M1 2.5 L10.33 8"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect fill="#FFFFFF" fill-opacity="1" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect fill="#fff" width="24" height="24"/></svg>

সচরাচর জিজ্ঞাসিত প্রশ্ন

অপ্টিমাইজার ঠিক কী সরায়?

সংশ্লিষ্ট টগল চালু থাকলে: XML মন্তব্য, <metadata>, <title> ও <desc> উপাদান, এডিটর নেমস্পেস অ্যাট্রিবিউট (Inkscape, Sodipodi, Illustrator), খালি গ্রুপ, যেসব ID কিছুই রেফারেন্স করে না, এবং রেফারেন্সবিহীন <defs>। এটি সংখ্যাসূচক অ্যাট্রিবিউট ও path ডেটা গোল করতে, অকেজো ট্রান্সফর্ম একত্র করতে, style অ্যাট্রিবিউট ও <style> CSS মিনিফাই করতে, hex রং সংক্ষিপ্ত করতে (#ffffff→#fff), এবং fill-opacity="1" এর মতো ডিফল্ট উপস্থাপনা অ্যাট্রিবিউট সরাতে পারে।

স্থানাঙ্ক গোল করলে কি আমার SVG-এর চেহারা বদলাবে?

কম নির্ভুলতায় গোল করলে বিন্দু একক এককের অতি ক্ষুদ্র ভগ্নাংশ সরে যেতে পারে, যা সাধারণত অদৃশ্য কিন্তু ছোট। সঠিক জ্যামিতির জন্য নির্ভুলতা বাড়ান (৫ দশমিক পর্যন্ত), অথবা সংখ্যাগুলো অক্ষত রাখতে গোল করা বন্ধ করুন।

আমি কি একটি ফাইল লোড করে ফলাফল প্রিভিউ করতে পারি?

হ্যাঁ। একটি .svg ফাইল ড্রপ বা আপলোড করুন (বা মার্কআপ পেস্ট করুন) এবং মূল ও অপ্টিমাইজড রেন্ডার পাশাপাশি দেখা যায় যাতে কোনো ভাঙন ধরতে পারেন। এরপর আউটপুট কপি করুন বা অপ্টিমাইজড .min.svg ডাউনলোড করুন — কিছুই আপলোড হয় না; ফাইল স্থানীয়ভাবে পড়া হয়।

Gzip ও Brotli সংখ্যাগুলোর অর্থ কী?

Gzip আকার আপনার ব্রাউজারে অপ্টিমাইজড SVG আসলে সংকুচিত করে মাপা হয়, তাই এটি gzip-সক্ষম সংযোগে প্রকৃত বাইট প্রতিফলিত করে। Brotli সংখ্যা সেই gzip আকার থেকে নেওয়া একটি আনুমানিক (brotli সাধারণত টেক্সট একটু ছোট করে সংকুচিত করে); আসল brotli এনকোডার বান্ডল করার জন্য অত্যন্ত ভারী, তাই এটি টিল্ড দিয়ে চিহ্নিত।

আমার SVG কি কোথাও আপলোড হয়?

না। পার্সিং, পরিচ্ছন্নতা, আকার পরিমাপ ও সিরিয়ালাইজেশন সবই আপনার ব্রাউজারে অন্তর্নির্মিত DOMParser দিয়ে স্থানীয়ভাবে ঘটে। সার্ভারে কিছুই পাঠানো হয় না, তাই টুলটি অফলাইনে কাজ করে এবং আপনার শিল্পকর্ম ব্যক্তিগত থাকে।