PNG کو SVG میں کیسے تبدیل کریں: لوگو، آئیکن اور لائن آرٹ

PNG ایک ریسٹر امیج ہے: پکسلز کا ایک مقررہ گرڈ، جس کے ہر پکسل کا ایک رنگ اور چاہیں تو شفافیت کی قدر ہوتی ہے۔ 500 × 500 px کے لوگو میں ٹھیک 250,000 ایسے چوکور خانے ہوتے ہیں اور بس، اس لیے اسے پوسٹر کے سائز تک بڑا کرنے سے ہر خانہ بڑا ہوتا ہے یا ان کے درمیان کی جگہیں دھندلی ہو جاتی ہیں۔ SVG ایک ویکٹر امیج ہے، یعنی ایسی ٹیکسٹ فائل جس میں <path>، <circle> اور <rect> جیسی شکلیں نقاط اور فل رنگوں کے ساتھ درج ہوتی ہیں۔ براؤزر یا کٹنگ مشین ان شکلوں کو جس سائز میں ضرورت ہو دوبارہ بناتی ہے، اسی لیے ویکٹر لوگو فون کی اسکرین اور نمائش کے بینر دونوں پر صاف رہتا ہے۔

ویکٹر سے ریسٹر میں جانا آسان ہے کیونکہ رینڈرر شکلوں کو پکسلز میں پینٹ کر دیتا ہے؛ SVG سے 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 لیں، کیونکہ JPEG کمپریشن ہر کنارے کے گرد شور ڈالتی ہے، جیسا کہ JPG بمقابلہ JPEG بمقابلہ PNG میں بیان ہے۔

ہر ٹریسر وہی تین سوال پوچھتا ہے، چاہے لیبل مختلف ہوں۔ پہلا یہ کہ کتنے رنگ رکھنے ہیں۔ PNG سے SVG کنورٹر میں رنگ موڈ کے ذریعے رنگین، گرے اسکیل اور سیاہ و سفید میں سے انتخاب ہوتا ہے، اور رنگوں کی تعداد طے کرتی ہے کہ پکسلز کتنے کلسٹرز میں تقسیم ہوں، 2 سے 64 تک۔ اسے اس تعداد کے برابر رکھیں جو آپ نے لکھی تھی۔ بہت زیادہ رکھیں تو ٹریسر اینٹی ایلیاسڈ کنارے کے پکسلز کو الگ باریک رنگوں میں بانٹ دیتا ہے، جو ہر شکل کے گرد ہلکے ہالے کی صورت میں نظر آتا ہے؛ بہت کم رکھیں تو برانڈ کے دو رنگ ایک میں مل جاتے ہیں۔

دوسرا سوال یہ ہے کہ کناروں کے ساتھ کیا کرنا ہے۔ ہمواری پکسلز سے بننے والی سیڑھی نما کناروں کو گول کرتی ہے، اور تفصیل طے کرتی ہے کہ کتنا چھوٹا دھبہ بھی شکل بن سکتا ہے۔ PNG صفحہ تفصیل 70 اور ہمواری 40 سے شروع ہوتا ہے، جو صاف ایکسپورٹ پر چھوٹے کونے برقرار رکھتا ہے۔ اگر گرد اور بے ربط نقطے آئیں تو تفصیل کم کریں، خم لہراتے لگیں تو ہمواری بڑھائیں، اور سیدھے کناروں والے جیومیٹرک لوگو کے لیے خم کو سیدھی لکیریں پر یا بلاکی رہنے والے پکسل آرٹ کے لیے پکسل کنارے پر رکھیں۔

تیسرا سوال صرف سیاہ و سفید ٹریسنگ پر لاگو ہوتا ہے: روشنائی اور کاغذ کے درمیان لکیر کہاں کھینچنی ہے۔ تھریشولڈ 1 سے 254 تک چلتا ہے اور طے شدہ قدر 128 ہے۔ تھریشولڈ سے گہرے پکسلز سیاہ بنتے ہیں، ہلکے خالی۔ پتلے نیلے بال پوائنٹ سے لکھے دستخط کے لیے اسے 160–180 کی طرف بڑھائیں تاکہ ہلکی لکیریں بچ جائیں؛ ہلکے گرے کاغذ پر موٹے مارکر کی ڈرائنگ کے لیے اسے 100 کی طرف کم کریں تاکہ کاغذ کی ساخت دھبے نہ بنے۔ ایک وقت میں ایک سیٹنگ بدلیں اور موازنہ کریں، کیونکہ ان کے اثرات ایک دوسرے پر اثر ڈالتے ہیں۔

صرف تھمب نیل پر نہ رکیں۔ SVG کو براؤزر میں کھولیں اور سب سے تنگ خم پر، مثلاً حرف کے گول حصے یا نوک پر، 400–800 % زوم کریں۔ اچھی ٹریس میں ہموار قوسیں نظر آتی ہیں اور جہاں ڈیزائن میں کونے ہیں وہاں تیز کونے؛ کمزور ٹریس میں لہریں، گڑھے اور گول نوکیں دکھائی دیتی ہیں۔ پھر فائل کو Inkscape، Illustrator یا Figma جیسے ویکٹر ایڈیٹر میں کھولیں اور آؤٹ لائن یا نوڈ ویو آن کریں۔ دو رنگوں کے سادہ لوگو کو عموماً چند سو نوڈ درکار ہوتے ہیں؛ اگر آپ کے میں کئی ہزار ہیں تو ٹریسر شور کی پیروی کرتا رہا ہے اور پاتھ ایڈٹ یا کٹ کرنا تکلیف دہ ہوگا۔

