SVG এর মাধ্যমে Vector Graphics তৈরি

SVG (Scalable Vector Graphics) হলো একটি শক্তিশালী XML-ভিত্তিক ফরম্যাট যা দুই-মাত্রিক ভেক্টর গ্রাফিক্স তৈরি এবং প্রদর্শন করার জন্য ব্যবহৃত হয়। ভেক্টর গ্রাফিক্স পিক্সেল-ভিত্তিক র‍্যাস্টার গ্রাফিক্সের বিপরীতে, যেখানে প্রতিটি উপাদান পয়েন্ট, রেখা, আকার এবং রঙের সমন্বয়ে গঠিত হয়। এর ফলে, SVG গ্রাফিক্স কোন মাপ পরিবর্তনের উপরেও স্পষ্ট এবং ঝকঝকে থাকে, যা ওয়েব ডিজাইন এবং অন্যান্য ডিজিটাল মিডিয়ায় অত্যন্ত উপকারী।

১. ভেক্টর গ্রাফিক্স কী?

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

বেনিফিটস:

• স্কেলযোগ্যতা: কোন মাপ পরিবর্তনের উপরেও স্পষ্টতা বজায় থাকে।
• ফাইল সাইজ: সাধারণত র‍্যাস্টার গ্রাফিক্সের তুলনায় ছোট।
• সম্পাদনযোগ্যতা: সহজে কোড বা গ্রাফিক্স সফটওয়্যার দিয়ে সম্পাদন করা যায়।

২. SVG কিভাবে কাজ করে?

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

মূল উপাদানসমূহ:

• <svg> এলিমেন্ট: পুরো SVG ড্রয়িং এর জন্য কন্টেইনার হিসেবে কাজ করে।
• গ্রাফিক্স এলিমেন্টস: যেমন <line>, <rect>, <circle>, <ellipse>, <path>, <polygon>, <polyline>, এবং <text>।
• স্টাইলিং: CSS ব্যবহার করে গ্রাফিক্সের স্টাইল পরিবর্তন করা যায়।
• ট্রান্সফরমেশন: transform অ্যাট্রিবিউট ব্যবহার করে গ্রাফিক্সকে স্কেল, রোটেট, ট্রান্সলেট ইত্যাদি করা যায়।
• অ্যানিমেশন: SMIL, CSS, এবং JavaScript ব্যবহার করে SVG গ্রাফিক্সে অ্যানিমেশন যোগ করা যায়।

৩. SVG এর মৌলিক সিনট্যাক্স এবং এলিমেন্টস

৩.১. মৌলিক SVG এলিমেন্ট

    <h2>মৌলিক SVG উদাহরণ</h2>
    <svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
        <!-- রেখা -->
        <line x1="50" y1="50" x2="450" y2="50" stroke="blue" stroke-width="2" />

        <!-- বর্গ -->
        <rect x="100" y="100" width="150" height="150" fill="red" stroke="black" stroke-width="3" />

        <!-- বৃত্ত -->
        <circle cx="250" cy="200" r="50" fill="green" stroke="black" stroke-width="2" />

        <!-- এলিপস -->
        <ellipse cx="400" cy="350" rx="100" ry="50" fill="yellow" stroke="black" stroke-width="2" />

        <!-- পাথ -->
        <path d="M50 350 L150 50 L250 350 Z" fill="orange" stroke="black" stroke-width="2" />

        <!-- টেক্সট -->
        <text x="250" y="50" font-family="Arial" font-size="30" fill="blue" text-anchor="middle">
            হ্যালো, SVG!
        </text>
    </svg>

ব্যাখ্যা:

• <line>: একটি সরল রেখা আঁকে।
  • x1, y1: রেখার শুরু পয়েন্ট।
  • x2, y2: রেখার শেষ পয়েন্ট।
  • stroke: রেখার রঙ।
  • stroke-width: রেখার পুরুত্ব।
• <rect>: একটি আয়তক্ষেত্র (বর্গ) আঁকে।
  • x, y: রেক্ট্যাঙ্গেলের উপরের বাম কোণ।
  • width, height: রেক্ট্যাঙ্গেলের প্রস্থ এবং উচ্চতা।
  • fill: রেক্ট্যাঙ্গেলের ফিল রঙ।
  • stroke: রেক্ট্যাঙ্গেলের স্ট্রোক রঙ।
  • stroke-width: স্ট্রোকের পুরুত্ব।
