PNG থেকে SVG কনভার্ট: লোগো, আইকন ও লাইন আর্ট ট্রেস | UltKit

PNG একটি রাস্টার ইমেজ: পিক্সেলের নির্দিষ্ট গ্রিড, যার প্রতিটির একটি রং এবং ঐচ্ছিকভাবে একটি অস্বচ্ছতার মান থাকে। 500 × 500 px লোগোতে ঠিক 250,000টি এমন বর্গ আছে, আর কিছুই নেই; তাই পোস্টার সাইজে বড় করলে প্রতিটি বর্গ শুধু বড় হয় বা তাদের মাঝের ফাঁক ঝাপসা হয়ে যায়। SVG একটি ভেক্টর ইমেজ, একটি টেক্সট ফাইল যাতে <path>, <circle>, <rect>-এর মতো আকার স্থানাঙ্ক ও ফিল রংসহ লেখা থাকে। ব্রাউজার বা কাটিং মেশিন প্রয়োজনমতো যেকোনো সাইজে আকারগুলো আবার আঁকে, তাই ভেক্টর লোগো ফোনের পর্দায় এবং ট্রেড-শো ব্যানারে সমান ঝকঝকে থাকে।

ভেক্টর থেকে রাস্টারে যাওয়া সহজ, কারণ রেন্ডারার শুধু আকারগুলো পিক্সেলে আঁকে; SVG to PNG এক সেকেন্ডে ঠিক তা-ই করে। উল্টো পথে লসলেস কোনো শর্টকাট নেই, কারণ পিক্সেল গ্রিডে সেই আকারগুলোর কোনো তথ্য থাকে না। কাউকে পিক্সেল দেখে অনুমান করতে হয় প্রতিটি আকার কোথায় শুরু ও শেষ। এই অনুমানের ধাপকে বলে ট্রেসিং বা ভেক্টরাইজ করা, আর Illustrator থেকে কমান্ড-লাইন প্রোগ্রাম পর্যন্ত প্রতিটি সৎ PNG থেকে SVG কনভার্টার ভেতরে ট্রেসার।

কিছু কনভার্টার কঠিন অংশটি এড়িয়ে যায়। তারা একটি বৈধ SVG ফাইল লেখে, যাতে একটিমাত্র <image> এলিমেন্টে মূল PNG base64 টেক্সট হিসেবে বসানো থাকে; এতে ফাইল PNG-র চেয়ে প্রায় এক-তৃতীয়াংশ বড়ও হয়। ফলাফল SVG হিসেবে খোলে এবং ফাইল-টাইপ চেকও পাস করে, কিন্তু আসলে ভেক্টর মোড়কে পিক্সেল ইমেজই: জুম করলে একই ভাঙা কিনারা দেখা যায়, আর কাটিং মেশিন অনুসরণ করার মতো কোনো পাথ পায় না। যেকোনো SVG টেক্সট এডিটরে খুলে data:image/png খুঁজুন; এটি থাকলে কিছুই ভেক্টরাইজ হয়নি।

ট্রেসিং তাদের জন্যই ভালো কাজ করে যা গোড়া থেকেই আকার হিসেবে আঁকা। ডিজাইন অ্যাপ থেকে এক্সপোর্ট করা লোগো, ফ্ল্যাট আইকন, কালো আউটলাইনের কার্টুন, স্ক্যান করা সই বা স্টেনসিল—সবই স্পষ্ট কিনারায় আলাদা করা কয়েকটি নিরেট রঙের সমষ্টি। ট্রেসার প্রতিটি রং অঞ্চলে ভাগ করে, সীমানা অনুসরণ করে এবং তার ওপর মসৃণ কার্ভ বসায়, ফলে SVG ডিজাইনারের মূল আকারের কাছাকাছি হয়। ওয়ার্ডমার্কের মোটা অক্ষরও ভালো ট্রেস হয়, কারণ বড় অক্ষর আরেকটি ভরাট আকারই; প্রতিটি অক্ষর আউটলাইন হয়ে যায় যার রং বা মাপ বদলানো যায়, কিন্তু আর টাইপ করে সম্পাদনা করা যায় না।

