Figma, Canva, WordPress-এ SVG ইমপোর্ট করুন

ছবি থেকে ইমপোর্ট করার জন্য প্রস্তুত SVG পর্যন্ত (৩টি ধাপ)

ভেক্টর ফাইল ছাড়া, Figma, Canva এবং WordPress-এ সম্পাদনা করার মতো কিছুই থাকে না। PixelToPath এই ফাইলটি এক মিনিটে তৈরি করে।

1

📁

ছবি রূপান্তর করুন

PixelToPath-এ PNG বা JPG আপলোড করুন। পরে রং পরিবর্তন করার মতো লোগো বা আইকনের জন্য ব্ল্যাক অ্যান্ড হোয়াইট (Black & White) বা পোস্টার (Poster) বেছে নিন: সলিড কালার, ভেক্টরাইজড ছবি নয়।

2

💾

SVG ডাউনলোড করুন

প্রিভিউ দেখুন, তারপর .svg ফাইলটি সংরক্ষণ করুন। এটি একটি আসল পাথ, ছদ্মবেশী PNG নয়: Figma এবং Canva এর রং পরিবর্তন করতে পারবে।

3

🎨

আপনার টুলে ইমপোর্ট করুন

ফাইলটি Figma-তে টেনে আনুন, Canva-তে আপলোড করুন, বা WordPress-এ মিডিয়াতে (ক্লিন করা ফাইল) রাখুন। তিনটি পদ্ধতি নিচে বিস্তারিত আলোচনা করা হয়েছে।

প্রথমে আমার SVG তৈরি করুন →

কনভার্টারের প্রকৃত ফলাফল

আগে · মূল 5 KB

পরে · SVG সাদাকালো প্রিসেট · 2 KB

এই টুল দিয়ে করা একটি প্রকৃত রূপান্তর: বাঁ দিকের মূল PNG-কে সাদাকালো প্রিসেট দিয়ে ট্রেস করে ডান দিকের SVG তৈরি হয়েছে — একটি ভেক্টর ফাইল যা যেকোনো জুম স্তরে ঝকঝকে থাকে।

আপনি SVG পেয়েছেন। এখন কী করবেন?

বেশিরভাগ কনভার্টার ডাউনলোড বোতামেই থেমে যায়। কিন্তু ফাইলটি ডাউনলোড ফোল্ডারে পড়ে থাকলে কোনো কাজে আসে না। একজন ডিজাইনার ব্র্যান্ডিং যুক্ত করতে এটি Figma-তে খোলেন। একজন কমিউনিটি ম্যানেজার পোস্ট তৈরি করতে Canva-তে রাখেন। একজন ডেভেলপার এটি WordPress-এর হেডার লোগো হিসেবে যুক্ত করেন। এই পরবর্তী ধাপটি প্রমাণ করে যে PixelToPath শুধু ডেমো নয়, বরং একটি বাস্তব ওয়ার্কফ্লোতে ফিট করে।

PixelToPath-এর SVG কোনো স্থির ছবি নয়। এটি কয়েকটি পাথের একটি সেট: প্রতিটি শেপের একটি ফিল থাকে, এবং সম্ভবত একটি স্ট্রোক। লোগোর নীল রংটি পরিবর্তন করে মেরুন করা, আইকন আলাদা করা, বা ১০৮০x১৯২০ স্টোরির জন্য বড় করা: এসব কিছুই আপনি যে টুলটি ব্যবহার করছেন তাতেই করা যায়, Illustrator-এ ফিরে না গিয়ে।

কেন Figma, Canva এবং WordPress এই ফরম্যাটটি পছন্দ করে

PNG এবং JPG ইমপোর্ট করার পর বিটম্যাপে পরিণত হয়। Figma-তে একটি PNG লোগোর রং পরিবর্তন করার অর্থ হলো এর উপর একটি লেয়ার বসানো, পাথের রং পরিবর্তন করা নয়। Canva রঙের প্যালেট দেখাবে না। WordPress একটি ভারী ফাইল সার্ভ করবে যা রেটিনা ডিসপ্লেতে অস্পষ্ট দেখায়। SVG এই তিনটি সমস্যার একযোগে সমাধান করে।

