SVG ফাইল অনেক বড়? ৮টি কম্প্রেশন ও অপটিমাইজেশন কৌশল
SVG ফাইল অনেক বড় হলে কীভাবে কম্প্রেস করবেন? এই নিবন্ধে অ্যাংকর কমানো, পথ মেলানো, এডিটর মেটাডাটা সরানো, দশমিক যতিপাত কমানো, SVGO দিয়ে স্বয়ংক্রিয় কম্প্রেশন, সিম্বল পুনর্ব্যবহার, রঙের স্তর নিয়ন্ত্রণ ও ট্রান্সফার কম্প্রেশন — এই ৮টি বাস্তবায়নযোগ্য কৌশল দেওয়া হয়েছে।
SVG প্রায়ই কয়েকশো KB থেকে কয়েক MB পর্যন্ত লম্বা হয়, আর এর কারণ সাধারণত অতিরিক্ত অ্যাংকর, লাল-বহাদুর পথ, এডিটর মেটাডাটা ও অতিরিক্ত দশমিক যতিপাত। নিচের ৮টি কৌশল "সূত্র থেকে হস্তান্তর" পর্যন্ত এই ক্রমে সাজানো, এবং সবগুলোই বাস্তবে প্রয়োগযোগ্য।
1. পথের স্তরে: অ্যাংকর কমান, পথ মেলাও
কৌশল ১: অ্যাংকর কমান (পথ সরলীকরণ)
অ্যাংকর যত বেশি, ফাইল তত বড় ও রেন্ডারিং তত ধীর। রূপান্তরের সময় স্মুদিং সামান্য বাড়িয়ে সূত্র থেকেই অ্যাংকর কমান; বর্তমান SVG-তে Illustrator-এর "অবজেক্ট → পাথ → সিমপ্লিফাই" বা Inkscape-এর "পাথ → সিমপ্লিফাই" (Ctrl+L) দিয়ে অপ্রয়োজনীয় অ্যাংকর সরান। PolySVG কনভার্সন টুল-এও স্মুদিং ও রঙের সংখ্যা সমন্বয় করে ফল ও আকারের ভারসাম্য সঙ্গে সঙ্গে দেখা যায়।
কৌশল ২: পথ ও স্তর মেলাও
একই ফিল রঙের একাধিক পথকে একটিতে মিলিয়ে দুর্বার বৈশিষ্ট্য কমান; অর্থহীন গ্রুপ নেস্টিং সমতল করুন, লুকানো স্তর ও ফাঁকা উপাদান মুছে ফেলুন। ডিজাইন সফটওয়্যারে পাথ ফাইন্ডারের "ইউনিয়ন" ব্যবহার করুন বা স্তর মিলিয়ে এক্সপোর্ট করুন।
2. ফাইলের বিষয়বস্তু: মেটাডাটা সরাও, যতিপাত কমাও
কৌশল ৩: এডিটর মেটাডাটা সরান
Illustrator, Inkscape থেকে এক্সপোর্ট করা SVG-তে প্রায়ই এডিটর নেমস্পেস, <metadata>, মন্তব্য ও এক্সপোর্ট সেটিং থাকে, যা রেন্ডারিংকে প্রভাবিত করে না — হাতে মুছে ফেলুন বা SVGO-কে দিয়ে স্বয়ংক্রিয়ভাবে পরিষ্কার করান। <title> ও <desc> রাখবেন, তারা অ্যাক্সেসিবিলিটির জন্য কাজে আসে।
কৌশল ৪: দশমিক যতিপাত কমান
পথের স্থানাঙ্কে প্রায়ই ৬-৮ দশমিক ঘর থাকে, অথচ স্ক্রিনে রেন্ডার করতে ১-২টিই যথেষ্ট। SVGO-র কনফিগারেশনে floatPrecision ১-২-এ নামিয়ে দিলে আকার স্পষ্টভাবে কমে যায়, চোখে কোনো পার্থক্য লাগে না। খুব ছোট আইকনে স্থানাঙ্ক বেশি সংকোচন করবেন না, নইলে আকৃতি বিকৃত হতে পারে।
3. স্বয়ংক্রিয়তা: SVGO দিয়ে এক ক্লিকে কম্প্রেস
কৌশল ৫: SVGO দিয়ে স্বয়ংক্রিয়ভাবে অপটিমাইজ করুন
SVG অপটিমাইজেশনের বাস্তব মানক টুল হলো SVGO, যেখানে কয়েকশো প্লগইন রয়েছে: মন্তব্য ও মেটাডাটা সরানো, পথ মেলানো, পথ কমান্ড উন্নত করা, সংখ্যা পরিষ্কার করা। মূল ব্যবহার:
npx svgo input.svg -o output.svg
সাধারণ ফাইলে ৩০%-৭০% পর্যন্ত কমতে পারে। দুটি বিষয় মনে রাখুন: viewBox গुण সরাবেন না, নইলে স্কেলিং নষ্ট হবে; CSS দিয়ে রঙ বদলানো যায় এমন আইকনে fill ইনহেরিটেন্স রাখুন, রঙ সরাসরি লিখে দেবেন না।
অপটিমাইজেশনের আগে ও পরে ফাইলের আকার ও ব্রাউজার ডেভেলপার টুলে দেখানো প্রকৃত ট্রান্সফার আকার মিলিয়ে দেখুন, যাতে লাভ স্পষ্ট হয়; প্রতিবার এক ধরনের প্যারামিটারই বদলান, তাহলে ফল অস্বাভাবিক হলে সমস্যার ধাপ চিহ্নিত করা সহজ হয়।
4. কাঠামো ও পুনর্ব্যবহার: সিম্বল করা, স্তর নিয়ন্ত্রণ
কৌশল ৬: defs ও use দিয়ে পুনরাবৃত্ত আকৃতির পুনর্ব্যবহার
একই আইকন পেজে বারবার আসলে <defs>-এ একবার সংজ্ঞায়িত করে <use> দিয়ে বারবার সূচিত করুন, অথবা SVG স্প্রাইট তৈরি করুন — আকার ও অনুরোধের সংখ্যা দুটোই কমে যায়।
কৌশল ৭: রঙের স্তর নিয়ন্ত্রণ করুন, এম্বেড করা বিটম্যাপ এড়িয়ে চলুন
ভেক্টরাইজ করার সময় রঙের সংখ্যা কমিয়ে স্তর কম রাখুন; একটি রঙ দিয়ে চললে জটিল গ্রেডিয়েন্ট ব্যবহার করবেন না। বিশেষভাবে SVG-এর ভেতরে base64 বিটম্যাপ এম্বেড করবেন না — তাতে ভেক্টর ফাইল আসলে বিটম্যাপের বাহক হয়ে যায় এবং আকার নিয়ন্ত্রণের বাইরে চলে যায়। রূপান্তরে অবশিষ্ট অপ্রয়োজনীয় পথ অনলাইন এডিটর থেকে ক্লিক করে মুছে ফেলুন।
5. হস্তান্তর: ট্রান্সফার কম্প্রেশন ও ক্যাশ
কৌশল ৮: gzip/Brotli ও ক্যাশ চালু করুন
SVG টেক্সট, তাই সার্ভারে gzip/Brotli চালু থাকলে ট্রান্সফারের আকার সাধারণত আরও ৬০%-৮০% কমে যায়; স্ট্যাটিক SVG-এর জন্য দীর্ঘ ক্যাশ হেডার দিন। খুব ছোট আইকন সরাসরি HTML-এ ইনলাইন করে দিলে অনুরোধই বাঁচে। নীতিটি SVG-এর সুবিধা-তে আছে; রূপান্তরের ধাপেই আকার নিয়ন্ত্রণ করতে চাইলে ছবি থেকে SVG-এর পদ্ধতি পড়ুন।
ক্রমটি গুরুত্বপূর্ণ: সূত্রে অ্যাংকর ও রঙের স্তর নিয়ন্ত্রণ করুন, ফাইলে মেটাডাটা ও যতিপাত পরিষ্কার করুন, তারপর SVGO চালান, শেষে ট্রান্সফার কম্প্রেশন করুন। এই চার স্তর একসঙ্গে থাকলে SVG-এর আকার সাধারণত এক দশাংশ পর্যন্ত কমে যায়।
সাধারণ প্রশ্ন
SVGO দিয়ে কম্প্রেস করলে আকৃতির চেহারা বদলে যায়?
ডিফল্ট কনফিগারেশনে চোখে প্রায় কোনো পার্থক্য লাগে না। viewBox অবশ্যই রাখুন; ছোট আইকনে স্থানাঙ্কের যতিপাত বেশি কমাবেন না, প্রয়োজনে আক্রমণাত্মক প্লগইন এক এক করে বন্ধ করুন।
SVG সাধারণত কতটা কম্প্রেস করা যায়?
অপ্রয়োজনীয়তার উপর নির্ভর করে, সাধারণত ৩০%-৭০% কমতে পারে; সার্ভারে gzip/Brotli যোগ করলে ট্রান্সফারের আকার আরও ৬০%-৮০% কমে যায়।