HTML5-এ SVG লোগো কীভাবে আঁকবেন?

HTML5-এ SVG লোগো আঁকার পদ্ধতি

SVG-এর полন রূপ Scalable Vector Graphics। এটি XML-এ ২D-গ্রাফিক্স এবং গ্রাফিক্যাল অ্যাপ্লিকেশন বর্ণনার একটি ভাষা, जिसे SVG ভিউয়ার রেন্ডার করে। অধিকাংশ ওয়েব ব্রাউজার PNG, GIF, JPG-এর মতো SVG প্রদর্শন করতে পারে।

HTML5-এ SVG ব্যবহার করে বৃত্ত, আয়ত, রেখা ইত্যাদি আকৃতি সহজে আঁকা যায়। চলুন একটি উদাহরণ দেখি SVG লোগো আঁকার। এর জন্য আমরা একটি লিনিয়ার গ্রেডিয়েন্ট তৈরি করব।

উদাহরণ

নিচের কোডটি চালিয়ে SVG লোগো আঁকার পরীক্ষা করতে পারেন:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 SVG logo</title>
  </head>
  <body>
    <svg height="170" width="400">
      <defs>
        <linearGradient id="lgrad" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color:rgb(184,78,43);stop-opacity:1" />
          <stop offset="50%" style="stop-color:rgb(241,241,241);stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(255,141,52);stop-opacity:1" />
        </linearGradient>
      </defs>
      <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#lgrad)" />
      <text fill="rgb(141,218,255)" font-size="40" font-family="Verdana" x="50" y="86">logo</text>
    </svg>
  </body>
</html>

আউটপুট

HTML5-এ SVG লোগো কীভাবে আঁকবেন?

ব্যাখ্যা:

<defs> — ডেফিনিশনাল এলিমেন্ট, যেখানে গ্রেডিয়েন্ট, প্যাটার্ন ইত্যাদি সংজ্ঞায়িত করা হয়
<linearGradient> — লিনিয়ার গ্রেডিয়েন্ট তৈরি করে, x1,y1 থেকে x2,y2 দিকের দিকে
<stop> — গ্রেডিয়েন্টের রঙের স্টপ পয়েন্ট, offset দিয়ে অবস্থান নির্ধারণ
fill="url(#lgrad)" — গ্রেডিয়েন্ট রেফারেন্স করে ভরাল