বিশেষভাবে, PixelToPath থেকে পাওয়া একটি SVG আপনাকে দেয়:

সম্পাদনাযোগ্য পাথ: প্রতি শেপে একটি রং, যা Figma (Fill) বা Canva (কালার প্যালেট)-তে পরিবর্তনযোগ্য
একটি হালকা ফাইল, যা Canva-র ৩ মেগাবাইট সীমার অনেক নিচে, এবং WordPress সাইটে @2x PNG-র চেয়ে দ্রুত লোড হয়
ফ্যাভিকন, LinkedIn ব্যানার বা ক্যাকিমোনো (kakemono)-র জন্য সমান স্বচ্ছতা: মাত্র একটি ফাইল
ক্লায়েন্টকে পাঠানোর মতো একটি ডেলিভারেবল: তারা ক্রিয়েটিভ ক্লাউড-এর পরিবর্তে তাদের কাছে থাকা টুল দিয়েই এটি খুলতে পারবে

তিনটি গন্তব্য, একটি ফাইল

SVG-এর কোনো পরিবর্তন হয় না। শুধু গন্তব্যের ইন্টারফেস পরিবর্তন হয়। আপনার টুল বেছে নিন এবং ক্লিকগুলো অনুসরণ করুন।

Figma

ড্র্যাগ অ্যান্ড ড্রপ, আনগ্রুপ, ফিল (fill) পরিবর্তন। সবচেয়ে সাধারণ ডিজাইনের ওয়ার্কফ্লো।

Canva

আপলোড করুন, ডিজাইনের উপর রাখুন, কালার প্যালেট দিয়ে রং পরিবর্তন করুন। পোস্ট এবং প্রেজেন্টেশনের জন্য আদর্শ।

WordPress

নিরাপদভাবে আপলোড অনুমোদন করুন, তারপর সাইটে লোগো বা আইকনটি সন্নিবেশ করুন।

Figma: SVG ইমপোর্ট করা এবং রং পরিবর্তন করা

Figma একটি SVG-কে ছবির পরিবর্তে ভেক্টরের গ্রুপ হিসেবে ইমপোর্ট করে। এটাই সবচেয়ে বড় সুবিধা: প্রতিটি শেপ একটি লেয়ার হিসেবে থাকে যা আপনি রং করতে, সরাতে বা লুকাতে পারেন。

PixelToPath থেকে .svg ডাউনলোড করুন এবং আপনার Figma ফাইলটি খুলুন।
ফাইল এক্সপ্লোরার থেকে ফাইলটি সরাসরি ক্যানভাসে টেনে আনুন। বিকল্প: SVG প্লেস করতে File → Place image, অথবা Ctrl+Shift+K (ম্যাকে Cmd+Shift+K) ব্যবহার করুন।
লেয়ারটি একটি গ্রুপ হিসেবে দেখা যাবে। এর ভিতরে প্রবেশ করতে ডাবল-ক্লিক করুন, অথবা প্রতিটি শেপ আলাদাভাবে নিয়ন্ত্রণ করতে ডান-ক্লিক → Ungroup (Shift+Ctrl+G / Shift+Cmd+G) করুন।
একটি পাথ নির্বাচন করুন। ডানদিকের প্যানেলে, Fill সেকশনে রঙের প্যালেটে ক্লিক করুন: হেক্স (hex), সোয়াচ (swatch), আইড্রপার (eyedropper)। পুরো শেপটি পরিবর্তিত হবে, কিন্তু প্রান্তগুলো স্পষ্ট থাকবে।
মনোক্রোম লোগোর জন্য, গ্রুপের সব শেপ নির্বাচন করুন এবং একটি রং প্রয়োগ করুন। ডেলিভারেবলটি আর ভেক্টর না থাকলে Export সেকশন থেকে SVG, PNG বা PDF হিসেবে এক্সপোর্ট করুন।