• <circle>: একটি বৃত্ত আঁকে।
  • cx, cy: বৃত্তের কেন্দ্রের x এবং y কো-অর্ডিনেট।
  • r: বৃত্তের রেডিয়াস।
  • fill: বৃত্তের ফিল রঙ।
  • stroke: বৃত্তের স্ট্রোক রঙ।
  • stroke-width: স্ট্রোকের পুরুত্ব।
• <ellipse>: একটি এলিপস আঁকে।
  • cx, cy: এলিপসের কেন্দ্রের x এবং y কো-অর্ডিনেট।
  • rx, ry: এলিপসের রেডিয়াস এক্স এবং রেডিয়াস ওয়াই।
  • fill: এলিপসের ফিল রঙ।
  • stroke: এলিপসের স্ট্রোক রঙ।
  • stroke-width: স্ট্রোকের পুরুত্ব।
• <path>: একটি জটিল পাথ আঁকে, যা বিভিন্ন পয়েন্ট এবং লাইন দিয়ে গঠিত।
  • d: পাথের ডেটা যা পাথের ফর্ম নির্ধারণ করে।
    • M: মুভ টু (পাথের শুরু পয়েন্ট)।
    • L: লাইন টু (পথের মধ্যে রেখা আঁকে)।
    • Z: ক্লোজ পাথ (পাথকে বন্ধ করে)।
  • fill: পাথের ফিল রঙ।
  • stroke: পাথের স্ট্রোক রঙ।
  • stroke-width: স্ট্রোকের পুরুত্ব।
• <text>: SVG এ টেক্সট যোগ করে।
  • x, y: টেক্সটের অবস্থান নির্ধারণ করে।
  • font-family: টেক্সটের ফন্ট নির্ধারণ করে।
  • font-size: টেক্সটের সাইজ নির্ধারণ করে।
  • fill: টেক্সটের রঙ নির্ধারণ করে।
  • text-anchor: টেক্সটের এলাইনমেন্ট নির্ধারণ করে, যেমন 'start', 'middle', 'end'।

৪. SVG এ বিভিন্ন Shapes তৈরি

৪.১. রেখা (Line)

<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
    <line x1="50" y1="50" x2="450" y2="50" stroke="blue" stroke-width="2" />
</svg>

ব্যাখ্যা:

• একটি সরল রেখা ৫০,৫০ থেকে ৪৫০,৫০ পয়েন্ট পর্যন্ত আঁকা হয়েছে।
• stroke="blue" রেখার রঙ নির্ধারণ করে।
• stroke-width="2" রেখার পুরুত্ব নির্ধারণ করে।

৪.২. বর্গ (Rectangle)

<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
    <rect x="100" y="100" width="150" height="150" fill="red" stroke="black" stroke-width="3" />
</svg>

ব্যাখ্যা:

• একটি আয়তক্ষেত্র ১০০,১০০ পয়েন্ট থেকে শুরু করে ১৫০ প্রস্থ এবং ১৫০ উচ্চতায় আঁকা হয়েছে।
• fill="red" রেক্ট্যাঙ্গেলের ফিল রঙ নির্ধারণ করে।
• stroke="black" এবং stroke-width="3" স্ট্রোকের রঙ এবং পুরুত্ব নির্ধারণ করে।

৪.৩. বৃত্ত (Circle)

<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
    <circle cx="250" cy="200" r="50" fill="green" stroke="black" stroke-width="2" />
</svg>

ব্যাখ্যা:

• একটি বৃত্ত ২৫০,২০০ পয়েন্টে কেন্দ্রস্থলে এবং ৫০ রেডিয়াসে আঁকা হয়েছে।
• fill="green" বৃত্তের ফিল রঙ নির্ধারণ করে।
• stroke="black" এবং stroke-width="2" স্ট্রোকের রঙ এবং পুরুত্ব নির্ধারণ করে।

৪.৪. এলিপস (Ellipse)

<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
    <ellipse cx="400" cy="350" rx="100" ry="50" fill="yellow" stroke="black" stroke-width="2" />
</svg>

ব্যাখ্যা:

• একটি এলিপস ৪০০,৩৫০ পয়েন্টে কেন্দ্রস্থলে এবং ১০০ এক্স রেডিয়াস এবং ৫০ ওয়াই রেডিয়াসে আঁকা হয়েছে।
• fill="yellow" এলিপসের ফিল রঙ নির্ধারণ করে।
• stroke="black" এবং stroke-width="2" স্ট্রোকের রঙ এবং পুরুত্ব নির্ধারণ করে।

৪.৫. পাথ (Path)

<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
    <path d="M50 350 L150 50 L250 350 Z" fill="orange" stroke="black" stroke-width="2" />
</svg>

ব্যাখ্যা:

