আমি এসভিজি কর্মশালায় এই আকর্ষণীয় প্রশ্নটি পেয়েছি: “একটি SVG লোডার এবং লোডারের জন্য একটি চিত্র ঘোরানোর মধ্যে পারফরম্যান্সের মধ্যে পার্থক্য কী?”
স্কেলযোগ্য ভেক্টর গ্রাফিক্স (SVG) এবং রাস্টার ইমেজ লোডারগুলির মধ্যে পছন্দের মধ্যে কর্মক্ষমতা, নান্দনিকতা এবং ব্যবহারকারীর অভিজ্ঞতার মতো অনেকগুলি কারণ জড়িত। এই প্রশ্নের সংক্ষিপ্ত উত্তর হল: আপনি যদি খুব ছোট এবং নির্দিষ্ট কিছুতে কাজ করেন তবে প্রায় কোনও পার্থক্য নেই। তবে আসুন এই নিবন্ধে আরও বিশদ অনুসন্ধান করি এবং উভয় ফর্ম্যাটের ক্ষমতাগুলি নিয়ে আলোচনা করি যাতে আপনি আপনার কাজে সচেতন সিদ্ধান্ত নিতে পারেন।
বিন্যাস বোঝা
SVG হয় ভেক্টর-ভিত্তিক গ্রাফিক্স, এর মাপযোগ্যতা এবং স্বচ্ছতার জন্য জনপ্রিয়। কিন্তু রাস্টার ইমেজ এবং ভেক্টর গ্রাফিক্স আসলে কি তা সংজ্ঞায়িত করে শুরু করা যাক।
রাস্টার ছবিগুলি ফিজিক্যাল পিক্সেলের উপর ভিত্তি করে। এগুলিতে প্রতিটি পিক্সেলের জন্য স্পষ্ট রঙের তথ্য রয়েছে। যা ঘটে তা হল আপনি সম্পূর্ণ পিক্সেল-বাই-পিক্সেল তথ্য পাঠান এবং ব্রাউজার প্রতিটি পিক্সেলকে একে একে পেইন্ট করে, যা নেটওয়ার্কটিকে আরও কঠিন করে তোলে।
এর অর্থ:
- তারা একটি আছে স্থির রেজোলিউশন (স্কেলিং ঝাপসা হতে পারে),
- ব্রাউজার থাকতে হবে প্রতিটি ফ্রেম ডিকোড এবং আঁকাএবং
- সাধারণত অ্যানিমেশন মানে ফ্রেম-বাই-ফ্রেম প্লেব্যাকএকটি GIF বা ভিডিও লুপের মত।
ভেক্টর হল গাণিতিক নির্দেশ যেটি বলে কিভাবে কম্পিউটার গ্রাফিক্স তৈরি করতে হয়। যেমন ক্রিস কোয়ার এই সিএসএস কনফেসে বলেছেন: “আপনি যখন গণিত পাঠাতে পারেন তখন কেন পিক্সেল পাঠান?” সুতরাং, সমস্ত তথ্য সহ পিক্সেল পাঠানোর পরিবর্তে, SVG কীভাবে জিনিসটি আঁকতে হয় তার জন্য নির্দেশাবলী পাঠায়। অন্য কথায়, ব্রাউজারকে বেশি কাজ করতে দিন এবং নেটওয়ার্ক কম কাজ করে।
এই কারণে, SVG:
- গুণমান হারানো ছাড়া সীমাহীন স্কেল,
- সিএসএস এবং জাভাস্ক্রিপ্টের সাথে স্টাইল এবং ম্যানিপুলেট করা যেতে পারে, এবং
- অতিরিক্ত HTTP অনুরোধ বাদ দিয়ে সরাসরি DOM-এ থাকতে পারে।
ভেক্টরের শক্তি: কেন SVG জিতেছে
রাস্টার ইমেজের পরিবর্তে SVG ব্যবহার করার জন্য এটি একটি ভাল ধারণা কেন বিভিন্ন কারণ রয়েছে।
1. স্বচ্ছতা এবং চাক্ষুষ গুণমান
বেশিরভাগ আধুনিক চিত্র বিন্যাস স্বচ্ছতা সমর্থন করে, কিন্তু সমস্ত স্বচ্ছতা একই নয়। উদাহরণস্বরূপ, GIF শুধুমাত্র বাইনারি স্বচ্ছতা সমর্থন করে, যার অর্থ পিক্সেল হয় সম্পূর্ণ স্বচ্ছ বা সম্পূর্ণ অস্বচ্ছ।
এর ফলে প্রায়শই স্কেলে জ্যাগড প্রান্ত দেখা যায়, বিশেষ করে বক্ররেখার চারপাশে বা অস্বচ্ছ বা স্বচ্ছ পটভূমিতে। SVG গুলি সত্যিকারের স্বচ্ছতা এবং মসৃণ প্রান্তগুলিকে সমর্থন করে, যা জটিল UI স্তরগুলির উপরে বসে থাকা লোডারদের জন্য একটি লক্ষণীয় পার্থক্য করে।
| jpg | জিআইএফ | পিএনজি | এসভিজি | |
|---|---|---|---|---|
| ভেক্টর | ❌ | ❌ | ❌ | ✅ |
| রাস্টার | ✅ | ✅ | ✅ | ❌ |
| স্বচ্ছতা | ❌ | ✅ | ✅ | ✅ |
| অ্যানিমেশন | ❌ | ✅ | ✅ | ✅ |
| চাপ | ক্ষতিকর | ত্রুটিহীন | ত্রুটিহীন | ত্রুটিহীন |
2. “জিরো রিকোয়েস্ট” পারফরম্যান্স
একটি কাঁচা কর্মক্ষমতা দৃষ্টিকোণ থেকে, CSS-এ একটি ছোট PNG এবং একটি SVG ঘোরানো (বা সেই বিষয়ে জাভাস্ক্রিপ্ট) একই। যাইহোক, SVGs অনুশীলনে জয়ী হয় কারণ তারা gzip-বন্ধুত্বপূর্ণ এবং ইনলাইনে এম্বেড করা যেতে পারে.
আপনার HTML এ সরাসরি SVG কোড পেস্ট করে, আপনি সম্পূর্ণ HTTP অনুরোধটি মুছে ফেলবেন। একটি লোডারের মতো কিছুর জন্য – অন্যান্য জিনিস লোড হওয়ার সময় দৃশ্যমান হওয়া উচিত – সত্য যে SVG কোড ইতিমধ্যেই সেখানে রয়েছে এবং অবিলম্বে রেন্ডার করে তা পারফরম্যান্সের জন্য একটি বিশাল জয়৷
আরও গুরুত্বপূর্ণ, লোডার প্রভাবিত করে অনুভূত কর্মক্ষমতা. একটি লোডার যা সহজে এর প্রসঙ্গ এবং স্কেল সঠিকভাবে অপ্টিমাইজ করে অপেক্ষার সময়গুলিকে ছোট করে তুলতে পারে, এমনকি প্রকৃত লোডের সময় একই হলেও।
এবং যদিও SVG কোড মনে হচ্ছে যেহেতু এটি এইচটিএমএল এর একটি লাইনের চেয়ে ভারী হবে, এটি ইমেজের ফাইলের আকার যা সত্যিই গুরুত্বপূর্ণ। এবং সত্য যে আমরা বাইটে SVG পরিমাপ করছি যা জিজিপ করা যেতে পারে তার মানে শেষ পর্যন্ত এটি খুব কম ওভারহেড।
এই সব বলা হচ্ছে, এটি এখনও SVG আমদানি করা সম্ভব
এবং হ্যাঁ, এটি একটি নেটওয়ার্ক অনুরোধ হিসাবে গণনা করা হয়, যদিও এটি ফাইলের ভেক্টর-নেসকে সম্মান করে যখন এটি যেকোনো স্কেলে খাস্তা প্রান্তের ক্ষেত্রে আসে। এটি, এবং এটি পরেরটির মতো অন্যান্য সুবিধাগুলিকে সরিয়ে দেয়।
3. অ্যানিমেশন, নিয়ন্ত্রণ এবং ইন্টারঅ্যাক্টিভিটি
SVG-তে ফর্ম্যাট লোডারগুলি DOM-ভিত্তিক, ফ্রেম-ভিত্তিক নয়। এর মানে আপনি পারেন:
আপনি CSS, JavaScript বা SMIL-এর মাধ্যমে আপনার SVG-কে ম্যানিপুলেট করতে পারেন, যখন রাস্টার চিত্রগুলি মেলে না এমন ইন্টারঅ্যাক্টিভিটির ক্ষেত্রে সম্ভাবনার পুরো বিশ্ব তৈরি করে৷
4. কিন্তু অ্যানিমেটেড SVG-এর জন্য আমার কি আলাদা ফাইল দরকার?
আবার, এসভিজি অ্যানিমেশন এইচটিএমএল বা এর ভিতরে ইনলাইন থাকতে পারে .svg ফাইল এর মানে আপনি একটি অ্যানিমেটেড ফাইল পাঠাতে পারেন, যেমন একটি GIF, কিন্তু অনেক বেশি নিয়ন্ত্রণ সহ। ব্যবহার করে আপনি কোড পরিষ্কার রাখতে পারেন. এখানে একটি SMIL লোডার ফাইলের একটি উদাহরণ:
আরও জটিল মিথস্ক্রিয়াগুলির জন্য, আপনি আপনার SVG ফাইলের মধ্যে CSS এবং JavaScript অন্তর্ভুক্ত করতে পারেন:
শৈলী এবং স্ক্রিপ্টগুলি এম্বেড করে, আপনি মূলত একটি একক গ্রাফিকের মধ্যে একটি স্বতন্ত্র মিনি-অ্যাপ্লিকেশন তৈরি করছেন৷ প্রাথমিক সুবিধা হল এনক্যাপসুলেশন: লোডারটি সম্পূর্ণরূপে বহনযোগ্য, এটির জন্য কম HTTP অনুরোধের প্রয়োজন এবং এর শৈলীগুলি আপনার ওয়েবসাইটে “ব্লিড” করবে না। এটি বিভিন্ন প্রকল্পের জন্য চূড়ান্ত “ড্রপ-ইন” সম্পদ।
যাইহোক, এই শক্তি কার্যকারিতা এবং নিরাপত্তা একটি বাণিজ্য বন্ধ সঙ্গে আসে. ব্রাউজার লোড করার সময় SVG কে স্ট্যাটিক ইমেজ হিসাবে বিবেচনা করে ট্যাগ এই সীমাবদ্ধতার কারণে, ইনলাইন পদ্ধতি (কোডটি সরাসরি আপনার HTML এ পেস্ট করা) বেশিরভাগ আধুনিক ওয়েব অ্যাপ্লিকেশনের জন্য পছন্দের পছন্দ হিসেবে রয়ে গেছে।
5. সৃজনশীলতা, ব্র্যান্ড এবং ব্যবহারকারীর অভিজ্ঞতা
এখানেই আমরা পারফরম্যান্সের বাইরে চলে যাই গল্প.
একটি B2B সাইট কল্পনা করুন যেখানে একজন ব্যবহারকারী একটি অনলাইন স্টোর তৈরি করে। এটি তৈরি করতে কয়েক সেকেন্ড সময় লাগে। স্বাভাবিক স্পিনারের পরিবর্তে, আপনি দোকানে “আসছে” পণ্যগুলির একটি অ্যানিমেশন দেখাতে পারেন। আপনি এই লোডারটিকে ইন্টারেক্টিভও করতে পারেন।
এই ধরনের SVG অ্যানিমেশন 20kb-এর কম হতে পারে। রাস্টার GIF এর সাথে একই জিনিস করতে, আমরা মেগাবাইট সম্পর্কে কথা বলব। SVG-এর দক্ষতা আপনাকে আপনার ব্র্যান্ডের ভয়েস প্রসারিত করতে এবং আপনার কর্মক্ষমতা প্রভাবিত না করে অপেক্ষার সময় ব্যবহারকারীদের জড়িত করতে দেয়।
যখন রাস্টার লোডার এখনও অর্থবোধ করে
রাস্টার লোডাররা নিজেরাই “ভুল” নয়; তারা যা করতে পারে তাতে সীমিত, বিশেষ করে যখন SVG এর সাথে তুলনা করা হয়। এটি বলেছিল, রাস্টার চিত্রগুলি এখনও বোঝা যায় যখন:
- লোডারটি ফটোগ্রাফিক বা জটিল, চিত্রণ-ভারী টেক্সচার ব্যবহার করে,
- আপনি পুরানো সিস্টেমে কাজ করছেন যা SVG ইনজেকশনের অনুমতি দেয় না, বা
- আপনার প্রয়োজন শূন্য কাস্টমাইজেশন সহ একটি খুব দ্রুত, এক-অফ ড্রপ-ইন সম্পত্তি।
সারাংশ
| বিশেষত্ব | রাস্টার (GIF/PNG) | এসভিজি |
|---|---|---|
| চাক্ষুষ মান | রেটিনার পর্দায় ঝাপসা হতে পারে | যে কোনো স্কেলে খাস্তা এবং ধারালো |
| ফাইলের আকার | সাধারণত বড় (KB/MB) | খুব ছোট (বাইট) |
| অভিযোজন | পুনরায় রপ্তানি প্রয়োজন | CSS/JavaScript দিয়ে সরাসরি পরিবর্তন করুন |
| নেটওয়ার্ক অনুরোধ | সাধারণত একটি HTTP অনুরোধ | HTML এ সরাসরি ইনলাইন থাকলে নাল |
চূড়ান্ত চিন্তা
আপনি যদি একটি লোডিং সূচক প্রদর্শন করেন যা একটি ঘূর্ণায়মান ছোট বিন্দুর মতো সহজ, তাহলে SVG এবং রাস্টারের মধ্যে পারফরম্যান্সের পার্থক্য নগণ্য হতে পারে। কিন্তু একবার আপনি স্কেলেবিলিটি, স্বচ্ছতা, অ্যাক্সেসযোগ্যতা এবং একটি ব্র্যান্ডের গল্প বলার ক্ষমতা বিবেচনা করলে, SVG লোডারগুলি কার্যক্ষমতার চেয়ে অনেক বেশি হয়ে যায়; তারা এমন লোডার তৈরি করছে যা সত্যিকার অর্থে আধুনিক ওয়েবের অন্তর্গত।
আপনি যদি এটি নিয়ে পরীক্ষা করতে চান, আমি আপনাকে loaders.holasvg.com চেষ্টা করার জন্য আমন্ত্রণ জানাচ্ছি। এটি একটি বিনামূল্যের ওপেন-সোর্স জেনারেটর যা আমি তৈরি করেছি যা আপনাকে অ্যানিমেশন, আকার এবং রঙের মতো প্যারামিটারগুলি কাস্টমাইজ করতে দেয় এবং তারপরে আপনাকে ব্যবহার করার জন্য পরিষ্কার SVG কোড দেয়৷
