SVG ভিউয়ার ও মিনিফায়ার

SVG ভিউয়ার ও মিনিফায়ার কী?#

SVG হলো ওয়েবে আইকন, লোগো এবং লাইন আর্টের জন্য পছন্দের ফরম্যাট — এটি যেকোনো আকারে তীক্ষ্ণ থাকে এবং টেক্সট হিসেবে সম্পাদনযোগ্য। কিন্তু ডিজাইন টুল দ্বারা রপ্তানি করা SVG ফাইলগুলো প্রচুর আবর্জনা বহন করে: Inkscape এবং Sodipodi এডিটর নেমস্পেস, <metadata> ব্লক, রচনা মন্তব্য, এবং প্রতিটি ট্যাগের মধ্যে শূন্যস্থান। সেই ব্যাগেজ ফাইলটিকে ফুলিয়ে তোলে এবং সোর্স পড়া যে কারো মাথা ব্যথার কারণ দেয়। একটি SVG মিনিফায়ার যা রেন্ডারিংকে প্রভাবিত করে না তা সরিয়ে দেয় এবং কতটা সাশ্রয় হয়েছে তা রিপোর্ট করে।

এই পৃষ্ঠাটি একটি ভিউয়ার এবং একটি মিনিফায়ার উভয়ই। বাঁদিকে SVG সোর্স পেস্ট করুন, ডানদিকে এটি রেন্ডার হতে দেখুন, মন্তব্য, মেটাডেটা, এডিটর নেমস্পেস এবং ইন্টার-এলিমেন্ট শূন্যস্থান সরিয়ে একটি স্ব-লিখিত ক্লিনআপ পাস চালাতে মিনিফাই-এ স্যুইচ করুন, এবং বাইট সাশ্রয় পড়ুন। প্রিভিউটি একটি ইমেজ ডেটা URI-এর মাধ্যমে রেন্ডার করা হয় যাতে SVG-এ এম্বেড করা কোনো স্ক্রিপ্ট কখনো সম্পাদন না হয় — আপনি নিরাপদে একটি অবিশ্বস্ত ফাইল পরিদর্শন করতে পারেন।

যেভাবে ব্যবহার করবেন#

1. বাঁদিকের ইনপুট পেনে আপনার SVG পেস্ট করুন, অথবা একটি ছোট উদাহরণ লোড করতে নমুনা ক্লিক করুন।
2. আউটপুট পেন এবং প্রিভিউটি সাথে সাথে আপডেট হয়। ডিফল্টভাবে টুলবারটি মিনিফাই-এ থাকে, তাই আউটপুট হলো পরিষ্কার, ছোট SVG।
3. আপনি যদি আউটপুটে মূল, অপরিবর্তিত সোর্স দেখতে চান তবে আসল-এ স্যুইচ করুন (মিনিফাই করা সংস্করণের সাথে তুলনা করতে কার্যকর)।
4. পেনগুলোর নিচে পরিসংখ্যান প্যানেলটি পড়ুন:
   • আগে / পরে / সাশ্রয় — ইনপুট বনাম আউটপুটের UTF-8 আকার, এবং শতাংশে সাশ্রয়।
   • সরানো সারসংক্ষেপ — কতগুলি মন্তব্য, মেটাডেটা ব্লক, এডিটর এলিমেন্ট, এডিটর অ্যাট্রিবিউট, এবং শূন্যস্থান নোড সরানো হয়েছে।
   • ভিউবক্স (viewBox) — রুট <svg> থেকে পড়া width / height / viewBox জ্যামিতি, যাতে আপনি এক নজরে আর্টবোর্ড আকার নিশ্চিত করতে পারেন।
5. মিনিফাই করা SVG নিতে আউটপুট পেনে কপি বা ডাউনলোড ব্যবহার করুন। উভয় পেন মুছতে মুছুন ব্যবহার করুন।

প্রধান বৈশিষ্ট্য#

• একটি প্রকৃত মিনিফায়ার, শূন্য থেকে লেখা — svgo নয়। svgo হলো স্ট্যান্ডার্ড Node টুল, কিন্তু এটি Node-এর fs এবং path-এর উপর নির্ভর করে এবং ব্রাউজারে পরিষ্কারভাবে চলে না। এই পৃষ্ঠাটি তার নিজস্ব ট্রি ওয়াক শিপ করে, তাই এটি শূন্য সার্ভার-সাইড নির্ভরতা সহ কাজ করে।
• আবর্জনার পাঁচটি বিভাগ সরানো হয়েছে। মন্তব্য, <metadata> ব্লক, Inkscape/Sodipodi নেমস্পেস এলিমেন্ট এবং অ্যাট্রিবিউট, এবং ইন্টার-এলিমেন্ট শূন্যস্থান — প্রতিটি গণনা এবং রিপোর্ট করা হয়েছে।
• টেক্সট-সচেতন শূন্যস্থান হ্যান্ডলিং। <text>, <tspan>, <title>, <desc>, <style>, এবং <script>-এর ভেতরের শূন্যস্থান সংরক্ষিত থাকে, তাই লেবেল এবং এম্বেডেড CSS পাস টিকে থাকে।
• নিরাপদ প্রিভিউ। রেন্ডারটি একটি ডেটা URI সহ একটি <img> ব্যবহার করে, যাকে ব্রাউজার একটি নন-এক্সিকিউটিং ইমেজ হিসেবে বিবেচনা করে — SVG-এ এম্বেড করা স্ক্রিপ্ট চলে না। আপনি ঝুঁকি ছাড়াই একটি অবিশ্বস্ত ফাইল পেস্ট করতে পারেন।
• সততাপূর্ণ বাইট হিসাব। আকারগুলো UTF-8 বাইটে পরিমাপ করা হয় (অক্ষর গণনা নয়), তাই CJK টেক্সট বা ইমোজি সহ একটি ফাইল তার প্রকৃত অন-ওয়্যার আকার রিপোর্ট করে।
• ১০০% স্থানীয়। পার্সিং এবং সিরিয়ালাইজেশন আপনার ব্রাউজারে ঘটে। SVG কখনো পৃষ্ঠা ছাড়ে না।