ফটোগ্রাফ উল্টো ক্ষেত্র। পোর্ট্রেট বা পণ্যের ছবিতে হাজারো সূক্ষ্ম ভিন্ন টোন একে অপরে মিশে থাকে, যা ভেক্টর ফরম্যাট দক্ষভাবে বর্ণনা করতে পারে না। ট্রেসারকে 16 রং চাইলে দৃশ্যমান ব্যান্ডসহ পোস্টারাইজড ইলাস্ট্রেশন পাবেন; 64 চাইলে PNG-র চেয়ে অনেক বড় ফাইলে হাজারো ক্ষুদ্র আকার পাবেন, তবু সেটি ফটোর মতো দেখাবে না। নরম গ্রেডিয়েন্ট, ড্রপ শ্যাডো ও গ্লো-ও একইভাবে সরু ব্যান্ডের স্তূপ হয়ে যায়। ছোট লেখা তৃতীয় সমস্যা: 10–12 px-এ অ্যান্টি-অ্যালিয়াসিং প্রতিটি অক্ষরকে ব্যাকগ্রাউন্ডের সঙ্গে মিশিয়ে দেয়, আর ট্রেসার "e" ও "o"-র পার্থক্য ধরতে পারে না।

যেকোনো সেটিংয়ের চেয়ে রেজোলিউশন বেশি গুরুত্বপূর্ণ। ট্রেসার কিনারার পিক্সেল-সিঁড়ির সঙ্গে প্রতিটি কার্ভ মেলায়, সিঁড়ি যত সূক্ষ্ম কার্ভ তত নিখুঁত। PNG নিজে Figma, Canva, Photoshop বা স্লাইড থেকে এক্সপোর্ট করলে প্রদর্শনের সাইজের দুই-তিন গুণে আবার এক্সপোর্ট করুন; 1500–2000 px চওড়া লোগো ট্রেসারকে যথেষ্ট তথ্য দেয়। ছোট PNG আগে AI এনলার্জার দিয়ে বড় করবেন না, যদি না ফলাফল 100 % জুমে পরিষ্কার দেখায়, কারণ বানানো কিনারার টেক্সচারও আসল কিনারার মতোই বিশ্বস্তভাবে ট্রেস হয়।

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

শেষে, ট্রেসার নিজে করার আগেই রঙের সংখ্যা কমান। সোর্স ফাইলে শ্যাডো, গ্লো ও গ্রেডিয়েন্ট ওভারলে লুকান, আর ভেক্টর সংস্করণে দরকার না হলে গ্রেডিয়েন্ট ফিলের জায়গায় তার মাঝের রং দিন। আউটলাইনের রংসহ বাকি নিরেট রং গুনে সংখ্যাটি লিখে রাখুন; পরের ধাপে এটিই সবচেয়ে কাজের সংখ্যা। একই লোগোর JPEG ও PNG-র মধ্যে বাছতে হলে PNG নিন, কারণ JPG vs JPEG vs PNG-এ ব্যাখ্যা করা হয়েছে, JPEG কমপ্রেশন প্রতিটি কিনারার চারপাশে নয়েজ যোগ করে।

লেবেল আলাদা হলেও প্রতিটি ট্রেসার একই তিনটি প্রশ্ন করে। প্রথমটি: কয়টি রং রাখা হবে। PNG to SVG কনভার্টার-এ রঙের মোড বেছে নেয় রঙিন, গ্রেস্কেল নাকি সাদা-কালো, আর রঙের সংখ্যা ঠিক করে পিক্সেলগুলো কয়টি গুচ্ছে ভাগ হবে, 2 থেকে 64। লিখে রাখা সংখ্যার সঙ্গে মিলিয়ে দিন। বেশি দিলে ট্রেসার অ্যান্টি-অ্যালিয়াস করা কিনারার পিক্সেলকে আলাদা সরু রঙে ভাগ করে, যা প্রতিটি আকারের চারপাশে ম্লান হ্যালো হয়ে দেখা দেয়; কম দিলে দুটি ব্র্যান্ড রং এক হয়ে যায়।

