فگما (Figma)، کینوا (Canva) یا ورڈپریس (WordPress) میں اپنی SVG فائلوں کو کیسے امپورٹ اور ایڈٹ کریں؟

آپ کے پاس SVG ہے۔ اور اب؟

زیادہ تر کنورٹرز ڈاؤن لوڈ بٹن پر رک جاتے ہیں۔ تاہم، فائل بیکار ہے اگر یہ ڈاؤن لوڈ فولڈر میں رہے۔ ایک ڈیزائنر اسے فگما میں برانڈ گائیڈ لائنز لاگو کرنے کے لیے کھولتا ہے۔ ایک کمیونٹی مینیجر اسے کینوا میں پوسٹ بنانے کے لیے ڈراپ کرتا ہے۔ ایک ویب ڈویلپر اسے ہیڈر لوگو کے لیے ورڈپریس میں لگاتا ہے۔ یہ اگلا قدم ہی ثابت کرتا ہے کہ PixelToPath ایک حقیقی ورک فلو کا حصہ ہے، محض ایک ڈیمو نہیں۔

ایک PixelToPath SVG کوئی جامد تصویر نہیں ہے۔ یہ راستوں (paths) کا مجموعہ ہے: ہر شکل کا ایک فل (رنگ) ہوتا ہے، اور ممکنہ طور پر ایک آؤٹ لائن بھی۔ لوگو کے نیلے رنگ کو برگنڈی میں تبدیل کرنا، آئیکن کو الگ کرنا، یا 1080x1920 کی سٹوری کے لیے بڑا کرنا: یہ سب اس ٹول میں کیا جا سکتا ہے جو آپ پہلے سے استعمال کر رہے ہیں، بغیر السٹریٹر (Illustrator) کے۔

فگما، کینوا اور ورڈپریس کو یہ فارمیٹ کیوں پسند ہے؟

PNG اور JPG امپورٹ ہونے کے بعد بٹ میپس (bitmaps) بن جاتے ہیں۔ فگما میں PNG لوگو کا رنگ تبدیل کرنے کا مطلب اس پر ایک لیئر لگانا ہے، نہ کہ پاتھ کا رنگ تبدیل کرنا۔ کینوا رنگ تبدیل کرنے کے آپشنز نہیں دے گا۔ ورڈپریس ایک بھاری فائل پیش کرے گا، جو ریٹینا (Retina) ڈسپلے پر دھندلی ہو گی۔ SVG ان تینوں مسائل کو ایک ساتھ حل کرتا ہے۔

عملی طور پر، PixelToPath سے حاصل کردہ SVG آپ کو دیتا ہے:

• قابل ترمیم پاتھ: فی شکل ایک رنگ، جسے فگما (Fill) یا کینوا (کلر پیلیٹ) میں تبدیل کیا جا سکتا ہے۔
• ایک ہلکی فائل، کینوا کی 3 MB کی حد سے کافی کم، اور ورڈپریس سائٹ پر PNG @2x سے زیادہ تیزی سے لوڈ ہونے والی۔
• فیویکون (favicon)، لنکڈ ان بینر یا بینر اسٹینڈ پر یکساں نفاست: صرف ایک فائل۔
• ایک حتمی ڈیلیوری ایبل جسے آپ کلائنٹ کو بھیج سکتے ہیں: وہ اسے اپنے موجودہ ٹول میں کھولتا ہے، نہ کہ Creative Cloud میں۔

فگما (Figma): SVG امپورٹ کریں اور رنگ تبدیل کریں

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

1. PixelToPath سے .svg ڈاؤن لوڈ کریں اور اپنی فگما فائل کھولیں۔
2. فائل کو ایکسپلورر سے براہ راست کینوس پر گھسیٹیں۔ متبادل: SVG لگانے کے لیے File → Place image, یا Ctrl+Shift+K (Mac پر Cmd+Shift+K) استعمال کریں۔
3. لیئر ایک گروپ کے طور پر ظاہر ہوتی ہے۔ اس کے اندر جانے کے لیے ڈبل کلک کریں، یا رائٹ کلک کریں → Ungroup (Shift+Ctrl+G / Shift+Cmd+G) اگر آپ اشکال کو الگ الگ ہینڈل کرنا چاہتے ہیں۔
4. ایک پاتھ کو منتخب کریں۔ دائیں پینل میں، Fill سیکشن میں، رنگ کے پیلیٹ پر کلک کریں: hex, swatches, eyedropper. پوری شکل بدل جاتی ہے، کنارے تیز رہتے ہیں۔
5. مونوکروم لوگو کے لیے، گروپ کی تمام اشکال منتخب کریں اور ایک ہی رنگ لاگو کریں۔ اگر ڈیلیوری ایبل اب ویکٹر نہیں ہے تو ایکسپورٹ سیکشن سے SVG، PNG یا PDF کے طور پر ایکسپورٹ کریں۔

