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

SVG মানে স্কেলেবল ভেক্টর গ্রাফিক্স এবং এটি XML-এ 2D-গ্রাফিক্স এবং গ্রাফিকাল অ্যাপ্লিকেশন বর্ণনা করার জন্য একটি ভাষা এবং XML তারপর একটি SVG ভিউয়ার দ্বারা রেন্ডার করা হয়। বেশিরভাগ ওয়েব ব্রাউজার SVG প্রদর্শন করতে পারে ঠিক যেমন তারা PNG, GIF, এবং JPG প্রদর্শন করতে পারে।

আপনি HTML5 এ সহজে 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 লোগো আঁকবেন?

উদাহরণ

আউটপুট