দ্বিতীয় প্রশ্ন: কিনারা কীভাবে সামলানো হবে। মসৃণতা পিক্সেলের সিঁড়ির ধাপ গোল করে, আর ডিটেইল ঠিক করে কত ছোট দাগ আকার হিসেবে থাকবে। PNG পেজ ডিটেইল 70 ও মসৃণতা 40 দিয়ে শুরু হয়, যা পরিষ্কার এক্সপোর্টে ছোট কোণ রাখে। ধুলো ও এলোমেলো ফোঁটা এলে ডিটেইল কমান, কার্ভ কাঁপা দেখালে মসৃণতা বাড়ান, সরল কিনারার জ্যামিতিক লোগোর জন্য কার্ভ-এ সরলরেখা দিন, আর ব্লকি রাখতে চাওয়া পিক্সেল আর্টের জন্য পিক্সেল কিনারা দিন।

তৃতীয় প্রশ্ন শুধু সাদা-কালো ট্রেসিংয়ের জন্য: কালি ও কাগজের সীমারেখা কোথায়। থ্রেশহোল্ড 1 থেকে 254, ডিফল্ট 128। থ্রেশহোল্ডের চেয়ে গাঢ় পিক্সেল কালো হয়, হালকাগুলো ফাঁকা। সরু নীল বলপয়েন্টে লেখা সইয়ের জন্য এটি 160–180-এর দিকে বাড়ান যাতে হালকা দাগ টিকে থাকে; সামান্য ধূসর কাগজে মোটা মার্কারের আঁকার জন্য 100-এর দিকে কমান যাতে কাগজের টেক্সচার ফোঁটা না হয়। একবারে একটি সেটিং বদলে তুলনা করুন, কারণ প্রভাবগুলো পরস্পরের ওপর নির্ভর করে।

শুধু থাম্বনেইল দেখে থেমে যাবেন না। SVG ফাইলটি ব্রাউজারে খুলে সবচেয়ে সরু বাঁকে, যেমন অক্ষরের গোল অংশ বা কোনো সূচালো প্রান্তে, ৪০০–৮০০ % জুম করুন। ভালো ট্রেসে বাঁকগুলো মসৃণ থাকে এবং ডিজাইনে যেখানে কোণ আছে সেখানে কোণ ধারালো থাকে; খারাপ ট্রেসে দেখা যায় কাঁপা দাগ, খাঁজ আর গোল হয়ে যাওয়া প্রান্ত। এরপর Inkscape, Illustrator বা Figma-র মতো ভেক্টর এডিটরে ফাইলটি খুলে আউটলাইন বা নোড ভিউ চালু করুন। দুই রঙের সাধারণ লোগোতে সাধারণত কয়েকশো নোড লাগে; আপনার ফাইলে কয়েক হাজার নোড দেখালে বুঝবেন ট্রেসার নয়েজের পেছনে ছুটেছে, ফলে পাথ এডিট করা বা কাটা কষ্টকর হবে।

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

বিনামূল্যের ডেস্কটপ বিকল্প হলো Inkscape। PNG ইমপোর্ট করে সিলেক্ট করুন এবং Path > Trace Bitmap (Shift+Alt+B) খুলুন। Brightness cutoff-এর মতো সিঙ্গল-স্ক্যান মোডে একটি কালো পাথ তৈরি হয়, যা লাইন আর্টের জন্য ভালো; মাল্টিপল-স্ক্যান মোডে নির্দিষ্ট সংখ্যক রঙ বা গ্রে স্তরে স্তরে ট্রেস হয়। Inkscape-এর সাদা-কালো ট্রেসিং Potrace-এর ওপর তৈরি, যা Peter Selinger ২০০১ সালে প্রকাশ করা একটি ট্রেসিং লাইব্রেরি। Potrace নিজে একটি কমান্ড-লাইন প্রোগ্রাম; এটি PNG নয়, PBM, PGM, PPM বা BMP পড়ে, শুধু দুই-টোনের ছবি সামলায় এবং SVG, PDF, EPS বা DXF লেখে, তাই স্ক্যানের বড় ব্যাচ স্ক্রিপ্ট করে চালাতে এটি ভালো পছন্দ।

