কিভাবে একটি SVG ফাইল তৈরি করবেন

একটি ওয়েবসাইট তৈরি করার সময়, ওয়েব ডিজাইনারকে বিবেচনায় নিতে হবে চারটি প্রধান পয়েন্ট ওয়েবের লেআউট এবং ভিজ্যুয়াল ডিজাইন সম্পর্কে চিন্তা করা, পাঠ্য, ছবি, রঙ এবং ফন্ট কর্মচারী

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

SVG ফাইলগুলির সাথে চিকিত্সা, পেশাদারদের দ্বারা বৃদ্ধি পেয়েছে এবং ডিজাইনের জগতে তেমন পেশাদার নয়।

একটি SVG ফাইল কি?

SVG হল ইংরেজিতে Scalabe Vector Graphics এর সংক্ষিপ্ত রূপ, স্প্যানিশ ভাষায়, Scalable Vector Graphics। এটি একটি সম্পর্কে খোলা এবং বিনামূল্যে বিন্যাস যা দিয়ে 2D গ্রাফিক্স, দুই মাত্রা তৈরি করা যায়।

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

কেন আমরা SVG ব্যবহার করব?

এই ধরনের বিন্যাসের সাথে, ভেক্টর ছবিগুলি উচ্চ গুণমান বজায় রাখবে, তাদের আকার এবং রেজোলিউশন নির্বিশেষে। বিপরীতে, বিটম্যাপ দিয়ে তৈরি, পিক্সেল দিয়ে তৈরি ছবি, আকার পরিবর্তন করা হলে গুণমান হারায়। SVG ফরম্যাট এর হালকাতা এবং বহুমুখিতা দ্বারা সংজ্ঞায়িত করা হয়।

এই বিন্যাসটি ব্যবহার করার পক্ষে আরেকটি বিন্দু হল এর ছোট আকার, এটির জন্য ধন্যবাদ পৃষ্ঠাগুলির লোডিং গতি বৃদ্ধি করে যেখানে তারা রয়েছে. এই ছবিগুলি ব্রাউজার দ্বারা নির্মিত, যা সার্ভারে লোড এবং খরচ কমাতে সাহায্য করে।

উপরন্তু, তারা পারেন অ্যানিমেটেড SVG ছবি তৈরি করুন যার সাহায্যে আমাদের ওয়েবসাইটকে ঘনিষ্ঠতার একটি বাতাস দিতে এবং এটি দেখার দর্শকদের দৃষ্টি আকর্ষণ করতে।

SVG হল একটি উন্মুক্ত বিন্যাস, অর্থাৎ, উন্নতি এবং আপডেটের মধ্য দিয়ে যেতে পারে. উপরন্তু, SVG ফাইলগুলি ভেক্টর এডিটিং প্রোগ্রামের সাথে সম্পাদনা করা যেতে পারে, উদাহরণস্বরূপ Adobe Illustartor এর ডিসপ্লেতে গুণমান না হারিয়ে, এটি যেকোনো ডিভাইসে দেখা যেতে পারে। এটি আমাদের গুণমান না হারিয়ে এটি মুদ্রণ করার অনুমতি দেয়।

কিভাবে সহজে SVG ফাইল তৈরি করবেন

সম্ভবত SVG ফাইলগুলি তৈরি করার সবচেয়ে সহজ উপায়, যদি আপনি তাদের সাথে পরিচিত হন, একটি গ্রাফিক ডিজাইন প্রোগ্রামের মাধ্যমে, যেমন ইলাস্ট্রেটর, কোরেল ড্র, অন্যদের মধ্যে।

ইলাস্ট্রেটর প্রোগ্রামের উপর ফোকাস করে, যখন আমরা SVG ফরম্যাট ব্যবহার করতে যাচ্ছি, তখন আমাদের বিবেচনায় নিতে হবে যে আমরা গ্রেডিয়েন্ট বা অন্যান্য প্রভাব, যেমন শৈল্পিক প্রভাব, ব্লার, ব্রাশ, পিক্সেল ইত্যাদি ব্যবহার করেছি কিনা। SVG ফাইল ফরম্যাটে সেভ করার সময় সেগুলি রাস্টারাইজ করা হয়। SVG ফিল্টার প্রভাবগুলি ব্যবহার করার পরামর্শ দেওয়া হয়, প্রভাবগুলি যোগ করার জন্য যাতে সেগুলি পরে রাস্টারাইজ করা না যায়৷.

