Introduction to the svg element for scalable vector graphics html in hindi
एचटीएमएल5 वेब डेवलपमेंट में <svg> टैग का उपयोग डिज़ाइन डेवलप वेब पेज में हाइली ग्राफिकल स्केलेबल वेक्टर ग्राफ़िक्स (SVG) हैवी रेज़लुशन इमेज को इन्सर्ट या एम्बेड करने में किया जाता है। SVG इमेज एक हाइली ग्राफिकल इमेज रेज़लुशन फॉर्मेट है, जहा SVG इमेज अन्य ग्रफिक इमेज की तुलना में कम्पलीट इंडिपेंडेंट इमेज फॉर्मेट है, जो वेब डेवलपर को वेब पेज वेबसाइट में एक उच्च क्वालिटी ग्राफिकल इमेज को डायरेक्ट इनपुट और प्रीव्यू फीचर्स प्रदान करता है, SVG इमेज वर्त्तमान समय के कम्पलीट रेस्पोंसिबल इमेज फॉर्मेट प्रीव्यू है।
So let’s know the <svg> image features and function in HTML5 web page design development.
SVG क्या है?
SVG का अर्थ स्केलेबल वेक्टर ग्राफ़िक्स हाइली ग्राफिक्स इमेज फाइल फॉर्मेट है, जो XML(extensible markup language) बेस्ड इमेज शेप फाइल फॉर्मेट है, जो डिज़ाइन या डेवलप वेब पेज में 2-डायमेंशनल ग्राफ़िक इमेज फॉर्मेट को इंडीकेट करता है। यहाँ अन्य पॉपुलर इमेज फॉर्मेट की तुलना में रास्टर ग्राफ़िक्स फाइल फॉर्मेट जैसे JPEG, gif, bmp,PNG इमेज फैल फॉर्मेट के विपरीत, जो किसी इमेज पिक्सेल फाइल फॉर्मेट में बिल्ड होते हैं, वही SVG ग्राफ़िक फॉर्मेट में कई प्रकार के डिफरेंट शेप, लाइन्स, टेक्स्ट, 2-डायमेंशनल इमेज या शेप और टेक्स्ट फॉर्मेट बेस्ड ग्राफ़िक ऑब्जेक्ट डिज़ाइन किए जाते है।
<svg> Object Structure in HTML5 Web Development.
एचटीएमएल5 वेब डेवलपमेंट में <svg> टैग SVG ग्राफ़िक्स इमेज डिज़ाइन के लिए एक ग्राफ़िक्स कंटेनर के रूप में डेवलप SVG शेप ऑब्जेक्ट को प्रीव्यू करता है। जहा आप SVG इमेज ऑब्जेक्ट कंटेनर में, जरूरत के अनुसार विभिन्न शेप, लाइन्स, टेक्स्ट, 2-d शेप, और ग्राफिकल इमेज ऑब्जेक्ट को क्रिएट कर सकते हैं।
SVG object basic syntax in HTML5.
<svg width=”250″ height=”250″ xmlns=”http://www.w3.org/2000/svg”>
<!– Write detail description about svg image graphics –>
</svg>
SVG Shape object properties.
- SVG object width – मौजूदा SVG शेप व्यूपोर्ट की विड्थ को इंडीकेट करता है।
- SVG object height – मौजूदा SVG इमेज शेप ऑब्जेक्ट की व्यूपोर्ट की हाइट को इंडीकेट करता है।
- SVG xmlns rendring – मौजूदा वेब पेज में डिज़ाइन SVG ऑब्जेक्ट के लिए XML रेंडरिंग लोकेशन को इंडीकेट करता है, जो SVG शेप ऑब्जेक्ट रेंडरिंग के लिए इम्पोर्टेन्ट है।
Create Shapes with HTML5 SVG.
Create svg rectangular shape.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=” UTF-8″>
<title> </title>
<body>
<svg width=”100″ height=”100″>
<rect p=”30″ q=”30″ width=”100″ height=”100″ fill=”teal”/>
</svg>
<svg width=”70″ height=”70″>
<rect p=”30″ q=”30″ width=”100″ height=”100″ fill=”red”/>
</svg>
</body>
</html>
Create a circle shape in SVG.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=” UTF-8″>
<title> </title>
<body>
<svg width=”200″ height=”200″ xmlns=”http://www.w3.org/2000/svg”>
<circle cx=”50″ cy=”50″ r=”40″ fill=”lime”/>
</svg>
<svg width=”200″ height=”200″ xmlns=”http://www.w3.org/2000/svg”>
<circle cx=”100″ cy=”100″ r=”80″ fill=”orange”/>
</svg>
</body>
</html>
Create an ellipse shape in SVG.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=” UTF-8″>
<title> </title>
<body>
<svg width=”100″ height=”100″ xmlns=”http://www.w3.org/2000/svg”>
<ellipse cx=”70″ cy=”70″ rx=”30″ ry=”10″ fill=”orange”/>
</svg>
<svg width=”200″ height=”200″ xmlns=”http://www.w3.org/2000/svg”>
<ellipse cx=”100″ cy=”100″ rx=”30″ ry=”10″ fill=”red”/>
</svg>
</body>
</html>
Create lines shape in SVG.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=” UTF-8″>
<title> </title>
<body>
<svg width=”200″ height=”200″ xmlns=”http://www.w3.org/2000/svg”>
<line x1=”20″ y1=”20″ x2=”100″ y2=”100″ stroke=”blue” stroke-width=”4″/>
</svg>
</body>
</html>
Create a polygon shape in SVG.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=” UTF-8″>
<title> </title>
<body>
<svg width=”200″ height=”200″ xmlns=”http://www.w3.org/2000/svg”>
<polygon points=”40,20 80,90 14,87″ fill=”orange”/>
</svg>
</body>
</html>
Styling SVG shape object graphics.
SVG object inline CSS script – वेब डेवलपर SVG ऑब्जेक्ट या शेप को डिफाइन करने के लिए svg टैग कोड को मौजूदा वेब पेज के अंदर स्क्रिप्ट कोड को स्टाइल कर इंटरनल सीएसएस के तोर पर इस्तेमाल कर सकते है।
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=” UTF-8″>
<title> </title>
<body>
<svg width=”100″ height=”100″>
<circle cx=”50″ cy=”50″ r=”40″ style=”fill:orange;stroke:black;stroke-width:4″/>
</svg>
</body>
</html>
SVG object external script – मौजूदा वेब पेज में वेब डवलपर वेब पेज svg शेप ऑब्जेक्ट को जरूरत के अनुसार एक्सटर्नल सीएसएस कोड को अन्य विज़ुअल कोड एडिटर में क्रिएट कर स्टाइलशीट टैग से एक्सटर्नल सीएसएस को मौजूदा वेब पेज में लिंक कर आर्डिनरी svg शेप ऑब्जेक्ट को स्टाइल्स और डेकोरेट कर प्रीव्यू कर सकते हैं।
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=” UTF-8″>
<title> </title>
<body>
<style>
.createCircle {
fill: yellow;
stroke: red;
stroke-width: 4;
}
</style>
<svg width=”100″ height=”100″ >
<circle cx=”50″ cy=”50″ r=”40″ class=”createCircle”/>
</svg>
</body>
</html>
Adding text to SVG in HTML5.
SVG basic text display.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=” UTF-8″>
<title> </title>
<body>
<svg width=”400″ height=”100″>
<text x=”10″ y=”70″ font-family=”times-new-roman” font-size=”40″ fill=”red”>Welcome to Vcanhelpsu</text>
</svg>
</body>
</html>
SVG text styling display.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=” UTF-8″>
<title> </title>
<body>
<svg width=”400″ height=”200″>
<text x=”10″ y=”40″ font-family=”arial” font-size=”40″ fill=”teal” text-anchor=”left” transform=”rotate(20, 30, 30)”>Vcanhelpsu</text>
</svg>
</body>
</html>
Drawing SVG Complex Shapes in HTML5.
SVG Shape Path Element – काम्प्लेक्स svg इमेज को डिज़ाइन करते समय इमेज शेप <path> एलिमेंट कमांड और पैरामीटर सीरीज को उपयोग कर डिजायर काम्प्लेक्स svg शेप क्रिएट करते है।
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=” UTF-8″>
<title> </title>
<body>
<svg width=”200″ height=”200″>
<path d=”M20 90 Q 100 20 200 90 T 370 90″ stroke=”teal” stroke-width=”4″ fill=”red”/>
</svg>
</body>
</html>
Creating Animation with SVG in HTML5.
यदि आप अपने वेब पेज में एनिमेटेड SVG इमेज शेप को क्रिएट करना चाहते है, तो आप एनिमेटेड svg ऑब्जेक्ट को बनाने के लिए <animate>, <animateTransform>, और <animateMotion> टैग को उपयोग कर एनिमेटेड svg शेप और ऑब्जेक्ट क्रिएट कर सकते है।
Simple SVG animation example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=” UTF-8″>
<title> </title>
<body>
<svg width=”400″ height=”400″>
<circle cx=”70″ cy=”70″ r=”40″ fill=”brown”>
<animate attributeName=”cx” from=”10″ to=”300″ dur=”4s” repeatCount=”indefinite”/>
</circle>
</svg>
</body>
</html>
Rotate the SVG shape animation.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=” UTF-8″>
<title> </title>
<body>
<svg width=”200″ height=”200″>
<rect p=”10″ q=”10″ width=”80″ height=”80″ fill=”orange”>
<animateTransform attributeName=”transform” attributeType=”XML” type=”rotate” from=”0 90 90″ to=”380 70 80″ dur=”4s” repeatCount=”indefinite”/>
</rect>
</svg>
</body>
</html>
SVG object accessibility considerations.
मौजूदा वेब पेज में svg यूजर एक्सेस के लिए <svg> के भीतर <title> और <desc> एलिमेंट का उपयोग करे।
SVG accessibility considerations example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=” UTF-8″>
<title> </title>
<body>
<svg width=”300″ height=”300″>
<title>Teal Circle</title>
<desc>You See Teal Circle With 70 Radious</desc>
<circle cx=”100″ cy=”100″ r=”70″ fill=”teal”/>
</svg>
</body>
</html>
Responsive SVG object in HTML5.
रेस्पॉन्सिव svg इमेज शेप या ऑब्जेक्ट को बनाने के लिए आपको डिज़ाइन svg इमेज कोड को सभी मॉडर्न डिवाइस प्रीव्यू या डिस्प्ले कम्पेटिबल बनाना होगा। डिज़ाइन svg ऑब्जेक्ट की हाइट और विड्थ ऐट्रिब्यूट्स को डिफ़ॉल्ट 100% ज़ूम लेवल पर प्रीव्यू करे।
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=” UTF-8″>
<title> </title>
<body>
<svg width=”100%” height=”100%”>
<circle cx=”50%” cy=”50%” r=”30%” fill=”red”/>
</svg>
</body>
</html>
svg object explanation.
- svg basic structure – svg वेब पेज में ड्रॉइंग्स और शेप को बनाने के लिए <svg> ऑब्जेक्ट क्रिएशन के लिए एक शेप ऑब्जेक्ट प्रीव्यू कंटेनर है।
- drawing svg shapes – मौजूदा वेब पेज में अलग अलग svg शेप बनाने के लिए आप <rect> शेप, <circle> शेप, <ellipse> शेप, <line> शेप, और <polygon> शेप जैसे svg शेप एलिमेंट को उपयोग करें।
- svg object styling – डिज़ाइन svg ऑब्जेक्ट या शेप के लिए डेवलपर इंटरनल और एक्सटर्नल सीएसएस स्टाइलिंग स्क्रिप्ट या कोड को उपयोग कर सकते है ।
- svg object text and path – डिजायर वेब पेज में जटिल svg शेप और टेक्स्ट को ड्रा करने के लिए आप <text> और <path> जैसे svg एलिमेंट को उपयोग करे।
- svg object animation – मौजूदा वेब पेज में svg शेप या ऑब्जेक्ट को एनीमेशन देने <animate>, <animateTransform>, और <animateMotion> एलिमेंट का उपयोग कर एनीमेशन अप्लाई करे।
- svg object accessibility – डिज़ाइन svg ऑब्जेक्ट में <title> और <desc> का उपयोग कर svg ऑब्जेक्ट डिस्क्रिप्टिव टेक्स्ट इनफार्मेशन डिस्प्ले करे।
- svg object responsiveness – डिज़ाइन svg ऑब्जेक्ट या शेप को मॉडर्न हर डिवाइस और गैजेट्स के अनुसार अनुकूल या रेस्पॉन्सिव बनाने के लिए svg रेस्पॉन्सिव ऐट्रिब्यूट्स का उपयोग करे।