Adobe Illustrator-এ Illustrator CS6 থেকে পুরোনো Live Trace-এর জায়গায় এসেছে Image Trace। PNG প্লেস করে Window > Image Trace খুলুন, Black and White Logo, 3 Colors বা 16 Colors-এর মতো একটি প্রিসেট দিয়ে শুরু করুন, তারপর অ্যাডভান্সড অংশে Paths, Corners ও Noise ঠিক করুন। Expand ক্লিক না করা পর্যন্ত ট্রেস লাইভ থাকে; ক্লিক করলে তা সাধারণ এডিটযোগ্য পাথ হয়ে যায়। কোনো প্রোগ্রামই ইনস্টল করা না থাকলে ব্রাউজার কনভার্টারও একই প্রক্রিয়ায় রঙ কমায়, প্রান্ত খোঁজে ও কার্ভ ফিট করে; ছবি থেকে SVG কনভার্টার JPG, WebP ও HEIC-ও নেয় এবং SVG-র বদলে EPS, PDF বা DXF লিখতে পারে।

ওয়েবে SVG ২০০১ সাল থেকে W3C Recommendation, এবং বর্তমানের সব ব্রাউজার এটি <img> ট্যাগে, CSS ব্যাকগ্রাউন্ডে বা HTML-এ ইনলাইন হিসেবে দেখায়; ইনলাইনে হোভারে রঙও বদলানো যায়। ট্রেস করা লোগো সাধারণত রেটিনা স্ক্রিনের জন্য একাধিক সাইজের PNG-র জায়গায় একটি ছোট ফাইল হয়ে দাঁড়ায়। কাটিং মেশিনের জন্য SVG-ই সেই ফরম্যাট যা Cricut Design Space ও Silhouette Studio আশা করে: প্রতিটি ট্রেস করা আকৃতি একটি কাট পাথ হয়, আর মাল্টি-কালার ট্রেস আলাদা লেয়ার হিসেবে আসে যা ভিন্ন ভিন্ন ভিনাইল রঙে কাটা যায়। লেজার কাটার ও CNC সফটওয়্যার সাধারণত DXF পছন্দ করে, যা একই ট্রেসিং সেটিংসে PNG থেকে DXF তৈরি করে।

প্রিন্ট শপ ভেক্টর আর্টওয়ার্ক চায়, কারণ প্রেস, এমব্রয়ডারি ডিজিটাইজার বা সাইন কাটারের পিক্সেল নয়, প্রান্ত দরকার; স্টিকার, টি-শার্ট বা ব্যানারের জন্য ট্রেস করা SVG প্রায়ই তা পূরণ করে। তবুও এটি একটি আনুমানিক রূপ: কার্ভগুলো আন্দাজে বসানো, রঙ পিক্সেল থেকে গড় করা, আর টেক্সট আউটলাইন করা। তাই কোনো প্রতিষ্ঠানের লোগো ট্রেস করার আগে যিনি বানিয়েছেন তাঁকে জিজ্ঞেস করুন। ডিজাইনার বা এজেন্সির কাছে প্রায় সবসময়ই সঠিক কার্ভ, নামযুক্ত রঙ ও ফন্টসহ মূল AI, EPS, PDF বা SVG থাকে, পাঠাতে তাঁদের এক মিনিট লাগে। মূল ফাইল হারিয়ে গেলে, লোগো শুধু স্ক্যান করা লেটারহেডে টিকে থাকলে, বা আর্টওয়ার্ক আপনার নিজের আঁকা হলে ট্রেসিংই সঠিক উপায়।