এসভিজি (SVG) একটি অত্যন্ত কার্যকরী গ্রাফিক্স ফরম্যাট যা ওয়েব ডিজাইনে বহুল ব্যবহৃত হয়। এসভিজি ফাইলগুলির মধ্যে viewBox এবং preserveAspectRatio প্রপার্টি ব্যবহার করা হয় গ্রাফিক্সের সঠিক প্রস্থ, উচ্চতা এবং স্কেলিং নিয়ন্ত্রণ করতে। এই দুটি প্রপার্টি এসভিজি উপাদানগুলির ডিসপ্লে এবং সঠিক অনুপাত বজায় রাখতে গুরুত্বপূর্ণ ভূমিকা পালন করে।
ViewBox
viewBox এসভিজি এলিমেন্টের মধ্যে দৃশ্যমান এলাকা নির্ধারণ করতে ব্যবহৃত হয়। এটি মূলত একটি সমন্বিত সিস্টেমের মতো কাজ করে যা একটি নির্দিষ্ট অর্সে সমস্ত গ্রাফিক্স উপাদানগুলোকে উপস্থাপন করে। viewBox এর মাধ্যমে আপনি এসভিজি চিত্রের স্কেলিং এবং পজিশনিং নিয়ন্ত্রণ করতে পারবেন।
viewBox এর গঠন:
viewBox="minX minY width height"
- minX এবং minY: এসভিজি চিত্রের বাম উপরের কোণ থেকে শুরু হওয়া পজিশন।
- width এবং height: এসভিজি চিত্রের দৃশ্যমান পরিসরের প্রস্থ এবং উচ্চতা।
উদাহরণ:
<svg width="500" height="500" viewBox="0 0 200 200">
<circle cx="100" cy="100" r="50" fill="red" />
</svg>
ব্যাখ্যা:
- এখানে
viewBox="0 0 200 200"দ্বারা এসভিজি চিত্রের দৃশ্যমান এলাকা ২০০ পিক্সেল প্রস্থ এবং ২০০ পিক্সেল উচ্চতা নির্ধারণ করা হয়েছে। - বৃত্তের সেন্টার
(100, 100)এবং ব্যাসার্ধ ৫০ পিক্সেল, তবেviewBoxএর কারণে এটি স্কেল হবে এবং ৫০০x৫০০ পিক্সেলের ক্যানভাসে ঠিকভাবে উপস্থাপন হবে।
PreserveAspectRatio
preserveAspectRatio এসভিজি উপাদানের স্কেলিং আচরণ নিয়ন্ত্রণ করে। এটি নিয়ন্ত্রণ করে কিভাবে এসভিজি চিত্রটি বিভিন্ন আকারের ক্যানভাসে স্কেল হবে এবং তার অরিজিনাল আন্ডারলাইন অনুপাত বজায় থাকবে কি না।
preserveAspectRatio এর গঠন:
preserveAspectRatio="align meetOrSlice"
- align: এটি চিত্রের অবস্থান নিয়ন্ত্রণ করে (যেমন, বাম-ওপর, কেন্দ্র, ডান-নীচে ইত্যাদি)।
- meet: এটি চিত্রকে এমনভাবে স্কেল করবে যাতে চিত্রটি সম্পূর্ণরূপে দৃশ্যমান থাকে এবং চিত্রের অরিজিনাল অনুপাত বজায় থাকে।
- slice: এটি চিত্রের আকার এমনভাবে স্কেল করবে যাতে পুরো ক্যানভাস পূর্ণ হয়, তবে চিত্রের কিছু অংশ কাটা যেতে পারে।
উদাহরণ:
<svg width="500" height="500" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
<circle cx="100" cy="100" r="50" fill="blue" />
</svg>
ব্যাখ্যা:
preserveAspectRatio="xMidYMid meet"দ্বারা এসভিজি চিত্রটি ক্যানভাসের কেন্দ্রভাগে থাকবে এবং তার আন্ডারলাইন অনুপাত বজায় থাকবে। অর্থাৎ, চিত্রটি স্কেল হবে এমনভাবে যাতে পুরো চিত্র ক্যানভাসে প্রদর্শিত হয় এবং তার আসল অনুপাত বজায় থাকবে।- যদি আপনি
meetএর পরিবর্তেsliceব্যবহার করেন, চিত্রটি স্কেল হবে এবং ক্যানভাসের পুরো এলাকা পূর্ণ হবে, তবে চিত্রের কিছু অংশ কাটা যেতে পারে।
ViewBox এবং PreserveAspectRatio এর একসাথে ব্যবহার
এসভিজি গ্রাফিক্সে যখন viewBox এবং preserveAspectRatio একসাথে ব্যবহার করা হয়, তখন এটি চিত্রের স্কেলিং এবং পজিশনিংকে অত্যন্ত কার্যকরীভাবে নিয়ন্ত্রণ করে। viewBox দৃশ্যমান এলাকা নির্ধারণ করে এবং preserveAspectRatio এর মাধ্যমে চিত্রটি সেই এলাকা অনুযায়ী স্কেল এবং অ্যালাইন করা হয়।
উদাহরণ:
<svg width="500" height="500" viewBox="0 0 300 300" preserveAspectRatio="xMinYMin meet">
<rect x="50" y="50" width="200" height="200" fill="orange" />
</svg>
ব্যাখ্যা:
viewBox="0 0 300 300"এসভিজি চিত্রের দৃশ্যমান এলাকা ৩০০ পিক্সেল প্রস্থ এবং ৩০০ পিক্সেল উচ্চতা নির্ধারণ করে।preserveAspectRatio="xMinYMin meet"দ্বারা চিত্রটি ক্যানভাসের বাম-উপর কোণে থাকবে এবং তার অরিজিনাল অনুপাত বজায় থাকবে।
সারাংশ
viewBox এবং preserveAspectRatio এসভিজি ফাইলের স্কেলিং এবং পজিশনিংকে নিয়ন্ত্রণ করতে ব্যবহৃত অত্যন্ত গুরুত্বপূর্ণ প্রপার্টি।
- viewBox গ্রাফিক্সের দৃশ্যমান এলাকা নির্ধারণ করে, যা গ্রাফিক্সের আকার এবং অবস্থান নিয়ন্ত্রণ করতে সহায়তা করে।
- preserveAspectRatio এসভিজি চিত্রের স্কেলিং এবং অবস্থান নিয়ন্ত্রণ করে, যাতে চিত্রের আন্ডারলাইন অনুপাত বজায় থাকে এবং ক্যানভাসে সঠিকভাবে প্রদর্শিত হয়।
এসভিজি গ্রাফিক্স ডিজাইন করার সময় এই দুটি প্রপার্টি আপনাকে চিত্রের আকার এবং পজিশনিং সম্পর্কে আরো নিখুঁত নিয়ন্ত্রণ প্রদান করে।
Read more
