এসভিজি (SVG) ফাইলের মাধ্যমে গ্রাফিক্স ডিজাইন করার সময় ফিল (Fill) এবং স্ট্রোক (Stroke) দুটি গুরুত্বপূর্ণ বৈশিষ্ট্য। এই দুটি বৈশিষ্ট্য গ্রাফিক্সের ভেতরের অংশ (ফিল) এবং বাইরের রেঞ্জ বা সীমানা (স্ট্রোক) এর রং নির্ধারণ করে। এসভিজি তে গ্রাফিক্সের চেহারা ও অনুভূতি কাস্টমাইজ করতে fill এবং stroke ব্যবহার করা হয়।
1. Fill Color
Fill হল একটি গ্রাফিক্স উপাদানের অভ্যন্তরীণ রং। এটি কোনো আকার বা চিত্রের ভিতরের জায়গা রাঙাতে ব্যবহৃত হয়। যেমন, একটি বৃত্ত বা আয়তক্ষেত্রের ভিতরের অংশের রং।
Fill ব্যবহারের সাধারণ সিনট্যাক্স:
<element fill="color">
উদাহরণ:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50" fill="red" />
</svg>
এখানে, <circle> উপাদানটির অভ্যন্তরীণ অংশ লাল (red) রঙে পূর্ণ হবে।
Fill এর অন্যান্য মান:
- Color Names: যেমন
red,blue,green, ইত্যাদি। - Hexadecimal Color Code: যেমন
#FF5733,#00FF00, ইত্যাদি। - RGB Color: যেমন
rgb(255, 0, 0)(লাল),rgb(0, 255, 0)(সবুজ), ইত্যাদি। - RGBA Color: যেমন
rgba(255, 0, 0, 0.5)(অর্ধস্বচ্ছ লাল)। - CurrentColor: এটা CSS এর
colorপ্রপার্টির মানকে গ্রহণ করে।
2. Stroke Color
Stroke হল একটি গ্রাফিক্স উপাদানের বাইরের সীমানা বা রেখার রং। এটি সাধারণত একটি রেখা বা সীমার রং বা আকারের চারপাশে ব্যবহৃত হয়।
Stroke ব্যবহারের সাধারণ সিনট্যাক্স:
<element stroke="color">
উদাহরণ:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50" fill="yellow" stroke="blue" stroke-width="5" />
</svg>
এখানে, <circle> উপাদানটির অভ্যন্তরীণ অংশ হলুদ (yellow) এবং বাইরের সীমা নীল (blue) রঙের হবে, এবং স্ট্রোকের প্রস্থ 5 পিক্সেল হবে।
Stroke এর অন্যান্য মান:
- Color Names: যেমন
black,white,green, ইত্যাদি। - Hexadecimal Color Code: যেমন
#000000(কালো),#FF5733(কমলা), ইত্যাদি। - RGB Color: যেমন
rgb(0, 0, 0)(কালো),rgb(0, 255, 0)(সবুজ), ইত্যাদি। - RGBA Color: যেমন
rgba(0, 0, 255, 0.5)(অর্ধস্বচ্ছ নীল)। - CurrentColor: যা CSS এর
colorপ্রপার্টির মানকে গ্রহণ করে।
3. Stroke Width
Stroke-width অ্যাট্রিবিউট দিয়ে স্ট্রোকের প্রস্থ বা পাতলা-পুরু নির্ধারণ করা যায়। এর মাধ্যমে স্ট্রোকের গভীরতা বা প্রস্থ নিয়ন্ত্রণ করা হয়।
Stroke-width ব্যবহারের সাধারণ সিনট্যাক্স:
<element stroke="color" stroke-width="value">
উদাহরণ:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50" fill="yellow" stroke="black" stroke-width="10" />
</svg>
এখানে, স্ট্রোকের প্রস্থ 10 পিক্সেল হবে, এবং বাইরের সীমা কালো (black) রঙের হবে।
4. Stroke Line Cap এবং Stroke Line Join
এসভিজি স্ট্রোকের টার্মিনেশন (শেষ) এবং সংযোগ (join) কেমন হবে তা কাস্টমাইজ করা যায় stroke-linecap এবং stroke-linejoin প্রপার্টির মাধ্যমে।
stroke-linecap:
- এটি স্ট্রোকের শেষের আকৃতি নির্ধারণ করে, যেমন বৃত্তাকার (round), বর্গাকার (square) বা সোজা (butt)।
উদাহরণ:
<path d="M10 10 L90 90" stroke="green" stroke-width="5" stroke-linecap="round" />stroke-linejoin:
- এটি স্ট্রোকের সংযোগের কোণ নির্ধারণ করে, যেমন বৃত্তাকার (round), মিটিং (miter) বা বাঁকানো (bevel)।
উদাহরণ:
<path d="M10 10 L90 10 L90 90" stroke="blue" stroke-width="5" stroke-linejoin="bevel" />
5. Fill-opacity এবং Stroke-opacity
এসভিজি গ্রাফিক্সের ফিল এবং স্ট্রোকের স্বচ্ছতা নিয়ন্ত্রণ করতে fill-opacity এবং stroke-opacity ব্যবহার করা হয়। এগুলি একে অপরের জন্য আলাদা আলাদা স্বচ্ছতার মান নির্ধারণ করে।
- fill-opacity: ফিলের স্বচ্ছতা নিয়ন্ত্রণ করে।
- stroke-opacity: স্ট্রোকের স্বচ্ছতা নিয়ন্ত্রণ করে।
উদাহরণ:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50" fill="red" fill-opacity="0.5" stroke="black" stroke-width="5" stroke-opacity="0.8" />
</svg>
এখানে, ফিল লাল (red) রঙের হবে, তবে অর্ধস্বচ্ছ (0.5) হবে, এবং স্ট্রোক কালো (black) রঙের হবে, তবে এটি আরো কম স্বচ্ছ (0.8) হবে।
সারাংশ
এসভিজি গ্রাফিক্সে fill এবং stroke বৈশিষ্ট্যগুলি গ্রাফিক্সের অভ্যন্তরীণ অংশ এবং বাইরের সীমানা বা রেখার রঙ নিয়ন্ত্রণ করে। fill দিয়ে গ্রাফিক্সের ভিতরের অংশের রং নির্ধারণ করা হয়, এবং stroke দিয়ে তার বাইরের সীমানার রং ও প্রস্থ নির্ধারণ করা হয়। এছাড়াও, stroke-width, stroke-linecap, stroke-linejoin, fill-opacity এবং stroke-opacity ব্যবহারের মাধ্যমে আরও কাস্টমাইজেশন করা যায়। এসভিজি এর এই বৈশিষ্ট্যগুলো আপনাকে খুব সহজে সুন্দর এবং মানসম্মত গ্রাফিক্স তৈরি করতে সাহায্য করবে।
Read more