فائل سائز فوری جانچ کا ذریعہ ہے۔ سادہ لوگو کا بہتر بنایا گیا SVG عموماً چند کلوبائٹ سے چند دس کلوبائٹ ہوتا ہے، اور اکثر اپنی PNG سے چھوٹا۔ اگر ٹریس شدہ فائل سورس PNG سے کئی گنا بڑی ہو تو عموماً مطلب ہوتا ہے کہ رنگ بہت زیادہ ہیں، تفصیل بہت زیادہ ہے، یا ایسی فوٹو ٹریس کی گئی جو نہیں ہونی چاہیے تھی۔ SVG کو بہتر بنائیں آن رکھیں، کیونکہ یہ بغیر نظر آنے والے فرق کے کوآرڈینیٹس راؤنڈ کرتا اور پاتھ ملاتا ہے، اور آخر میں آرٹ ورک کو پوسٹر سائز تک بڑا اور فیویکون سائز تک چھوٹا کر کے دیکھیں کہ دونوں پر صاف پڑھا جاتا ہے۔

مفت ڈیسک ٹاپ آپشن Inkscape ہے۔ PNG امپورٹ کریں، اسے منتخب کریں اور Path > Trace Bitmap (Shift+Alt+B) کھولیں۔ Brightness cutoff جیسے سنگل اسکین موڈ ایک سیاہ پاتھ بناتے ہیں، جو لائن آرٹ کے لیے موزوں ہے؛ ملٹی اسکین موڈ رنگوں یا گرے شیڈز کی مقررہ تعداد کو تہوں کی صورت میں ٹریس کرتے ہیں۔ Inkscape کی سیاہ و سفید ٹریسنگ Potrace پر مبنی ہے، جو ایک ٹریسنگ لائبریری ہے اور Peter Selinger نے 2001 میں جاری کی تھی۔ Potrace خود ایک کمانڈ لائن پروگرام ہے جو PNG کے بجائے PBM، PGM، PPM یا BMP پڑھتا ہے، صرف دو رنگی تصاویر سنبھالتا ہے اور SVG، PDF، EPS یا DXF لکھتا ہے، اس لیے اسکینز کے بڑے بیچ اسکرپٹ سے چلانے کے لیے بہترین ہے۔

Adobe Illustrator میں Image Trace نے Illustrator CS6 میں پرانے Live 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 2001 سے W3C Recommendation ہے اور ہر موجودہ براؤزر اسے <img> ٹیگ میں، CSS بیک گراؤنڈ کے طور پر یا HTML میں ان لائن دکھاتا ہے، جہاں ہوور پر اس کے رنگ بھی بدل سکتے ہیں۔ ٹریس کیا ہوا لوگو عموماً ریٹینا اسکرینوں کے لیے PNG کے کئی سائزوں کی جگہ ایک چھوٹی فائل لے لیتا ہے۔ کٹنگ مشینوں کے لیے SVG وہ فارمیٹ ہے جو Cricut Design Space اور Silhouette Studio چاہتے ہیں: ہر ٹریس شدہ شکل کٹ پاتھ بن جاتی ہے اور ملٹی کلر ٹریس الگ تہوں میں آتا ہے جنہیں آپ مختلف رنگوں کے وینائل سے کاٹ سکتے ہیں۔ لیزر کٹر اور CNC سافٹ ویئر عموماً DXF کو ترجیح دیتے ہیں، جو PNG سے DXF انہی ٹریسنگ سیٹنگز سے بناتا ہے۔

پرنٹ شاپس ویکٹر آرٹ ورک مانگتی ہیں کیونکہ پریس، ایمبرائیڈری ڈیجیٹائزر یا سائن کٹر کو پکسل نہیں، کنارے چاہییں، اور ٹریس شدہ SVG اسٹیکرز، ٹی شرٹس یا بینر کے لیے اکثر کافی ہوتی ہے۔ پھر بھی یہ اندازہ ہی ہے: کرویں اندازے سے فٹ ہوتی ہیں، رنگ پکسلز کا اوسط ہوتے ہیں اور متن آؤٹ لائن بن جاتا ہے۔ اس لیے کمپنی کا لوگو ٹریس کرنے سے پہلے اسے بنانے والے سے پوچھیں۔ ڈیزائنر یا ایجنسی کے پاس تقریباً ہمیشہ اصل AI، EPS، PDF یا SVG ہوتی ہے جس میں درست کرویں، نامزد رنگ اور فونٹ ہوتے ہیں، اور بھیجنے میں انہیں ایک منٹ لگتا ہے۔ ٹریسنگ تب درست ہے جب اصل فائل گم ہو، لوگو صرف اسکین شدہ لیٹر ہیڈ پر بچا ہو، یا آرٹ ورک آپ کی اپنی ڈرائنگ ہو۔