• একটি জটিল পাথ ৫০,৩৫০ পয়েন্ট থেকে শুরু করে ১৫০,৫০ পয়েন্ট পর্যন্ত রেখা আঁকে, তারপর ২৫০,৩৫০ পয়েন্টে ফিরিয়ে আনে এবং পাথকে বন্ধ করে।
• fill="orange" পাথের ফিল রঙ নির্ধারণ করে।
• stroke="black" এবং stroke-width="2" স্ট্রোকের রঙ এবং পুরুত্ব নির্ধারণ করে।

৫. SVG এ টেক্সট রেন্ডারিং

৫.১. মৌলিক টেক্সট যোগ করা

<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
    <text x="250" y="50" font-family="Arial" font-size="30" fill="blue" text-anchor="middle">
        হ্যালো, SVG!
    </text>
</svg>

ব্যাখ্যা:

• <text> এলিমেন্ট SVG এ টেক্সট যোগ করে।
• x="250" y="50" টেক্সটের অবস্থান নির্ধারণ করে।
• font-family="Arial" টেক্সটের ফন্ট নির্ধারণ করে।
• font-size="30" টেক্সটের সাইজ নির্ধারণ করে।
• fill="blue" টেক্সটের রঙ নির্ধারণ করে।
• text-anchor="middle" টেক্সটের এলাইনমেন্ট নির্ধারণ করে, এখানে কেন্দ্রে এলাইনমেন্ট করা হয়েছে।

৫.২. CSS ব্যবহার করে টেক্সট স্টাইলিং

<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
    <style>
        .title {
            font-family: 'Verdana';
            font-size: 40px;
            fill: #FF6347;
            text-decoration: underline;
        }
    </style>
    <text x="250" y="100" class="title" text-anchor="middle">
        SVG টেক্সট
    </text>
</svg>

ব্যাখ্যা:

• <style> এলিমেন্ট SVG এর মধ্যে CSS স্টাইল শিট।
• .title ক্লাস টেক্সটের ফন্ট, সাইজ, রঙ, এবং অন্যান্য স্টাইল নির্ধারণ করে।
• class="title" টেক্সটে CSS ক্লাস অ্যাপ্লাই করে স্টাইলিং প্রয়োগ করা হয়।

৬. SVG এ ইমেজ রেন্ডারিং

৬.১. SVG এ ইমেজ যোগ করা

<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
    <image href="your-image-file.jpg" x="50" y="50" width="200" height="150" />
</svg>

ব্যাখ্যা:

• <image> এলিমেন্ট SVG এ ইমেজ যোগ করে।
• href="your-image-file.jpg" ইমেজের উৎস নির্ধারণ করে।
• x="50" y="50" ইমেজের অবস্থান নির্ধারণ করে।
• width="200" height="150" ইমেজের প্রস্থ এবং উচ্চতা নির্ধারণ করে।

৬.২. ইমেজ রোটেট এবং ট্রান্সফর্ম করা

<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
    <image href="your-image-file.jpg" x="100" y="100" width="200" height="150" transform="rotate(45 200 175)" />
</svg>

ব্যাখ্যা:

• transform="rotate(45 200 175)" ইমেজকে ৪৫ ডিগ্রি রোটেট করে এবং ২০০,১৭৫ পয়েন্টে কেন্দ্রস্থলে নিয়ে আসে।
  • rotate(angle cx cy): angle হল রোটেশনের কোণ, cx এবং cy হল রোটেশনের কেন্দ্র।

৭. SVG এ অ্যানিমেশন

৭.১. SMIL (Synchronized Multimedia Integration Language) অ্যানিমেশন

<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="200" r="30" fill="blue">
        <animate attributeName="cx" from="50" to="450" dur="5s" repeatCount="indefinite" />
    </circle>
</svg>

ব্যাখ্যা:

• <animate> এলিমেন্ট বৃত্তের cx অ্যাট্রিবিউট অ্যানিমেট করে, যা বৃত্তকে ডানদিকে সরিয়ে যায় এবং পুনরাবৃত্তি করে।
  • attributeName="cx": কোন অ্যাট্রিবিউট অ্যানিমেট হবে।
  • from="50" to="450": অ্যাট্রিবিউটের মান কিভাবে পরিবর্তিত হবে।
  • dur="5s": অ্যানিমেশনের সময়কাল।
  • repeatCount="indefinite": অ্যানিমেশন কতবার পুনরাবৃত্তি হবে।

৭.২. CSS অ্যানিমেশন

