SVG থেকে PNG কনভার্টার
একটি SVG ড্রয়িংকে PNG, JPG বা WebP ছবিতে বদলান। ফাইল ড্রপ করুন বা কোড পেস্ট করুন, দরকারি মাপ বেছে নিন এবং ডাউনলোড করুন। সবকিছু আপনার নিজের ডিভাইসেই হয় — আপনার ফাইল কখনো আপলোড হয় না।
SVG ফাইল এখানে ড্রপ করুন, বা ক্লিক করে বেছে নিন
আপনার ফাইল আপনার নিজের ডিভাইসেই থাকে। কোথাও কিছু পাঠানো হয় না।
আপনার ছবি এখানে দেখা যাবে।
SVG-কে PNG-তে বদলাবেন কীভাবে
- আপনার
.svgফাইলটি ওপরের বাক্সে ড্রপ করুন, বা কোডটি টেক্সট এরিয়ায় পেস্ট করুন। - স্বচ্ছ ব্যাকগ্রাউন্ড চাইলে PNG বেছে নিন, কোনো ফর্ম দাবি করলে JPG, আর নিজের ওয়েবসাইটের জন্য WebP।
- ফোনের স্ক্রিনেও ধারালো থাকা ছবির জন্য 2× চাপুন, অথবা একটি নির্দিষ্ট চওড়া লিখে দিন।
- প্রিভিউ দেখুন, তারপর ডাউনলোড করুন চাপুন।
পর্দার আড়ালে টুলটি আপনার SVG-র মাথায় লেখা width, height ও
viewBox পড়ে তার স্বাভাবিক মাপ বের করে। তারপর আপনার চাওয়া মাপের একটি ফাঁকা শিটে
পুরো ড্রয়িংটি আঁকে এবং সেই শিটটিকে ছবি হিসেবে সেভ করে। ড্রয়িংটি মূল নির্দেশ থেকে নতুন মাপে আবার আঁকা
হয় — কোনো ছোট কপিকে টেনে বড় করা হয় না — তাই ফলাফল প্রতিটি মাপে, 4× পর্যন্ত, একদম ধারালো থাকে।
ফোন ও ল্যাপটপের স্ক্রিনের জন্য কেন 2×-এ এক্সপোর্ট করবেন
আজকের ফোন বা ল্যাপটপ ওয়েব পেজের চাওয়া প্রতিটি বিন্দুর জন্য একটির বেশি স্ক্রিন-বিন্দু ব্যবহার করে। যে পেজ বলে "এই লোগো 200 চওড়া করো", সে ফোনে আসলে প্রায়ই 400 স্ক্রিন-বিন্দু আঁকছে, আর সবচেয়ে ধারালো ট্যাবলেটে 600। আপনি যদি PNG ঠিক 200 বিন্দু চওড়ায় সেভ করেন, তাহলে সেই জায়গা ভরতে স্ক্রিনকে সেটা টেনে বড় করতে হয়, আর বিন্দুর নির্দিষ্ট গ্রিড টানলে কিনারা সবসময় নরম হয়ে যায়। সরু রেখা ধূসর হয়ে যায় আর ছোট লেখা ঝাপসা দেখায়। ছবিটা নষ্ট নয় — যে স্ক্রিনে গিয়ে পড়েছে সেটি ভরার মতো যথেষ্ট বিন্দু তাতে নেই, এই যা।
প্রতিকার হলো স্ক্রিনকে প্রয়োজনের চেয়ে বেশি বিন্দু দেওয়া। ছবিটি যে মাপে দেখানো হবে তার দ্বিগুণ মাপে সেভ করুন, তারপর পেজকে বলুন সেটি ছোট মাপে দেখাতে। সাধারণ স্ক্রিনে বাড়তি বিন্দুগুলো চুপচাপ উপেক্ষিত হয়; ধারালো স্ক্রিনে সেগুলোই কিনারা পরিষ্কার করে। এই কারণেই ডিজাইনাররা "2× অ্যাসেট"-এর কথা বলেন — আর ওপরের কুইক-সাইজ বোতামগুলো ঠিক এই কারণেই আছে। দুটি বাস্তব কথা: 2× প্রায় সবসময়ই যথেষ্ট, কারণ 3× ও 4× অনেক ওজন বাড়ায় অথচ ফারাকটা বেশিরভাগ চোখ ধরতে পারে না; আর চওড়া দ্বিগুণ করলে উচ্চতাও দ্বিগুণ হয়, তাই 2× ছবিতে চার গুণ বিন্দু থাকে এবং ফাইলও প্রায় চার গুণ বাড়ে। 2×-এ সেভ করুন, ফাইল হালকা রাখুন, আর ছবি অনেক বড় করে দেখাতে হলেই কেবল 3×-এ যান।
প্রতিটি কুইক-সাইজ বোতাম কী দেয়
এই সারণির প্রতিটি সংখ্যা টুলটি নিজে যে কোডের অংশ চালায় ঠিক সেটি দিয়েই হিসাব করা, তাই এটি আপনি আসলে যা পাবেন তার সঙ্গে মেলে। প্রতিটি মাপের নিচে ছবিতে থাকা রঙিন বিন্দুর মোট সংখ্যা দেওয়া আছে — ফাইল কতটা ভারী হবে তার একটা মোটামুটি আন্দাজ।
| শুরুর SVG | স্বাভাবিক মাপ | 1× | 2× | 3× | 4× |
|---|---|---|---|---|---|
| ছোট আইকন টুলবার বা মেনুর আইকন | 24 × 24 | 24 × 24 576 পিক্সেল | 48 × 48 2,304 পিক্সেল | 72 × 72 5,184 পিক্সেল | 96 × 96 9,216 পিক্সেল |
| ব্যাজ ছোট গোল ব্যাজ বা অ্যাভাটার | 100 × 100 | 100 × 100 10,000 পিক্সেল | 200 × 200 40,000 পিক্সেল | 300 × 300 90,000 পিক্সেল | 400 × 400 160,000 পিক্সেল |
| স্কোয়ার লোগো অ্যাপ স্টোর বা প্রোফাইলের লোগো | 512 × 512 | 512 × 512 262,144 পিক্সেল | 1024 × 1024 1,048,576 পিক্সেল | 1536 × 1536 2,359,296 পিক্সেল | 2048 × 2048 4,194,304 পিক্সেল |
| সোশ্যাল কার্ড লিংক প্রিভিউয়ের ছবি | 1200 × 630 | 1200 × 630 756,000 পিক্সেল | 2400 × 1260 3,024,000 পিক্সেল | 3600 × 1890 6,804,000 পিক্সেল | 4800 × 2520 12,096,000 পিক্সেল |
শেষ সারিটি লক্ষ করুন: 1200 × 630 মাপের লিংক-প্রিভিউ ছবি 4×-এ হয়ে যায় 4800 × 2520 পিক্সেল। এটি সত্যিই বিশাল একটি ছবি এবং ফাইল ভারী হবে। ওয়েব পেজে লাগানোর জন্য 1× বা 2×-ই আপনার দরকার।
PNG, JPG নাকি WebP — কোনটি সেভ করবেন?
| ফরম্যাট | স্বচ্ছ হতে পারে | খুঁটিনাটি | ফাইলের আকার | কীসের জন্য সেরা |
|---|---|---|---|---|
| PNG | হ্যাঁ | কিছুই হারায় না | সবচেয়ে বড় | লোগো, আইকন, স্ক্রিনশট এবং যেকোনো ছবি যাতে ধারালো কিনারা বা স্বচ্ছ ব্যাকগ্রাউন্ড আছে। SVG থেকে শুরু করলে প্রায় প্রতিবারই এটাই সঠিক বাছাই। |
| JPG | না | কিছু খুঁটিনাটি বাদ পড়ে | ছোট | ফটো, আর যেসব ফর্ম শুধু JPG ফাইল নেয়। ধারালো রেখা ও ছোট লেখা ঝাপসা দেখাতে পারে, আর ফাঁকা অংশে সবসময় একরঙা রং ভরে দেওয়া হয়। |
| WebP | হ্যাঁ | আপনার ইচ্ছামতো | সবচেয়ে ছোট | আপনার নিজের ওয়েবসাইটের ছবি। একই মানে সাধারণত PNG বা JPG-র চেয়ে প্রায় এক-চতুর্থাংশ ছোট, আর এখনকার সব ব্রাউজার এটি দেখাতে পারে। |
সংক্ষেপে: অন্য কোনো কারণ না থাকলে PNG। SVG ড্রয়িং সাধারণত লোগো, আইকন আর ডায়াগ্রাম — সমান রং আর শক্ত কিনারা — আর ঠিক এই ধরনের ছবিই PNG নিখুঁতভাবে সেভ করে এবং JPG ঘেঁটে দেয়। JPG তখনই বেছে নিন যখন অন্য প্রান্ত আর কিছু নিতেই রাজি নয়, আর মনে রাখবেন সেটি আপনার স্বচ্ছ ব্যাকগ্রাউন্ডের ওপর রং চাপিয়ে দেবে।
ফাইলে মাপ যখন পিক্সেলে লেখা নেই
প্রিন্ট বা ড্রয়িং প্রোগ্রাম থেকে বেরোনো SVG ফাইল প্রায়ই নিজের মাপ স্ক্রিন-বিন্দুর বদলে মিলিমিটার, পয়েন্ট বা ইঞ্চিতে মাপে। টুলটি ওয়েবের প্রচলিত নিয়মে সেগুলো আপনার জন্য বদলে দেয়: এক ইঞ্চি ঠিক 96 বিন্দুর সমান; বাকি সবকিছু এই একটিমাত্র সংখ্যা থেকেই আসে।
| আপনার ফাইলে লেখা থাকলে | তা এত বিন্দুর সমান | পূর্ণসংখ্যায় |
|---|---|---|
width="100px" | 100 | 100 |
width="1in" | 96 | 96 |
width="72pt" | 96 | 96 |
width="10mm" | 37.7953 | 38 |
width="5cm" | 188.9764 | 189 |
width="1pc" | 16 | 16 |
আপনার SVG যদি মাপ শতাংশে দেয়, বা কোনো মাপই না দেয়, তাহলে বদলানোর কিছু নেই — শতাংশের মানে শুধু
কোনো পেজের ভেতরেই থাকে। সেক্ষেত্রে টুলটি viewBox-এ ফিরে যায়, যা প্রায় প্রতিটি SVG-তে
থাকে, এবং সেখানে লেখা চওড়া ও উচ্চতা ব্যবহার করে। viewBox-ও না থাকলে সে আপনাকে
300 × 150 থেকে শুরু করায়, যা ব্রাউজার এমন যেকোনো ছবিকে দেয় যার নিজের মাপ অজানা,
এবং প্রিভিউয়ের ওপরে আপনাকে তা জানিয়ে দেয়। আপনি আসলে যে মাপ চান সেটি লিখে দিতে পারেন।
যেখানে মানুষ আটকে যান
- লেখা ভুল ফন্টে চলে আসে। যে ডিভাইস ড্রয়িং আঁকছে, ফন্টটি সেখানেই থাকতে হবে। SVG এক্সপোর্টের আগে আপনার ড্রয়িং প্রোগ্রামে লেখাকে আউটলাইনে বদলে নিন।
- SVG-র ভেতরের লিংক করা ছবি ফাঁকা আসে। SVG ইন্টারনেটে যা কিছুর দিকে ইঙ্গিত করে, একা আঁকার সময় তা আটকে দেওয়া হয়। বরং সেটি ফাইলের ভেতরেই এমবেড করুন।
- ফলাফলের পেছনে সাদা বাক্স আছে। আপনি JPG-তে সেভ করছেন। PNG বা WebP-তে যান এবং "স্বচ্ছ" বাক্সে টিক দিন।
- কিছুই হচ্ছে না। নিশ্চিত করুন আপনি পুরো ফাইলটি পেস্ট করেছেন, যা
<svgদিয়ে শুরু হয়ে</svg>দিয়ে শেষ হয়। একটি টুকরো একা আঁকা যাবে না। - আপনি অনেক বড় মাপ চেয়েছেন। ব্রাউজার এক দিকে প্রায় 16,000 বিন্দুর বেশি বড় শিট বানাতে অস্বীকার করে। তার চেয়ে বেশি চাইলে টুলটি চুপচাপ সেটি ওই সীমার ভেতরে নামিয়ে আনে এবং আপনাকে জানিয়ে দেয়।
আপনার ফাইল আপনার ডিভাইসের বাইরে যায় না
এখানে কোনো আপলোড নেই, কাজ করার মতো কোনো সার্ভারও নেই। আপনার ব্রাউজার আগে থেকেই জানে SVG কীভাবে পড়তে হয়, ফাঁকা শিটে কীভাবে আঁকতে হয় আর ছবি কীভাবে সেভ করতে হয়, এবং এই পেজ শুধু তাকে ওই তিনটি কাজ পরপর করতে বলে। অর্থাৎ অপ্রকাশিত লোগো, ক্লায়েন্টের আর্টওয়ার্ক বা যেকোনো গোপনীয় জিনিস নিরাপদ, টুলটি তাৎক্ষণিক কারণ নেটওয়ার্কে কিছুই যাচ্ছে না, আর পেজ লোড হওয়ার পর অফলাইন হয়ে গেলেও এটি চলতে থাকে।
সচরাচর জিজ্ঞাসা
- কনভার্ট করার পর আমার ছবির একটা অংশ হারিয়ে যায় কেন?
- SVG এমন জিনিসের দিকে ইঙ্গিত করতে পারে যা ফাইলের বাইরে থাকে। সে যদি image ট্যাগ দিয়ে অন্য কোনো ছবি লিংক করে, বা এমন ফন্ট ব্যবহার করে যা শুধু আপনার কম্পিউটারে ইনস্টল করা আছে, তাহলে SVG-কে একা আঁকার সময় ব্রাউজারকে সেগুলো আনতে দেওয়া হয় না, ফলে সেগুলো ফাঁকা থাকে বা অন্য টাইপফেসে আসে। সমাধান হলো আগে সবকিছু ফাইলের ভেতরে ঢুকিয়ে নেওয়া: ছবিটি লিংকের বদলে ডেটা হিসেবে পেস্ট করুন, আর আপনার ড্রয়িং প্রোগ্রামে লেখাকে আউটলাইন বা পাথে বদলে নিন। SVG নিজে পূর্ণাঙ্গ হয়ে গেলে এখানে যা দেখবেন, ঠিক তা-ই পাবেন।
- SVG আর PNG-র মধ্যে পার্থক্য কী?
- SVG হলো আঁকার নির্দেশের একটি সেট, তাই যেকোনো মাপেই সেটি একদম ধারালো থাকে। একে বিলবোর্ডের মতো বড় করলেও প্রতিটি কিনারা পরিষ্কার থাকে। PNG হলো রঙিন বিন্দুর একটি নির্দিষ্ট গ্রিড, তাই সেটি শুধু যে মাপে সেভ করা হয়েছিল ততটুকুই ধারালো দেখায়। তার পরে ঝাপসা আর ব্লকের মতো হয়ে যায়। এখানে আপনি ঠিক এই বিনিময়টাই করছেন: SVG-র অফুরন্ত ধার ছেড়ে এমন একটি ফাইল পাচ্ছেন যা প্রতিটি অ্যাপ, প্রতিটি ফোন আর প্রতিটি পুরনো আপলোড ফর্ম কোনো অভিযোগ ছাড়াই খুলতে পারে।
- কোন মাপটা বেছে নেব?
- আগে সেই মাপটা নিন যে মাপে ছবিটা আসলে দেখানো হবে, তারপর সেটাকে দ্বিগুণ করুন। আপনার লোগো যদি ওয়েব পেজে 200 পিক্সেল চওড়া একটি বাক্সে বসে, তাহলে 2× বোতাম দিয়ে সেটি 400 পিক্সেল চওড়া করে এক্সপোর্ট করুন। বেশিরভাগ আধুনিক ফোন ও ল্যাপটপ ডিজাইনের প্রতিটি পিক্সেলে দুই বা তার বেশি স্ক্রিন-বিন্দু বসায়, তাই ঠিক সেই মাপে বানানো ছবি সেগুলোতে একটু ঝাপসা দেখায়। 2×-এর চেয়ে বড় করলে সাধারণত লাভ হয় না, উল্টে ফাইল অনেক ভারী হয়ে যায়, তাই 2× হলো বুদ্ধিমানের ডিফল্ট আর 3× শুধু খুব বড় স্ক্রিনের জন্যই কাজের।
- আমি কি ব্যাকগ্রাউন্ড স্বচ্ছ রাখতে পারি?
- হ্যাঁ, যদি PNG বা WebP-তে সেভ করেন। এই দুটোই ফাঁকা পিক্সেল জমা রাখতে পারে, তাই আপনার SVG-র যেসব অংশে কিছু আঁকা নেই সেগুলো স্বচ্ছ থাকে, আর আপনার লোগো যেকোনো রঙের পেজে কুৎসিত সাদা বাক্স ছাড়াই বসে যায়। শুধু "স্বচ্ছ" বাক্সটিতে টিক দেওয়া রাখুন। JPG অন্যভাবে কাজ করে: সে ফাঁকা পিক্সেল জমা রাখতেই পারে না, তাই JPG বেছে নিলেই টুলটি ফাঁকা অংশগুলো আপনার বাছা রঙে ভরে দেয়। সেই কারণেই JPG-তে গেলেই কালার পিকার নিজে থেকে চালু হয়ে যায়।
- আমার ফাইল কি কোথাও পাঠানো হয়?
- না। সবকিছু আপনার নিজের ডিভাইসেই হয়। টুলটি আপনার SVG পড়ে, আঁকে এবং ফলাফল সেভ করে, আর এর জন্য আপনার ব্রাউজারে আগে থেকেই থাকা অংশগুলো ব্যবহার করে; এর কোনোটিতেই ইন্টারনেট জড়িত নয়। আপনার ফাইল কখনো আপলোড হয় না, কখনো জমা থাকে না, কখনো লগ হয় না, আর আমরা চাইলেও দেখার মতো কিছু নেই। তাই এখনো প্রকাশ না-হওয়া কোম্পানির লোগো, চুক্তির আওতায় থাকা ক্লায়েন্টের ডিজাইন, কিংবা অচেনা কারও হাতে তুলে দিতে চান না এমন যেকোনো কিছুর জন্য এটি নিরাপদ। পেজ একবার লোড হয়ে গেলে ইন্টারনেট বন্ধ করেও এটি চলতে থাকে।
- ফাইলটা আমার আশার চেয়ে বড় কেন?
- PNG ছবির প্রতিটি বিন্দুর রং জমা রাখে, তাই ফাইল বাড়ে ক্ষেত্রফলের সঙ্গে, ড্রয়িং কত জটিল তার সঙ্গে নয়। চওড়া দ্বিগুণ করলে উচ্চতাও দ্বিগুণ হয়, অর্থাৎ বিন্দু হয় চার গুণ আর ফাইলের আকারও প্রায় চার গুণ। কয়েকশো অক্ষরের একটি ছোট্ট SVG-ও 4×-এ অনায়াসে কয়েকশো কিলোবাইটের PNG হয়ে যেতে পারে। ফাইল বেশি ভারী হলে আগে ছোট মাপ বেছে নিন, তারপরই WebP চেষ্টা করুন, যা একই মানে সাধারণত আরও প্রায় এক-চতুর্থাংশ বাঁচিয়ে দেয়।