What is SVG Tag HTML, How to Use SVG HTML Tag in Hindi
SVG Kya Hai
एसवीजी (SVG) का पूरा नाम स्केलेबल वेक्टर ग्राफिक्स (Scalable Vector Graphics) है।
एसवीजी एक्सएमएल प्रारूप में वेक्टर-आधारित ग्राफिक्स को परिभाषित करता है।
SVG की सहायता से आप बहुत ही आसानी से गोला , आयात, त्रिभुज, की इमेज को HTML पेज में बनाने में किया जाता है।
- एसवीजी स्केलेबल वेक्टर ग्राफिक्स के लिए है।
- एसवीजी का उपयोग वेब के लिए वेक्टर-आधारित ग्राफिक्स को परिभाषित करने के लिए किया जाता है।
- एसवीजी एक्सएमएल प्रारूप में ग्राफिक्स को परिभाषित करता है।
- एसवीजी फाइलों में हर तत्व और हर विशेषता एनिमेटेड हो सकती है।
- एसवीजी एक डब्ल्यू 3 सी सिफारिश है।
- एसवीजी अन्य डब्ल्यू 3 सी मानकों जैसे डोम और एक्सएसएल के साथ एकीकृत करता है।
आप SVG एलिमेंट्स को सीधे अपने HTML पेजों में एम्बेड कर सकते हैं।
SVG Images बनाना
एसवीजी छवियों को किसी भी टेक्स्ट एडिटर के साथ बनाया जा सकता है, लेकिन अक्सर ड्राइंग प्रोग्राम के साथ एसवीजी छवियां बनाना अधिक सुविधाजनक होता है, जैसे इंकस्केप।
SVG का Tag :
<svg>
</svg>
के रूप में उपयोग में लाया जाता है।
Example :
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
एसवीजी कोड स्पष्टीकरण:
एक SVG छवि एक <svg> तत्व से शुरू होती है
<Svg> तत्व की चौड़ाई और ऊंचाई की विशेषताएँ एसवीजी छवि की चौड़ाई और ऊंचाई को परिभाषित करती हैं
<वृत्त> तत्व का उपयोग वृत्त बनाने के लिए किया जाता है
Cx और cy विशेषताएँ वृत्त के केंद्र के x और y निर्देशांक को परिभाषित करती हैं। यदि cx और cy सेट नहीं हैं, तो वृत्त का केंद्र (0, 0) पर सेट है
R विशेषता वृत्त की त्रिज्या को परिभाषित करती है
स्ट्रोक और स्ट्रोक-चौड़ाई विशेषताएँ नियंत्रित करती हैं कि किसी आकृति की रूपरेखा कैसे दिखाई देती है। हमने सर्कल की रूपरेखा 4px हरी "सीमा" पर सेट की है
भरण विशेषता सर्कल के अंदर रंग को संदर्भित करता है। हम भरने वाले रंग को पीले रंग में सेट करते हैं
समापन </ svg> टैग SVG छवि को बंद करता है
नोट: चूंकि एसवीजी एक्सएमएल में लिखा गया है, सभी तत्वों को ठीक से बंद होना चाहिए!
एसवीजी आकार (SVG Shape)
एसवीजी में कुछ पूर्वनिर्धारित आकार के तत्व हैं जो डेवलपर्स द्वारा उपयोग किए जा सकते हैं:
SVG HTML Tag Full Tutorial In Hindi
- Rectangle <rect>
- Circle <circle>
- Ellipse <ellipse>
- Line <line>
- Polyline <polyline>
- Polygon <polygon>
- Path <path>
निम्नलिखित अध्याय प्रत्येक तत्व की व्याख्या करेगा, जो कि मूल तत्व से शुरू होता है।
How to Make Rectangle With SVG Tag Element
1. SVG Rectangle - <rect>
<svg width="400" height="110">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
Code कोड स्पष्टीकरण:
<Rect> तत्व की चौड़ाई और ऊँचाई विशेषताएँ आयत की ऊँचाई और चौड़ाई को परिभाषित करती हैं
स्टाइल विशेषता का उपयोग आयत के लिए CSS गुणों को परिभाषित करने के लिए किया जाता है
CSS fill property आयत के भरे हुए रंग को परिभाषित करती है
CSS स्ट्रोक-चौड़ाई गुण आयत की सीमा की चौड़ाई को परिभाषित करता है
CSS स्ट्रोक संपत्ति आयत की सीमा के रंग को परिभाषित करती है।
For Redius ऑन Edge के लिए :
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
How to make Circle with SVG tag element
2. SVG Circle - <circle>
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
कोड स्पष्टीकरण:
Cx और cy विशेषताएँ वृत्त के केंद्र के x और y निर्देशांक को परिभाषित करती हैं। यदि cx और cy को छोड़ दिया जाता है, तो वृत्त का केंद्र (0,0) पर सेट हो जाता है
R विशेषता वृत्त की त्रिज्या को परिभाषित करती है।
How to make Ellipse with SVG tag element
३. SVG Ellipse - <ellipse>
एक दीर्घवृत्त बनाने के लिए <दीर्घवृत्त> तत्व का उपयोग किया जाता है।
एक दीर्घवृत्त एक घेरे से संबंधित है। अंतर यह है कि एक दीर्घवृत्त में एक x और y त्रिज्या होती है जो एक दूसरे से भिन्न होती है, जबकि एक वृत्त में बराबर x और y त्रिज्या होती है:
<svg height="140" width="500">
<ellipse cx="200" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>
<ellipse cx="200" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>
कोड स्पष्टीकरण:
Cx विशेषता दीर्घवृत्त के केंद्र के x निर्देशांक को परिभाषित करती है
साइबर विशेषता दीर्घवृत्त के केंद्र के y समन्वय को परिभाषित करती है
आरएक्स विशेषता क्षैतिज त्रिज्या को परिभाषित करती है
रे विशेषता ऊर्ध्वाधर त्रिज्या को परिभाषित करती है।
एक से ज्यादा बनाने के लिए
<svg height="150" width="500">
<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
<ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
</svg>
<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
<ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
</svg>
How to make Line with SVG tag element
4. SVG Line - <line>
लाइन बनाने के लिए <line> तत्व का उपयोग किया जाता है:
<svg height="210" width="500">
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
Code कोड स्पष्टीकरण:
एक्स 1 एक्स-एक्सिस पर लाइन की शुरुआत को परिभाषित करता है
Y1 विशेषता y- अक्ष पर लाइन की शुरुआत को परिभाषित करती है
एक्स 2 विशेषता एक्स-अक्ष पर लाइन के अंत को परिभाषित करती है
Y2 विशेषता y- अक्ष पर रेखा के अंत को परिभाषित करती है।
How to make Polygon with SVG tag element
5. SVG Polygon - <polygon>
<polygon> तत्व का उपयोग एक ग्राफिक बनाने के लिए किया जाता है जिसमें कम से कम तीन पक्ष होते हैं।
बहुभुज सीधी रेखाओं से बने होते हैं, और आकार "बंद" होता है (सभी रेखाएं जुड़ जाती हैं)।
बहुभुज ग्रीक से आता है। "पाली" का अर्थ है "कई" और "गों" का अर्थ है "कोण"।
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>
How to make Polyline with SVG tag element
6. SVG Polyline - <polyline>
<polyline> तत्व का उपयोग किसी भी आकृति को बनाने के लिए किया जाता है जिसमें केवल सीधी रेखाएँ होती हैं (जो कि कई बिंदुओं पर जुड़ी होती है):
<svg height="180" width="500">
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
style="fill:white;stroke:red;stroke-width:4" />
</svg>
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
style="fill:white;stroke:red;stroke-width:4" />
</svg>
How to make Path with SVG tag element
7. SVG Path - <path>
पथ को परिभाषित करने के लिए <पथ> तत्व का उपयोग किया जाता है।
पथ डेटा के लिए निम्न आदेश उपलब्ध हैं:
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Bézier curve
- T = smooth quadratic Bézier curveto
- A = elliptical Arc
- Z = closepath
<svg height="210" width="400">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
हेलो दोस्तों यह पोस्ट आपको कैसा लगा कमेंट में जरूर बताये।
No comments:
Post a Comment