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

এই ইউটিলিটি সম্পর্কে

SVG (Scalable Vector Graphics) ফাইল XML মার্কআপ দিয়ে আকার, পথ ও টেক্সট বর্ণনা করে। ডিজাইন টুল, CMS এক্সপোর্ট ও হাতে লেখা আইকন প্রায়ই ব্রাউজারের প্রয়োজনের চেয়ে বেশি ডেটা রাখে। SVG অপ্টিমাইজেশন হলো অতিরিক্ত মার্কআপ — মন্তব্য, এডিটর মেটাডেটা, redundant গ্রুপ, অপ্রয়োজনীয় স্থানাঙ্ক নির্ভুলতা ও অব্যবহৃত attribute — সরানো, সাধারণ প্রদর্শন আকারে ভিজ্যুয়াল আউটপুট একই রেখে। PNG বা JPEG-এর মতো raster ফরম্যাটের বিপরীতে SVG সংকোচনের পরেও সম্পাদনযোগ্য ও রেজোলিউশন-স্বাধীন থাকে। ভালোভাবে অপ্টিমাইজ করা আইকন 40 KB থেকে 6 KB হতে পারে কোনো দৃশ্যমান পিক্সেল হারিয়ে না। প্রতি পেজ ভিউতে লোড হওয়া লোগো, UI আইকন, ইলাস্ট্রেশন ও favicon-এর জন্য অপ্টিমাইজেশন অপরিহার্য। ছোট ফাইল দ্রুত পেজ লোড, কম মোবাইল ব্যান্ডwidth ও ভালো Core Web Vitals স্কোর মানে। সার্চ ইঞ্জিন দ্রুত পেজ পুরস্কৃত করে; ব্যবহারকারী লক্ষ্য করেন যখন আইকন দেরিতে আসে বা rendering বাধা দেয়। অপ্টিমাইজ SVG HTML, React কম্পোনেন্ট ও ইমেইল টেমপ্লেটে পরিষ্কারভাবে এম্বেড হয় যেখানে bloated মার্কআপ parser ভাঙতে বা bundle বাড়াতে পারে। প্রোডাকশন ওয়েবসাইট CSS ব্যাকগ্রাউন্ড, inline <svg> ট্যাগ বা img এলিমেন্টে SVG আইকন রেফারেন্স করে। প্রতিটি kilobyte critical rendering path-এ вклад দেয়, বিশেষ করে above the fold-এ একাধিক আইকন থাকলে। whitespace সরানো, transform সংকুচিত করা ও doctype ঘোষণা সরানো CSS বা JavaScript স্পর্শ না করে ট্রান্সফার আকার কমায়। link rel="icon" type="image/svg+xml" দিয়ে SVG favicon দিলে ব্রাউজার আক্রমণাত্মক cache করে — পাতলা ফাইল rebrand-এ দ্রুত আপডেট হয়। React প্রজেক্ট প্রায়ই SVG কম্পোনেন্ট বা URL হিসেবে import করে। bloated সোর্স ফাইল loader string inline করলে JavaScript bundle parse সময় বাড়ায়। কম্পোনেন্ট লাইব্রেরিতে যোগ করার আগে অপ্টিমাইজার দিয়ে যান যাতে tree-shaking ও code splitting কার্যকর থাকে। .svg বা SVGR pipeline-এ অপ্টিমাইজ মার্কআপ পেস্ট করলে viewBox আছে কিনা নিশ্চিত করুন — React অ্যাপ responsive স্কেলিংয়ের জন্য viewBox-এ নির্ভর করে। আধুনিক ব্রাউজার ডকুমেন্ট head থেকে লিঙ্ক করা SVG favicon সমর্থন করে। ফাইল ছোট ও valid হলে Retina ট্যাব ও পিন শর্টকাটে তীক্ষ্ণ স্কেল হয়। SVG favicon বর্গাকার, সহজ palette, নিরাপত্তায় বাহ্যিক রেফারেন্স বা স্ক্রিপ্ট এড়াতে হবে। অপ্টিমাইজের পর পুরনো Windows shell বা raster প্রত্যাশা করা social crawler-এর জন্য ICO বা PNG-তে রূপান্তর করুন। অপ্টিমাইজ SVG favicon পুরো favicon প্যাকেজ workflow-এর চমৎকার master ফাইল। ডিজাইনার প্রায়ই embedded raster ছবি, path-এ অতিরিক্ত দশমিক নির্ভুলতা, duplicate overlapping আকার ও style ব্লকসহ SVG এক্সপোর্ট করেন যা সরল attribute হতে পারত। Illustrator কখনও নামকরা layer group এলিমেন্ট যোগ করে; Figma এক্সপোর্ট xmlns ও ছয় দশমিক ভগ্নাংশ স্থানাঙ্ক রাখে। viewBox ছাড়া ভুলে যাওয়া width/height responsive layout ভাঙে। লুকানো layer ও সক্রিয় clipping mask দৃশ্যহীন geometry এক্সপোর্ট করে যা ফাইল আকারে গণনা হয়। Figma থেকে Copy as SVG ব্যবহার করুন বা Outline stroke দিয়ে এক্সপোর্ট করুন যখন আইকন stroke খারাপ রূপান্তরিত হয়। Figma ফাইল প্রায়ই প্রতিটি গ্রুপে fill-rule ও transform ম্যাট্রিক্স রাখে; অপ্টিমাইজেশন নিরাপদ হলে adjacent path সংকুচিত করে। Illustrator-এ Minify বা Responsive SVG এক্সপোর্ট বেছে নিন, অপ্রয়োজনীয় font embedding বন্ধ করুন ও এক্সপোর্টের আগে appearance expand করুন। এক্সপোর্টের পর মার্কআপ এই ব্রাউজার-ভিত্তিক অপ্টিমাইজারে পেস্ট করুন। প্রক্রিয়াকরণ স্থানীয় — আপনার ব্র্যান্ড asset কখনও সার্ভারে আপলোড হয় না। পরিষ্কার ফাইল ডাউনলোড করুন বা ফলাফল সরাসরি repo, CMS বা favicon generator pipeline-এ কপি করুন। প্রোডাকশন লঞ্চের জন্য multi-size প্যাকেজ দরকার হলে আমাদের SVG to ICO Converter, SVG to PNG Converter বা Favicon Generator-এর সাথে যুক্ত করুন।

সাধারণ প্রশ্ন