SVG (Scalable Vector Graphics) একটি XML ভিত্তিক ফরম্যাট, যা গ্রাফিক্সের বিভিন্ন উপাদানকে কনটেইনারের মাধ্যমে সংজ্ঞায়িত করে। একটি SVG ফাইল সাধারণত গ্রাফিক্সের বেসিক আকার, রং, পাথ, এবং অন্যান্য বৈশিষ্ট্য ধারণ করে। এই ফাইল স্ট্রাকচারটি সহজ এবং মানুষের পাঠযোগ্য হওয়ায় সহজেই এডিট এবং কাস্টমাইজ করা যায়।
SVG ফাইল স্ট্রাকচার
SVG ফাইলের স্ট্রাকচার XML ডকুমেন্টের মতো, যেখানে একটি মূল <svg> ট্যাগ দিয়ে চিত্রের শুরুর অংশটি চিহ্নিত করা হয়। এর মধ্যে বিভিন্ন উপাদান যেমন <path>, <circle>, <rect>, <line>, <polygon> ইত্যাদি থাকে যা গ্রাফিক্সের বিভিন্ন অংশ গঠন করে। নিচে একটি সাধারণ SVG ফাইল স্ট্রাকচার দেখানো হলো:
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
<rect x="20" y="20" width="60" height="60" stroke="black" stroke-width="2" fill="blue" />
<line x1="10" y1="10" x2="90" y2="90" stroke="black" stroke-width="2" />
</svg>
এই ফাইলের মধ্যে:
<svg>: এটি মূল কনটেইনার ট্যাগ যা গ্রাফিক্সের সীমানা নির্ধারণ করে।xmlns="http://www.w3.org/2000/svg": এটি SVG নেমস্পেস সংজ্ঞায়িত করে, যা XML এর জন্য অপরিহার্য।widthএবংheight: এই অ্যাট্রিবিউট দুটি SVG চিত্রের আকার নির্ধারণ করে।<circle>: একটি বৃত্ত তৈরি করে, যেখানেcxএবংcyকেন্দ্রে অবস্থান,rহলো ব্যাসার্ধ।<rect>: একটি আয়তক্ষেত্র তৈরি করে, যেখানেxএবংyএর মাধ্যমে শুরু বিন্দু নির্ধারণ করা হয়, এবংwidthওheightআকার নির্ধারণ করে।<line>: একটি রেখা তৈরি করে, যেখানেx1,y1,x2, এবংy2দিয়ে রেখার শুরু এবং শেষ বিন্দু চিহ্নিত হয়।
SVG কনটেন্ট
একটি SVG কনটেন্টের মধ্যে বিভিন্ন উপাদান থাকে যা গ্রাফিক্সের বিভিন্ন পার্ট যেমন রং, আকার, লাইন, পাথ ইত্যাদি কনট্রোল করে। প্রধান উপাদানগুলো হলো:
1. Shapes (আকৃতিগুলি):
<circle>: একটি বৃত্ত তৈরি করে।<rect>: একটি আয়তক্ষেত্র বা রেকটেঙ্গল তৈরি করে।<line>: একটি সোজা রেখা তৈরি করে।<polygon>: বহু-কোণী আকৃতি তৈরি করে।
2. Path (পাথ):
<path>: এটি সবচেয়ে শক্তিশালী উপাদান, যা গ্রাফিক্সের জটিল রূপরেখা তৈরি করতে ব্যবহৃত হয়।dঅ্যাট্রিবিউটের মাধ্যমে পাথের স্ট্রোক বা বেজিয়ার কেভের নির্দেশনা দেওয়া হয়।
3. Text (টেক্সট):
<text>: এটি ওয়েব পেজে লেখা বা টেক্সট প্রদর্শনের জন্য ব্যবহার হয়। বিভিন্ন ফন্ট, সাইজ, রঙ ও অন্যান্য স্টাইল অ্যাট্রিবিউট দিয়ে টেক্সট কাস্টমাইজ করা যায়।
4. Styles (স্টাইল):
styleঅ্যাট্রিবিউট: SVG উপাদানগুলির স্টাইল CSS এর মাধ্যমে নির্ধারণ করা হয়। যেমন, রং, রেখার পুরুত্ব, ছায়া ইত্যাদি।
5. Transforms (ট্রান্সফর্ম):
transform: এটি SVG উপাদানের উপর বিভিন্ন রূপান্তর কার্যক্রম (যেমন, রোটেট, স্কেল, ট্রান্সলেট) প্রয়োগ করতে ব্যবহৃত হয়।
SVG ফাইলের কনটেন্টের উদাহরণ
নিচে একটি SVG কনটেন্টের উদাহরণ দেওয়া হলো যা বিভিন্ন উপাদান ব্যবহার করে একটি চিত্র তৈরি করেছে:
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<rect x="10" y="10" width="180" height="180" stroke="black" stroke-width="5" fill="lightblue" />
<circle cx="100" cy="100" r="50" stroke="green" stroke-width="4" fill="yellow" />
<path d="M 50 150 Q 100 100 150 150" stroke="red" stroke-width="3" fill="transparent" />
<text x="50" y="50" font-family="Verdana" font-size="20" fill="black">Hello SVG</text>
</svg>
এই উদাহরণে:
- একটি লাইট ব্লু রঙের রেকটেঙ্গল তৈরি হয়েছে।
- একটি হলুদ রঙের বৃত্তের মধ্যে গ্রীন রঙের সীমানা রয়েছে।
- একটি রেড রঙের কিউবিক বেজিয়ার পাথ রয়েছে।
- টেক্সট "Hello SVG" ওয়েব পেজে প্রদর্শিত হয়েছে।
SVG এর স্ট্রাকচার খুবই সহজ এবং স্বচ্ছ, যা ডেভেলপারদের জন্য কাস্টমাইজেশন এবং পরিবর্তন সহজ করে তোলে। এর মাধ্যমে ওয়েব পেজের গ্রাফিক্স এবং অ্যানিমেশন তৈরি করা অনেক বেশি সহজ ও কার্যকর।