যদি Figma ভেক্টর লেয়ারের পরিবর্তে একটি ফ্ল্যাট ছবি দেখায়, তবে ফাইলে একটি বিটম্যাপ (এনক্যাপসুলেটেড PNG) ছিল। PixelToPath-এর ব্ল্যাক অ্যান্ড হোয়াইট বা পোস্টার প্রিসেটে এমনটা হয় না। ফটো (Photo) মোডের পরিবর্তে এই দুটির যেকোনো একটি মোড দিয়ে আসল ছবিটিকে আবার রূপান্তর করুন।

Canva: SVG যোগ করা এবং রং পরিবর্তন করা

Canva ফ্রি এবং প্রো উভয় সংস্করণেই SVG সমর্থন করে। ফাইলটি সহজ হলে রং পরিবর্তন করা যায়: সলিড রং, কম নোড, কোনো গ্রেডিয়েন্ট নেই। PixelToPath-এর পোস্টার বা ব্ল্যাক অ্যান্ড হোয়াইট ঠিক এটাই তৈরি করে।

Canva-তে একটি ডিজাইন খুলুন। বাম প্যানেল → Uploads → Upload files। আপনার .svg ফাইলটি বেছে নিন (৩ মেগাবাইটের নিচে; PixelToPath এক্সপোর্ট এর চেয়ে অনেক ছোট হয়)।
ফাইলটি আপলোড হয়ে গেলে, এটি পেজে টেনে আনুন। হ্যান্ডেলগুলো দিয়ে এর আকার পরিবর্তন করুন: ভেক্টরটি স্টোরি বা A4 ফরম্যাটেও স্পষ্ট থাকে।
SVG-তে ক্লিক করুন। টুলবারে রঙের প্যালেট আসবে, ফাইলের প্রতিটি রঙের জন্য একটি। একটি প্যালেটে ক্লিক করুন, নতুন রং বেছে নিন: Canva সেই রঙের সব শেপে নতুন রং প্রয়োগ করবে।
যদি কোনো রঙের প্যালেট দেখা না যায়, তবে SVG-টি খুব জটিল (গ্রেডিয়েন্ট, অনেক রং, ফটো-স্টাইলের পাথ)। PixelToPath-এ ফিরে যান, পোস্টার বা ব্ল্যাক অ্যান্ড হোয়াইট মোডে পরিবর্তন করুন, আবার এক্সপোর্ট এবং ইমপোর্ট করুন।

Canva SVG 1.1 প্রোফাইল, একই রঙের গ্রুপ করা শেপ এবং শূন্য টেক্সচারের সুপারিশ করে। PixelToPath-এর লোগো প্রিসেটগুলো ইতোমধ্যে এই শর্তগুলো পূরণ করে। ফাইল 'প্রস্তুত' করতে Illustrator ব্যবহারের প্রয়োজন নেই।

WordPress: ঝুঁকি তৈরি না করে SVG আপলোড অনুমোদন করা

WordPress ডিফল্টভাবে SVG সমর্থন করে না, এবং এর একটি যুক্তিসঙ্গত কারণ আছে। SVG হলো XML: এতে JavaScript, এক্সটার্নাল এন্টিটি বা XSS পে-লোড থাকতে পারে। কোনো ভিজিটর, বা হ্যাক হওয়া এডিটর অ্যাকাউন্ট যদি ক্ষতিকারক SVG আপলোড করে, তবে সে অ্যাডমিনে কোড চালাতে পারে। এজন্যই এটি ব্লক করা থাকে। আপনাকে ফরম্যাটটি অনুমোদন করতে হবে এবং ফাইলটি ক্লিন করতে হবে।

functions.php-এ শুধু image/svg+xml যোগ করবেন না। ফাইলটি ক্লিন না করলে আপনি একটি দুর্বলতা তৈরি করবেন। নিরাপদ পদ্ধতি: একটি আপডেটেড প্লাগইন যা স্ক্রিপ্ট, অনলোড ইভেন্ট এবং XML এন্টিটি মুছে ফেলে। Safe SVG (10up) এর এক মিলিয়নেরও বেশি ইনস্টলেশন রয়েছে।