اگر فگما ویکٹر لیئرز کے بجائے ایک فلیٹ تصویر دکھاتا ہے، تو فائل میں بٹ میپ (ایک شامل شدہ PNG) تھا۔ PixelToPath کے 'سیاہ و سفید' یا 'پوسٹر' پری سیٹس کے ساتھ ایسا نہیں ہوتا۔ تصویر (Photo) موڈ کے بجائے ان دونوں میں سے کسی ایک کا استعمال کرتے ہوئے اصل کو دوبارہ تبدیل کریں۔

کینوا (Canva): SVG ڈراپ کریں اور رنگ تبدیل کریں

کینوا فری اور پرو دونوں ورژن میں SVG قبول کرتا ہے۔ رنگ تبدیل کرنا تب کام کرتا ہے جب فائل سادہ ہو: ٹھوس رنگ، کم نوڈس (nodes)، کوئی گریڈینٹس نہیں۔ PixelToPath بالکل یہی 'پوسٹر' یا 'سیاہ و سفید' موڈ کے ساتھ تیار کرتا ہے۔

1. کینوا میں، ایک ڈیزائن کھولیں۔ بایاں پینل → Uploads → Upload files. اپنی .svg فائل منتخب کریں (3 MB سے کم؛ PixelToPath ایکسپورٹ اس سے کہیں کم ہوتا ہے)۔
2. ایک بار جب فائل آپ کے اپ لوڈز میں آجائے، تو اسے صفحے پر گھسیٹیں۔ ہینڈلز کے ذریعے اس کا سائز تبدیل کریں: ویکٹر تیز رہتا ہے، بشمول سٹوری یا A4 فارمیٹ میں۔
3. SVG پر کلک کریں۔ ٹول بار میں، رنگ کے ڈبے ظاہر ہوتے ہیں، فائل کے ہر رنگ کے لیے ایک۔ ایک ڈبے پر کلک کریں، نیا رنگ منتخب کریں: کینوا اسے اس رنگ کی تمام اشکال پر لاگو کر دیتا ہے۔
4. اگر کوئی رنگ کا ڈبہ ظاہر نہیں ہوتا ہے، تو SVG بہت پیچیدہ ہے (گریڈینٹس، بہت زیادہ رنگ، فوٹو ٹائپ پاتھس)۔ PixelToPath پر واپس جائیں، 'پوسٹر' یا 'سیاہ و سفید' موڈ پر سوئچ کریں، دوبارہ ایکسپورٹ کریں، دوبارہ امپورٹ کریں۔

کینوا SVG 1.1 پروفائل، ایک ہی رنگ کی گروپ شدہ اشکال، اور صفر ٹیکسچر تجویز کرتا ہے۔ PixelToPath کے لوگو پری سیٹس پہلے ہی ان پابندیوں کا احترام کرتے ہیں۔ فائل کو 'تیار' کرنے کے لیے السٹریٹر (Illustrator) سے گزرنے کی ضرورت نہیں ہے۔

ورڈپریس (WordPress): سیکیورٹی خامی پیدا کیے بغیر SVG اپ لوڈز کی اجازت دیں

ورڈپریس ڈیفالٹ طور پر SVG کو مسترد کرتا ہے، اور یہ کوئی وہم نہیں ہے۔ SVG ایک XML فائل ہے: اس میں جاوا اسکرپٹ (JavaScript)، بیرونی اینٹیٹیز، اور XSS پے لوڈ شامل ہو سکتا ہے۔ ایک وزیٹر، یا سمجھوتہ شدہ ایڈیٹر اکاؤنٹ، جو نقصان دہ SVG اپ لوڈ کرتا ہے، ایڈمن پینل میں کوڈ چلا سکتا ہے۔ اسی لیے اسے روکا گیا ہے۔ فارمیٹ کی اجازت دینا اور فائل کو صاف کرنا ضروری ہے۔

صرف functions.php میں image/svg+xml شامل نہ کریں۔ فائل کو صاف کیے بغیر، آپ ایک خامی کھول رہے ہیں۔ محفوظ طریقہ: ایک مینٹینڈ پلگ ان جو اسکرپٹس، آن لوڈ ایونٹس اور XML اینٹیٹیز کو صاف کرتا ہے۔ Safe SVG (از 10up)، ایک ملین سے زیادہ تنصیبات کے ساتھ بہترین ہے۔

