SVG का अर्थ स्केलेबल वेक्टर ग्राफिक्स है। आप HTML5 में SVG का उपयोग करके सर्कल, आयत, रेखा आदि आकार आसानी से बना सकते हैं। आइए SVG लोगो बनाने का एक उदाहरण देखें। इसके लिए हम एक लीनियर ग्रेडिएंट बनाएंगे।
उदाहरण
SVG लोगो बनाने के लिए निम्न कोड चलाएं:
<!DOCTYPE html> <html> <head> <title>HTML5 SVG लोगो</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>
<defs> सेक्शन में ग्रेडिएंट परिभाषित किया गया है, जिसे fill="url(#lgrad)" द्वारा दीर्घवृत्त पर लागू किया गया है।