WordPress অ্যাডমিনে: Plugins → Add New। Safe SVG (নির্মাতা: 10up) খুঁজুন। ইনস্টল এবং অ্যাক্টিভেট করুন।
Settings → Media-তে যান। SVG আপলোডের অনুমতি শুধু অ্যাডমিনিস্ট্রেটরদের (বা বিশ্বস্ত রোলদের) জন্য সীমাবদ্ধ করুন। সাইটে একাধিক কন্ট্রিবিউটর থাকলে সবার জন্য এটি উন্মুক্ত করবেন না।
Media → Add New। PixelToPath .svg ফাইলটি ড্রপ করুন। প্লাগইনটি ইমপোর্টের সময় এটি ক্লিন করে এবং লাইব্রেরিতে একটি প্রিভিউ দেখায়, যা WordPress ডিফল্টভাবে করে না।
কোনো পোস্ট বা পেজে, একটি ইমেজ ব্লক (Image block) সন্নিবেশ করুন এবং SVG বেছে নিন। হেডার লোগোর জন্য কাস্টোমাইজ (Customize) / সাইট আইডেন্টিটি (Site Identity) ব্যবহার করুন, অথবা থিম টেমপ্লেটে ইমেজ ব্লক ব্যবহার করুন (সাইট এডিটর)।
ডেভেলপারদের জন্য বিকল্প: মিডিয়া লাইব্রেরি এড়িয়ে চলুন। ফাইলটি থিমে (assets/logo.svg) রাখুন এবং টেমপ্লেটে রেফারেন্স করুন, অথবা CSS-এ স্টাইল করার জন্য এটি ইনলাইন (inline) করুন। আপলোড না থাকলে মিডিয়া লাইব্রেরির আক্রমণের কোনো সুযোগ নেই।

Safe SVG আপলোড করার অধিকারও সীমাবদ্ধ করতে পারে। প্লাগইনটি আপডেট রাখুন: শুধুমাত্র 'SVG অনুমোদন' বক্স চেক করাই যথেষ্ট নয়, ফাইল ক্লিন করাটাই আসল নিরাপত্তা।

এই টুলগুলোতে কোন PixelToPath SVG ব্যবহার করবেন?

এডিটর আপনি যা দেবেন তা-ই গ্রহণ করবে। একটি ভুল প্রিসেটের জন্য ইমপোর্টের সময় মূল্য চোকাতে হয়: অত্যধিক শেপ, পরিবর্তন অযোগ্য রং, বাতিল হওয়া ফাইল।

লোগো, আইকন বা লেটারিং: ব্ল্যাক অ্যান্ড হোয়াইট বা পোস্টার। এগুলো সলিড কালার, Figma এবং Canva এক ক্লিকে এদের রং পরিবর্তন করে।
রং পরিবর্তন করার পরিকল্পনা থাকলে ফটো (Photo) মোড এড়িয়ে চলুন। এই মোডটি অসংখ্য ছোট ছোট শেপ তৈরি করে; Canva প্রায়শই কোনো কাজের প্যালেট দেখাবে না।
রূপান্তরের আগে আসল ছবিটি ক্রপ করুন: কম ব্যাকগ্রাউন্ড, কম নোড, Figma লেয়ারে আরও সহজে পাঠযোগ্য SVG।
ব্যবহার অনুযায়ী বৈচিত্র্য: Figma-র জন্য মনোক্রোম SVG (ব্র্যান্ডিং), Canva-র জন্য রঙিন SVG (পোস্ট), WordPress-এর জন্য একই ক্লিন করা ফাইল (হেডার)।

কেন এই SVG ওয়ার্কফ্লোতে ফিট করে

যে কনভার্টার svg ট্যাগের মধ্যে একটি PNG এনক্যাপসুলেট করে আউটপুট দেয় তা Figma বা Canva-র কাজে আসে না। PixelToPath পাথ আউটপুট দেয়।

✏️

আসল পাথ, বিটম্যাপ নয়

Figma ভেক্টর লেয়ার দেখে। Canva রং দেখে। আপনি একটি রং পরিবর্তন করেন, ছবির উপর কোনো ফিল্টার বসান না।