<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
    <style>
        .pulse {
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% { r: 20; fill: red; }
            50% { r: 30; fill: orange; }
            100% { r: 20; fill: red; }
        }
    </style>
    <circle cx="250" cy="200" r="20" fill="red" class="pulse" />
</svg>

ব্যাখ্যা:

• CSS @keyframes: অ্যানিমেশনের ধাপ নির্ধারণ করে।
• .pulse ক্লাস: বৃত্তের রেডিয়াস এবং রঙ পরিবর্তন করে।
• animation: pulse 2s infinite;: অ্যানিমেশন নাম, সময়কাল এবং পুনরাবৃত্তির সংখ্যা নির্ধারণ করে।

৭.৩. JavaScript অ্যানিমেশন

<svg id="mySvg" width="500" height="400" xmlns="http://www.w3.org/2000/svg">
    <circle id="myCircle" cx="50" cy="200" r="30" fill="green" />
</svg>

<script>
    const circle = document.getElementById('myCircle');
    let posX = 50;
    let speed = 2;
    
    function animate() {
        posX += speed;
        if (posX > 450 || posX < 50) {
            speed = -speed;
        }
        circle.setAttribute('cx', posX);
        requestAnimationFrame(animate);
    }
    
    animate();
</script>

ব্যাখ্যা:

• requestAnimationFrame: মসৃণ অ্যানিমেশন নিশ্চিত করতে ব্রাউজারের রিফ্রেশ রেট অনুযায়ী ফাংশন কল করে।
• setAttribute: বৃত্তের cx অ্যাট্রিবিউট পরিবর্তন করে মুভমেন্ট তৈরি করে।

৮. SVG এ ইন্টারেক্টিভ গ্রাফিক্স

৮.১. হোভার ইভেন্টে রঙ পরিবর্তন

<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
    <style>
        .hover-circle:hover {
            fill: purple;
            cursor: pointer;
        }
    </style>
    <circle cx="250" cy="200" r="50" fill="blue" class="hover-circle" />
</svg>

ব্যাখ্যা:

• CSS :hover পছন্দ: মাউস হোভার করলে বৃত্তের রঙ পরিবর্তন করে এবং কার্সর পরিবর্তন করে।

৮.২. ক্লিক ইভেন্টে রঙ পরিবর্তন (JavaScript ব্যবহার করে)

<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
    <circle id="interactiveCircle" cx="250" cy="200" r="50" fill="teal" />
</svg>

<script>
    const circle = document.getElementById('interactiveCircle');

    circle.addEventListener('click', function() {
        const currentColor = circle.getAttribute('fill');
        const newColor = currentColor === 'teal' ? 'orange' : 'teal';
        circle.setAttribute('fill', newColor);
    });
</script>

ব্যাখ্যা:

• JavaScript ইভেন্ট হ্যান্ডলার: বৃত্তে ক্লিক করলে এর রঙ পরিবর্তন হয়।

৮.৩. মাউস মুভ ইন্টারঅ্যাকশন

<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
    <circle id="myCircle" cx="250" cy="200" r="30" fill="blue" />
</svg>

<script>
    const circle = document.getElementById('myCircle');

    document.addEventListener('mousemove', function(event) {
        const svg = document.getElementById('mySvg');
        const rect = svg.getBoundingClientRect();
        const mouseX = event.clientX - rect.left;
        const mouseY = event.clientY - rect.top;

        circle.setAttribute('cx', mouseX);
        circle.setAttribute('cy', mouseY);
    });
</script>

ব্যাখ্যা:

• মাউস মুভ ইভেন্ট: মাউসের পজিশন অনুযায়ী বৃত্তের অবস্থান পরিবর্তন করে।

৯. Canvas এবং SVG এর তুলনা

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

১০. Best Practices (শ্রেষ্ঠ অনুশীলন)

1. সেমান্টিক এবং অ্যাক্সেসিবিলিটি:
   • Fallback কন্টেন্ট: SVG এলিমেন্টের ভিতরে fallback কন্টেন্ট প্রদান করুন যাতে SVG সমর্থন না করলে ব্যবহারকারীদের তথ্য প্রদান করা যায়।
   • ARIA অ্যাট্রিবিউটস: SVG গ্রাফিক্সকে স্ক্রিন রিডার ব্যবহারকারীদের জন্য বোধগম্য করতে ARIA অ্যাট্রিবিউটস ব্যবহার করুন, যেমন role="img" এবং aria-label।
2. পারফরমেন্স অপ্টিমাইজেশন:
   • Minimize SVG কোড: অপ্রয়োজনীয় স্পেস, কমেন্ট, এবং অতিরিক্ত ট্যাগ বাদ দিন।
   • Optimize ইমেজ এবং রিসোর্স: SVG ফাইলের সাইজ কমাতে টুলস ব্যবহার করুন যেমন SVGO।
