এসভিজি (Scalable Vector Graphics) ওয়েব ডিজাইনে ব্যবহৃত একটি শক্তিশালী ফরম্যাট, যা স্কেলেবল এবং দ্রুত লোড হওয়ার জন্য বেশ জনপ্রিয়। এসভিজি ফাইলগুলি জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কের সাথে সংযুক্ত করে ব্যবহারকারীর অভিজ্ঞতা উন্নত করা যায়, যেমন React, Vue, Angular, ইত্যাদির মধ্যে। এই ফ্রেমওয়ার্কগুলির মাধ্যমে এসভিজি উপাদানগুলিকে কাস্টমাইজ করা এবং ডায়নামিকভাবে রেন্ডার করা সম্ভব, যা ওয়েব অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং রেসপন্সিভ করে তোলে।
এখানে আমরা দেখব কিভাবে React এবং Vue.js-এ এসভিজি ইন্টিগ্রেট করা যায়।
1. React এর সাথে SVG Integration
React একটি জনপ্রিয় JavaScript library যা ইউজার ইন্টারফেস তৈরি করার জন্য ব্যবহৃত হয়। React-এ এসভিজি উপাদানগুলি অন্তর্ভুক্ত করা খুব সহজ, কারণ React JSX তে এসভিজি ফাইলগুলি HTML এর মতোই রেন্ডার করতে সক্ষম।
React-এ Inline SVG ব্যবহার
React-এ এসভিজি ফাইলটি ইনলাইন (inline) হিসেবে ব্যবহার করা যায়, যেখানে আপনি সরাসরি JSX তে এসভিজি কোড লিখতে পারেন।
উদাহরণ: Inline SVG in React:
import React from 'react';
function App() {
return (
<div>
<h1>Welcome to React SVG Integration</h1>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>
</div>
);
}
export default App;
এখানে, একটি বৃত্ত (circle) এসভিজি ফাইল হিসেবে React JSX-এ ব্যবহার করা হয়েছে।
React-এ SVG ফাইল ইমপোর্ট করা
React-এ আপনি সরাসরি এসভিজি ফাইল ইমপোর্ট করে ব্যবহৃত React component হিসেবে ব্যবহার করতে পারেন।
উদাহরণ: SVG ফাইল ইমপোর্ট এবং ব্যবহার:
import React from 'react';
import { ReactComponent as MyIcon } from './icon.svg';
function App() {
return (
<div>
<h1>React with SVG</h1>
<MyIcon width="100" height="100" />
</div>
);
}
export default App;
এখানে:
import { ReactComponent as MyIcon } from './icon.svg';এই লাইনটি এসভিজি ফাইলকে React component হিসেবে ইমপোর্ট করে এবং তারপর<MyIcon />কম্পোনেন্ট হিসেবে ব্যবহার করা হয়।
React-এ SVG অ্যানিমেশন এবং ইন্টারঅ্যাকটিভিটি
React-এ আপনি JavaScript অথবা CSS ব্যবহার করে এসভিজি উপাদানে অ্যানিমেশন এবং ইন্টারঅ্যাকটিভিটি যোগ করতে পারেন।
উদাহরণ: Hover Effect on SVG in React
import React, { useState } from 'react';
function App() {
const [hover, setHover] = useState(false);
return (
<div>
<h1>React SVG Hover Effect</h1>
<svg
width="100"
height="100"
xmlns="http://www.w3.org/2000/svg"
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
>
<circle cx="50" cy="50" r="40" fill={hover ? 'green' : 'blue'} />
</svg>
</div>
);
}
export default App;
এখানে, onMouseEnter এবং onMouseLeave ইভেন্ট ব্যবহার করে এসভিজি বৃত্তের রঙ পরিবর্তন করা হচ্ছে।
2. Vue.js এর সাথে SVG Integration
Vue.js একটি প্রগ্রেসিভ ফ্রেমওয়ার্ক যা ওয়েব অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়। Vue-এ এসভিজি ব্যবহারের জন্য v-bind অথবা <svg> এর মধ্যে ডাইরেক্টলি এসভিজি কোড ব্যবহার করা যেতে পারে।
Vue.js-এ Inline SVG ব্যবহার
Vue-এ আপনি সরাসরি template এর মধ্যে এসভিজি কোড লিখতে পারেন।
উদাহরণ: Inline SVG in Vue.js
<template>
<div>
<h1>Welcome to Vue.js SVG Integration</h1>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
এখানে, Vue-তে এসভিজি ইনলাইন ব্যবহার করা হয়েছে, যেখানে বৃত্তের আকার এবং রঙ সরাসরি template এ কোড করা হয়েছে।
Vue.js-এ SVG ফাইল ইমপোর্ট এবং ব্যবহার
Vue-তে আপনি একইভাবে এসভিজি ফাইল ইমপোর্ট করতে পারেন এবং কম্পোনেন্টের মতো ব্যবহার করতে পারেন।
উদাহরণ: SVG ফাইল ইমপোর্ট এবং ব্যবহার Vue.js-এ
<template>
<div>
<h1>Vue with SVG</h1>
<Logo class="logo" />
</div>
</template>
<script>
import Logo from './assets/logo.svg';
export default {
name: 'App',
components: {
Logo
}
}
</script>
এখানে, Logo কম্পোনেন্টটি এসভিজি ফাইলকে Vue কম্পোনেন্ট হিসেবে ব্যবহার করছে।
Vue.js-এ SVG অ্যানিমেশন এবং ইন্টারঅ্যাকটিভিটি
Vue-এ আপনি Vue Data Binding অথবা CSS ব্যবহার করে এসভিজি গ্রাফিক্সের উপর অ্যানিমেশন ও ইন্টারঅ্যাকটিভিটি যোগ করতে পারেন।
উদাহরণ: Hover Effect on SVG in Vue.js
<template>
<div>
<h1>Vue.js SVG Hover Effect</h1>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" @mouseover="hover = true" @mouseleave="hover = false">
<circle cx="50" cy="50" r="40" :fill="hover ? 'green' : 'blue'" />
</svg>
</div>
</template>
<script>
export default {
data() {
return {
hover: false
};
}
}
</script>
এখানে, @mouseover এবং @mouseleave ইভেন্ট ব্যবহার করে বৃত্তের রঙ পরিবর্তন করা হয়েছে। v-bind এর মাধ্যমে রঙ ডায়নামিকভাবে পরিবর্তিত হয়।
সারাংশ
এসভিজি ফাইলগুলির সাথে React এবং Vue.js ইন্টিগ্রেট করার মাধ্যমে আপনি সহজেই গ্রাফিক্স এবং UI উপাদানগুলির ইন্টারঅ্যাকটিভিটি, অ্যানিমেশন এবং কাস্টমাইজেশন যোগ করতে পারেন। React-এ এসভিজি ইনলাইন অথবা কম্পোনেন্ট হিসেবে ব্যবহার করা যেতে পারে, এবং Vue.js-এ একইভাবে এসভিজি কোড বা ফাইল ইমপোর্ট করে সহজে ব্যবহৃত হয়। এই ইন্টিগ্রেশন ওয়েব অ্যাপ্লিকেশন এবং ডিজাইনকে আরও গতিশীল এবং ইউজার-ফ্রেন্ডলি করে তোলে।
Read more