🎨

রং পরিবর্তনের জন্য তৈরি সলিড কালার

ব্ল্যাক অ্যান্ড হোয়াইট এবং পোস্টার প্রিসেটগুলো রঙের সংখ্যা সীমিত রাখে। Figma এবং Canva ঠিক এটাই চায়।

📉

Canva এবং WP-র জন্য যথেষ্ট হালকা

Canva-র সীমা: ৩ মেগাবাইট। একটি PixelToPath লোগো সাধারণত কয়েক কিলোবাইটের হয়। WordPress এটি রেটিনা PNG-র চেয়ে দ্রুত সার্ভ করে।

🆓

বিনামূল্যে, Illustrator ছাড়াই

ক্রিয়েটিভ ক্লাউড ছাড়াই ক্লায়েন্টের PNG সম্পাদনাযোগ্য SVG-তে পরিণত হয়। Figma এবং Canva বাকি কাজ করে দেয়।

🔒

ক্লায়েন্টের ফাইল, স্টোরেজ ছাড়া

লোগো, ব্র্যান্ড গাইডলাইন, মকআপ: প্রসেস করার পর উপেক্ষা করা হয়। সার্ভারে কিছুই রাখা হয়লগ্ন করা হয় না। গোপনীয়তা চুক্তির সাথে সামঞ্জস্যপূর্ণ।

💻

অফলাইনেও কাজ করে

ওপেন-সোর্স Windows / Linux অ্যাপটি স্থানীয়ভাবে ভেক্টরাইজ করে যদি ফাইলটি আপনার মেশিন থেকে বাইরে না পাঠাতে হয়, এরপর আপনি এটি Figma-তে ইমপোর্ট করতে পারেন।

যেখানে এই ওয়ার্কফ্লো প্রাত্যহিক কাজকে বদলে দেয়

SVG টুলে চলে আসার পর, আপনাকে প্রতিটি ভ্যারিয়েশনের জন্য বারবার রূপান্তর করতে হবে না:

Figma ব্র্যান্ডিং: ক্লায়েন্টের PNG একটি কম্পোনেন্টে পরিণত হয় যা আপনি নতুন করে না এঁকেই রং পরিবর্তন (প্রাইমারি, ইনভার্টেড, মনোক্রোম) করতে পারেন
Canva পাবলিকেশন: একটি মাত্র SVG, ক্যাম্পেইনের ছয়টি রং, স্পষ্ট স্টোরি এবং ক্যারোজেল
WordPress লোগো: হেডারে একটি ফাইল, মোবাইল এবং রেটিনায় স্পষ্ট, পুরনো PNG-র চেয়ে হালকা
ফ্রিল্যান্স ডেলিভারেবল: আপনি SVG এর সাথে Figma/Canva-র নির্দেশিকা প্রদান করেন। ক্লায়েন্ট আর আটকে থাকে না
ইউজার ইন্টারফেস আইকন: এগুলো একসাথে Figma-তে ইমপোর্ট করুন, ২৪ পিক্সেল গ্রিডে সারিবদ্ধ করুন, সেটটি এক্সপোর্ট করুন

ফটোর জন্য PNG রাখুন। যেসব জিনিসের রং পরিবর্তন করতে হবে বা স্পষ্ট থাকতে হবে, সেগুলোর জন্য PixelToPath + Figma / Canva / WordPress যথেষ্ট।

সচরাচর জিজ্ঞাসিত প্রশ্ন (FAQ)

Figma আমার SVG-কে ভেক্টরের পরিবর্তে ছবি হিসেবে ইমপোর্ট করে। কেন?

ফাইলটিতে পাথের পরিবর্তে সম্ভবত একটি বিটম্যাপ (ইমেজ ট্যাগের ভিতরে একটি PNG) রয়েছে। PixelToPath-এর ব্ল্যাক অ্যান্ড হোয়াইট বা পোস্টার এক্সপোর্টগুলো আসল পাথ। এই প্রিসেটগুলোর যেকোনো একটি দিয়ে আবার রূপান্তর করুন, তারপর .svg ফাইলটি ক্যানভাসে টেনে আনুন বা File → Place image ব্যবহার করুন। আপনার একটি একক ইমেজ লেয়ারের পরিবর্তে লেয়ারের একটি গ্রুপ দেখা উচিত।

