SVG থেকে PNG কনভার্ট করুন

যে রেজোলিউশন কখনো ঠিক করা ছিল না, তা ঠিক করা

SVG-এর কোনো পিক্সেল নেই, কোনো সাইজও নেই। এটি আঁকার কিছু নির্দেশনা — এই পাথ, ওই ফিল, এই বাঁক — আর এ কারণেই যত বড় করা হোক তা ধারালো থাকে, আর লোগো যতদিন সম্ভব এভাবেই রাখা উচিত। রাস্টার করলে চিরদিনের জন্য একটি সাইজে বাঁধা পড়ে। তাই ছবিটি সবচেয়ে বড় যেখানে দেখানো হবে, সেই অনুযায়ী সাইজ বেছে নিন, আর মনে রাখুন দুই বা তিন গুণ ঘনত্বের স্ক্রিনে দুই বা তিন গুণ পিক্সেল লাগে: ৬৪ পয়েন্টে দেখানো একটি আইকন আধুনিক ফোনে ঠিকঠাক দেখাতে ১৯২ পিক্সেল চায়।

সবচেয়ে বেশি সমস্যা হয় লেখায়, আর কারণটা বোঝা দরকার। একটি SVG বলে “এই লেখাটি Helvetica Neue-তে বসাও”; যে মেশিন রেন্ডার করছে তাতে Helvetica Neue না থাকলে অন্য কিছু বসে যায় আর লেআউট সরে যায় — যে শিরোনাম তার বক্সে আঁটত, তা এখন উপচে পড়ে। URL দিয়ে উল্লেখ করা ওয়েব ফন্ট এখানে লোডই হয় না, কারণ ছবি হিসেবে রেন্ডার হওয়া SVG ইচ্ছাকৃতভাবে বিচ্ছিন্ন রাখা হয় এবং নেটওয়ার্কে যেতে পারে না। সমাধান সেটিই, যা প্রত্যেক ডিজাইনার একসময় শেখেন: এক্সপোর্টের আগে লেখাকে আউটলাইনে কনভার্ট করুন, তখন অক্ষরগুলো পাথ হয়ে যায়, আর কোনো ফন্টই লাগে না।

এই একই বিচ্ছিন্নতা অন্য অবাক করা ব্যাপারগুলোও ব্যাখ্যা করে। লিংক করা বিটম্যাপ — কোথাও থাকা একটি .png-এর দিকে নির্দেশ করা একটি image এলিমেন্ট — কিছুই রেন্ডার করে না। স্ক্রিপ্ট চলে না, তাই যে SVG নিজেকে JavaScript দিয়ে আঁকে, তা ফাঁকা বা আধা-তৈরি অবস্থায় আসে। ডিক্লারেটিভ অ্যানিমেশন শুরুর অবস্থায় রেন্ডার হয়, অর্থাৎ প্রথম ফ্রেমের একটি স্থির ছবি। স্বয়ংসম্পূর্ণ সবকিছু নিখুঁতভাবে কাজ করে: গ্রেডিয়েন্ট, ফিল্টার, ক্লিপিং পাথ, মাস্ক, এমবেড করা data URI ছবি আর ব্লার ইফেক্ট — সবই আঁকা অবস্থাতেই রেন্ডার হয়।

এর জন্য PNG-ই সঠিক গন্তব্য, JPEG নয়। ভেক্টর আর্টওয়ার্ক মানে সমতল রং আর শক্ত কিনারা, যা PNG ভালোভাবে কমপ্রেস করে আর JPEG নষ্ট করে — JPEG-এ প্রতিটি ধারালো কিনারায় একটি আভা পড়ে। স্বচ্ছতা আসে আসল আলফা চ্যানেল হিসেবে, তাই সঠিক সাইজে এক্সপোর্ট করা লোগো যেকোনো ব্যাকগ্রাউন্ডে বসে যায়। SVG-তে কোনো মাপ না থাকলে, শুধু একটি viewBox থাকলে, অনুপাত আসে সেখান থেকে, আর সাইজ বেছে নেওয়া আপনার হাতে।

অন্য কিছু দরকার হলে

resvg ও rsvg-convert কমান্ড লাইন থেকে SVG রেন্ডার করে, আসল ফন্টের সংগ্রহ হাতে রেখে, তাই লেখা বিকল্প ফন্টে নয়, নির্ধারিত টাইপফেসেই রেন্ডার হয় — rsvg-convert -w 512 in.svg -o out.png, পুরো কমান্ড এটুকুই। Inkscape --export-type=png --export-dpi=300 স্পেসিফিকেশনের সবচেয়ে সম্পূর্ণ বাস্তবায়ন, আর হালকা রেন্ডারার যেসব ফিল্টার ও ব্লেন্ড মোড আনুমানিকভাবে করে, সেগুলো এটি ঠিকভাবে সামলায়।

রাস্টার করার আগে দেখে নিন, আসলে PNG-এর দরকার আছে কি না। এক দশকেরও বেশি সময় ধরে সব ব্রাউজার নিজেই SVG আঁকে, আর ওয়েবসাইটের লোগো বা আইকনের জন্য SVG ছোট, অসীম ধারালো, আর CSS দিয়ে স্টাইল করা যায়। যেখানে সত্যিই পিক্সেল লাগে, তা মানুষ যতটা ভাবে তার চেয়ে কম: ফেভিকন, সোশ্যাল প্রিভিউ ছবি, ইমেইল, অ্যাপ স্টোরের অ্যাসেট, আর যে সফটওয়্যার ভেক্টর পড়তে পারে না।