HTML5 में SVG लोगो कैसे आकर्षित करें?

SVG का अर्थ स्केलेबल वेक्टर ग्राफिक्स है और यह XML में 2D-ग्राफिक्स और ग्राफिकल अनुप्रयोगों का वर्णन करने के लिए एक भाषा है और XML को एक SVG व्यूअर द्वारा प्रस्तुत किया जाता है। अधिकांश वेब ब्राउज़र एसवीजी प्रदर्शित कर सकते हैं जैसे वे पीएनजी, जीआईएफ, और जेपीजी प्रदर्शित कर सकते हैं।

आप आसानी से 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 लोगो कैसे आकर्षित करें?

उदाहरण

आउटपुट