Canva রং পরিবর্তন করার জন্য রঙের প্যালেট দেখাচ্ছে না। কী করব?

Canva কেবল সহজ SVG-এর রং পরিবর্তন করে: সলিড কালার, কম রং, কোনো গ্রেডিয়েন্ট বা টেক্সচার নেই। ফটো প্রিসেট অত্যধিক শেপ তৈরি করে। PixelToPath-এ ফিরে যান এবং ছবিটিকে পোস্টার (কয়েকটি সলিড রং) বা ব্ল্যাক অ্যান্ড হোয়াইটে রূপান্তর করে আবার ইমপোর্ট করুন। একবার রাখার পর SVG-তে ক্লিক করুন: উপরের বারে প্যালেটগুলো আসবে।

WordPress-এ SVG অনুমোদন করা কি বিপজ্জনক?

হ্যাঁ, যদি আপনি শুধু MIME টাইপ যোগ করেন। একটি SVG-তে JavaScript থাকতে পারে। Safe SVG (10up) ব্যবহার করুন: আপলোডের সময় ফাইলটি ক্লিন করা হয়, মিডিয়া লাইব্রেরিতে প্রিভিউ দেখা যায় এবং আপনি অধিকার শুধু অ্যাডমিনিস্ট্রেটরদের জন্য সীমাবদ্ধ করতে পারেন। আরও কঠোর বিকল্প: মিডিয়া লাইব্রেরির বাইরে, থিমে SVG রাখা।

PixelToPath-এর পর কি Adobe Illustrator প্রয়োজন?

এই ওয়ার্কফ্লোর জন্য না। রং পরিবর্তন, আনগ্রুপ এবং এক্সপোর্টের জন্য Figma যথেষ্ট। সোশ্যাল মিডিয়া ভ্যারিয়েশনের জন্য Canva যথেষ্ট। হাতে আঁকা বা খুব জটিল প্রিন্ট ফাইলের জন্য Illustrator দরকারী হতে পারে, কিন্তু কোনো মকআপ বা সাইটে লোগো যুক্ত করার জন্য নয়।

আমি Figma-তে লোগোর রং পরিবর্তন করতে চাইলে কোন প্রিসেট বেছে নেব?

মনোক্রোম লোগো বা আইকনের জন্য ব্ল্যাক অ্যান্ড হোয়াইট: একটি রং, এক ক্লিক। লোগোতে দুই বা তিনটি সলিড রং থাকলে পোস্টার। ফটো মোড এড়িয়ে চলুন: আপনি ডজন ডজন খুব ছোট শেপ পাবেন, যা নির্বাচন করা এবং রং পরিবর্তন করা বিরক্তিকর।

SVG তৈরি করুন, তারপর এটি আপনার টুলে খুলুন

PNG বা JPG আপলোড করুন, SVG ডাউনলোড করুন, এটি Figma, Canva বা WordPress-এ টেনে আনুন। বিনামূল্যে, কোনো অ্যাকাউন্ট ছাড়াই, Illustrator ছাড়া।

প্রথমে আমার SVG তৈরি করুন → ডেস্কটপ অ্যাপ ডাউনলোড করুন →

ওপেন সোর্স ডেভেলপমেন্ট সমর্থন করুন

PixelToPath ব্যবহার করা বিনামূল্যে। যদি এই টুলটি আপনার সময় বাঁচাতে সাহায্য করে থাকে, তবে আমাকে এক কাপ কফি খাওয়ানোর কথা বিবেচনা করতে পারেন।

❤️ পেপ্যালের মাধ্যমে দান করুন

কীভাবে Figma, Canva, বা WordPress-এ আপনার SVG ফাইলগুলো ইমপোর্ট এবং সম্পাদনা করবেন?