আমরা আপনাকে দিতে আরেকটি উপদেশ ব্যবহার করা হয় ভালো পারফরম্যান্সের জন্য চিত্রে সহজ চিহ্ন এবং পথ উল্লিখিত বিন্যাসের। প্রচুর ট্রেসিং সহ ব্রাশ ব্যবহার করা এড়িয়ে চলুন কারণ এটি একটি উচ্চতর ডেটা লোড তৈরি করে।

এই প্রোগ্রামে একটি SVG ফাইল তৈরি করতে, আমাদের প্রথম যে জিনিসটি খুলতে হবে তা হল একটি ফাঁকা ক্যানভাস যেখানে আমরা আমাদের ধারণা নিয়ে কাজ করব।

আমাদের কাজ শেষ হয়ে গেলে, আমরা যা করতে যাচ্ছি তা হল প্রোগ্রামটির উপরে দেখানো টুলবারে গিয়ে, এবং আমরা এর বিকল্পটি নির্বাচন করব ফাইল, হিসাবে সংরক্ষণ করুন এবং একটি পপ-আপ স্ক্রীন উপস্থিত হবে যেখানে এটি আমাদের ফাইলের একটি নাম দিতে বলে এবং যে বিন্যাসে আমরা এটি সংরক্ষণ করতে চাই তা নির্দেশ করুন। এটি এই শেষ বিভাগে যেখানে আমাদের অবশ্যই SVG বিকল্পটি চিহ্নিত করতে হবে।

SVG টাইপ নির্বাচন করার সময়, একটি ডায়ালগ বক্স প্রদর্শিত হয় যা আমাদের বিভিন্ন বিকল্পগুলি দেখায় যা অবশ্যই বিবেচনায় নেওয়া উচিত।

একটি সাধারণ নিয়ম হিসাবে, টেবিলে প্রদর্শিত প্রথম ক্ষেত্রে, SVG 1.1 প্রোফাইল প্রদর্শিত হবে। নিম্নলিখিত এটি আমাদের উৎস নির্বাচন করার বিকল্প দেয়, যা তারা আমাদের দেয় এসভিজিতে মার্ক আপ করা পাঠ্যের ডিফল্ট এবং কোনোটি হিসাবে উপসেট নেই৷. আমাদের ক্ষেত্রে, এই কাজের ফন্ট নেই, যদি এটি হয়ে থাকে তবে উপসেট বিকল্পটি কোনটি থেকে সমস্ত চিত্রগ্রামে পরিবর্তন করতে হবে।

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

উন্নত বিকল্প বিভাগে আমরা বিকল্পটি খুঁজে পাই SVG কোড, এই বিকল্পটি ফাইলের ভিতরে কেমন আছে তা নির্দেশ করবে, অর্থাৎ আমাদের কাজের পিছনের কোড। এই বিকল্পটি অপরিহার্য যদি আপনি আপনার SVG ফাইল যোগ করতে চান, উদাহরণস্বরূপ আপনার ব্যক্তিগত ওয়ার্ডপ্রেসে, আপনাকে কোডটি কপি করে সরাসরি আপনার WordPress HTML এডিটরে যোগ করতে হবে।

আমরা আপনাকে শেষ পরামর্শটি দিই যে SVG ফর্ম্যাটে সংরক্ষণ করার সময়, মনে রাখবেন যে আপনি যদি বিভিন্ন আর্টবোর্ডের সাথে কাজ করেন তবে শুধুমাত্র সক্রিয় আর্টবোর্ড রাখা হবে।

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

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

আপনি যেমন দেখেছেন, দ SVG বিন্যাস একটি বিপ্লব হয়েছে. এর সম্ভাবনা এবং গুণমানের জন্য ধন্যবাদ যে এটি অফার করে, ওয়েব পৃষ্ঠাগুলিকে আমাদের কার্যকারিতা ত্যাগ না করে অনেক বেশি আকর্ষণীয় করে তোলে, যতক্ষণ না তারা উল্লিখিত বিন্যাসের সঠিক ব্যবহার করে। SVG ডিজাইন এবং ওয়েব ডেভেলপমেন্টের জগতের মধ্যে নিখুঁত মিলন হয়ে উঠেছে।