বিস্তারিত উদাহরণ#

একটি সাধারণ Inkscape রপ্তানি হয়তো বেশ কয়েক লাইন এডিটর নেমস্পেস ঘোষণা এবং প্রকৃত আর্টের আগে একটি <metadata> ব্লক দিয়ে শুরু হয়:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="24" height="24" viewBox="0 0 24 24">
  <metadata id="metadata8">
    <rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format></cc:Work></rdf:RDF>
  </metadata>
  <!-- a checkmark path drawn by hand -->
  <path inkscape:connector-curvature="0" d="M5 13l4 4L19 7" stroke="#000" stroke-width="2" fill="none"/>
</svg>

এটি পেস্ট করুন, মোডটি মিনিফাই-এ রাখুন, এবং আউটপুটটি সংকুচিত হয়:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" stroke="#000" stroke-width="2" fill="none"/></svg>

পরিসংখ্যান প্যানেল প্রায় আগে ~৫২০ বাইট, পরে ~২১০ বাইট, সাশ্রয় ~৬০% রিপোর্ট করে, সরানো সারসংক্ষেপে ১টি মন্তব্য, ১টি মেটাডেটা ব্লক, এবং ১টি এডিটর অ্যাট্রিবিউট (inkscape:connector-curvature) দেখায়। চেকমার্কটি প্রিভিউতে অভিন্নভাবে রেন্ডার হয় — অঙ্কনকে প্রভাবিত করে এমন কিছুই সরানো হয়নি।

সাধারণ জিজ্ঞাসা#

এটি কি SVG-এ এম্বেড করা স্ক্রিপ্ট চালায়?#

না। প্রিভিউটি <img src="data:image/svg+xml;base64,…"> হিসেবে রেন্ডার করা হয়, এবং <img>-এর মাধ্যমে লোড করা ছবিগুলো একটি নন-স্ক্রিপ্টিং প্রসঙ্গ — ব্রাউজার সেই SVG-এর ভেতরে কোনো <script> সম্পাদন করবে না। এটি পৃষ্ঠাটিকে আপনার লেখা নয় এমন SVG ফাইল পরিদর্শনের জন্য নিরাপদ করে। সোর্স <script> ট্যাগটি মিনিফাই করা আউটপুটে সংরক্ষিত, যদিও; এটি চলে কিনা তা নির্ভর করে আপনি পরে SVG কীভাবে এম্বেড করেন তার উপর।

শুধু svgo ব্যবহার করছি না কেন?#

svgo একটি Node বিল্ড পাইপলাইনে সঠিক টুল, কিন্তু এটি Node-এর fs এবং path মডিউলের উপর নির্ভর করে এবং একটি ব্রাউজার ট্যাবে পরিষ্কারভাবে চলে না। এই পৃষ্ঠার মিনিফায়ার হলো একটি স্বয়ংসম্পূর্ণ ট্রি ওয়াক যার কোনো Node নির্ভরতা নেই, তাই এটি সম্পূর্ণ ক্লায়েন্ট-সাইডে কাজ করে — খরচ হলো svgo-এর গভীরতম অপ্টিমাইজেশনের চেয়ে কম আগ্রাসী হওয়া।

আমার ফাইলে সাশ্রয় ছোট।#

আগে থেকে হাতে লেখা ফাইলগুলোর (কোনো এডিটর নেমস্পেস নেই, কোনো মেটাডেটা নেই, কোনো মন্তব্য নেই) সরানোর মতো খুব কম, তাই সাশ্রয় শুধু শূন্যস্থান থেকে কয়েক শতাংশ হতে পারে। সবচেয়ে বড় সাশ্রয় আসে ডিজাইন-টুল রপ্তানি থেকে — Inkscape, Illustrator — যা ঠিক সেখানে যেখানে আবর্জনার বেশিরভাগ অংশের উৎপত্তি।

মিনিফিকেশন কি SVG রেন্ডারিং পরিবর্তন করবে?#

না, এই টুলটি যে বিভাগগুলো সরায় সেগুলোর জন্য: মন্তব্য, মেটাডেটা, এডিটর নেমস্পেস, এবং ইন্টার-এলিমেন্ট শূন্যস্থানের কোনো রেন্ডারিং সিম্যান্টিক্স নেই। টেক্সচুয়াল এলিমেন্টের (<text>, <title>, <desc>, <style>, <script>) ভেতরের শূন্যস্থান ইচ্ছাকৃতভাবে সংরক্ষিত, কারণ সেখানে এটি লোড-বেয়ারিং হতে পারে।