1. ورڈپریس ایڈمن میں: Plugins → Add New پر جائیں۔ Safe SVG (پبلشر: 10up) تلاش کریں۔ انسٹال اور ایکٹیویٹ کریں۔
2. Settings → Media میں جائیں۔ SVG اپ لوڈ کو ایڈمنسٹریٹرز (یا بھروسہ مند کرداروں) تک محدود کریں۔ اگر سائٹ پر متعدد تعاون کنندگان ہیں تو فارمیٹ کو تمام آتھر اکاؤنٹس کے لیے نہ کھولیں۔
3. Media → Add New پر جائیں۔ PixelToPath .svg فائل کو ڈراپ کریں۔ پلگ ان امپورٹ کے وقت اسے صاف کرتا ہے اور میڈیا لائبریری میں پریویو دکھاتا ہے، جو ورڈپریس مقامی طور پر نہیں کرتا۔
4. کسی پوسٹ یا پیج میں، امیج (Image) بلاک داخل کریں اور SVG منتخب کریں۔ ہیڈر لوگو کے لیے، Customizer / Site Identity استعمال کریں، یا تھیم ٹیمپلیٹ (سائٹ ایڈیٹر) میں امیج بلاک استعمال کریں۔
5. ڈویلپر کا متبادل: میڈیا لائبریری استعمال نہ کریں۔ فائل کو تھیم میں رکھیں (assets/logo.svg) اور اسے ٹیمپلیٹ میں ریفرنس کریں، یا CSS کے ذریعے اسٹائل کرنے کے لیے اسے ان لائن کریں۔ کوئی اپ لوڈ نہیں، اس لیے میڈیا لائبریری پر حملے کا کوئی خطرہ نہیں۔

Safe SVG یہ بھی محدود کر سکتا ہے کہ کسے اپ لوڈ کرنے کا حق حاصل ہے۔ پلگ ان کو اپ ٹو ڈیٹ رکھیں: فائل کی صفائی اصل کنٹرول ہے، نہ کہ صرف 'SVG کی اجازت دیں' کا چیک باکس۔

ان ٹولز میں کون سا PixelToPath SVG استعمال کریں؟

ایڈیٹر وہ سب قبول کر لیتا ہے جو آپ اسے دیتے ہیں۔ ایک غلط پری سیٹ امپورٹ کے وقت مسئلہ بنتا ہے: بہت زیادہ اشکال، ناقابل تغیر رنگ، رد کی گئی فائل۔

• لوگو، آئیکن، لیٹرنگ: 'سیاہ و سفید' یا 'پوسٹر'۔ یہ ٹھوس رنگ ہیں، فگما اور کینوا انہیں ایک کلک میں دوبارہ رنگ دیتے ہیں۔
• اگر آپ رنگ تبدیل کرنے کا ارادہ رکھتے ہیں تو تصویر (Photo) موڈ سے گریز کریں۔ یہ موڈ لاتعداد چھوٹی اشکال بناتا ہے؛ کینوا اکثر کوئی مفید کلر پیلیٹ نہیں دکھائے گا۔
• تبدیل کرنے سے پہلے اصل کو کراپ کریں: کم بیک گراؤنڈ، کم نوڈس، فگما لیئر میں زیادہ قابل مطالعہ SVG۔
• ہر استعمال کے لیے ایک مختلف قسم: فگما (برانڈ گائیڈ لائنز) کے لیے مونوکروم SVG، کینوا (پوسٹ) کے لیے رنگین SVG، ورڈپریس (ہیڈر) کے لیے وہی صاف فائل۔

یہ ورک فلو روزمرہ کی زندگی کو کہاں بدلتا ہے

جیسے ہی SVG ٹول میں آجاتا ہے، آپ ہر تبدیلی پر دوبارہ کنورٹ کرنا بند کر دیتے ہیں:

• فگما برانڈ گائیڈ لائنز: کلائنٹ کا PNG ایک ایسا جزو بن جاتا ہے جسے آپ دوبارہ ڈرائنگ کے بغیر رنگین کر سکتے ہیں (پرائمری، الٹا، مونوکروم)
• کینوا پوسٹس: ایک ہی SVG، چھ مہم کے رنگ، واضح سٹوریز اور کیرول (carousels)
• ورڈپریس لوگو: ہیڈر میں ایک فائل، موبائل اور ریٹینا پر واضح، پرانے PNG سے ہلکی
• فری لانس ڈیلیوری ایبل: آپ SVG اور فگما / کینوا دستی فراہم کرتے ہیں۔ کلائنٹ اب پھنسا ہوا نہیں ہے۔
• انٹرفیس آئیکنز: انہیں فگما میں ایک ساتھ امپورٹ کریں، 24 px گرڈ پر سیدھ میں لائیں، سیٹ ایکسپورٹ کریں

تصاویر کے لیے PNG کو اپنے پاس رکھیں۔ ان تمام چیزوں کے لیے جنہیں رنگ بدلنا ہے یا صاف رہنا ہے، PixelToPath + فگما / کینوا / ورڈپریس کا مجموعہ کافی ہے۔