3. Responsive Design:
   • ViewBox ব্যবহার: viewBox অ্যাট্রিবিউট ব্যবহার করে SVG গ্রাফিক্সকে রেসপনসিভ করে তুলুন।
   • CSS ব্যবহার: CSS মিডিয়া কুয়েরি ব্যবহার করে SVG এর সাইজ এবং স্টাইল পরিবর্তন করুন বিভিন্ন ডিভাইসের জন্য।
4. স্টাইলিং এবং কাস্টমাইজেশন:
   • CSS এর সাথে সমন্বয়: SVG গ্রাফিক্সকে CSS এর মাধ্যমে স্টাইলিশ করুন এবং তাদের রঙ, সাইজ, এবং অন্যান্য প্রপার্টি পরিবর্তন করুন।
   • JavaScript ইন্টারঅ্যাকশন: SVG গ্রাফিক্সে ইন্টারঅ্যাকশন এবং অ্যানিমেশন যোগ করতে JavaScript ব্যবহার করুন।
5. ব্রাউজার সমর্থন:
   • Cross-Browser Compatibility: নিশ্চিত করুন যে আপনার SVG গ্রাফিক্স সব প্রধান ব্রাউজারে সঠিকভাবে প্রদর্শিত হচ্ছে।
   • Fallbacks প্রদান: পুরানো ব্রাউজারগুলির জন্য fallback ভ্যালিডেশন এবং বিকল্প উপায় বিবেচনা করুন।
6. Accessibility (অ্যাক্সেসিবিলিটি):
   • স্পষ্ট লেবেল: SVG গ্রাফিক্সে স্পষ্ট লেবেল এবং টেক্সট ব্যবহার করুন যাতে স্ক্রিন রিডার ব্যবহারকারীরা সহজে বুঝতে পারে।
   • Keyboard Navigable: ইন্টারেক্টিভ SVG ইলিমেন্টগুলো কীবোর্ডের মাধ্যমে নিয়ন্ত্রণযোগ্য করে তুলুন।
7. Maintenance এবং Readability:
   • কমেন্ট ব্যবহার: SVG কোডে কমেন্ট ব্যবহার করে বিভিন্ন অংশের ব্যাখ্যা দিন।
   • কোড অর্গানাইজেশন: SVG কোডকে সঠিকভাবে অর্গানাইজ করুন যাতে কোড মেইনটেইন করা সহজ হয়।

উপসংহার

HTML5 এর SVG (Scalable Vector Graphics) ওয়েব ডেভেলপমেন্টে ভেক্টর গ্রাফিক্স তৈরির জন্য একটি অত্যন্ত কার্যকরী এবং বহুমুখী টুল। এটি ব্যবহার করে ডেভেলপাররা ইন্টারেক্টিভ, অ্যানিমেটেড, এবং রেসপনসিভ গ্রাফিক্স তৈরি করতে পারে যা ওয়েব পেজকে আরও আকর্ষণীয় এবং তথ্যবহুল করে তোলে। SVG এর স্কেলযোগ্যতা, ইন্টারেক্টিভিটি, এবং স্টাইলিং ক্ষমতা ওয়েব ডিজাইনে ভেক্টর গ্রাফিক্স ব্যবহারের ক্ষেত্রে এটিকে একটি আদর্শ পছন্দ করে তোলে।

টিপস:

• ডকুমেন্টেশন রেফারেন্স: MDN Web Docs - SVG আরও বিস্তারিত জানতে।
• প্র্যাকটিস করুন: বিভিন্ন প্রকল্পে SVG ব্যবহার করে দেখুন এবং বিভিন্ন শেপ, টেক্সট, এবং ইমেজ আঁকার অভ্যাস করুন।
• স্টাইলিং এবং কাস্টমাইজেশন: CSS এবং JavaScript ব্যবহার করে SVG গ্রাফিক্সকে আরও আকর্ষণীয় এবং ইন্টারেক্টিভ করুন।
• অ্যাক্সেসিবিলিটি নিশ্চিত করুন: SVG গ্রাফিক্সকে স্ক্রিন রিডার ব্যবহারকারীদের জন্য বোধগম্য করতে ARIA অ্যাট্রিবিউটস ব্যবহার করুন।
• ব্রাউজার সমর্থন পরীক্ষা করুন: নিশ্চিত করুন যে আপনার টার্গেট অডিয়েন্সের ব্রাউজারগুলি SVG সমর্থন করে।