HTML Academy · पाठ

SVG की मूल आकृतियाँ: rect circle path

SVG एलिमेंट से सामान्य आकृतियाँ बनाएँ

पाठ 2, कुल 4 में से13 चरण

SVG की मूल आकृतियाँ: rect circle path, CoddyKit पर HTML Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह HTML Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

SVG निर्देशांक प्रणाली

SVG ऐसी निर्देशांक प्रणाली का उपयोग करता है जिसमें (0,0) ऊपर-बाएँ कोने पर होता है। X दाईं ओर बढ़ता है और Y नीचे की ओर बढ़ता है। दृश्य क्षेत्र की चौड़ाई और ऊँचाई विशेषताओं से तय होती है; निर्देशांक क्षेत्र viewBox विशेषता से तय होता है।

rect तत्व

<rect x="10" y="10" width="200" height="100" rx="8" ry="8"> से आयत बनाएँ। rx और ry कोनों को गोल बनाते हैं। भराव और किनारे की रेखा को fill और stroke विशेषताओं या CSS से नियंत्रित किया जाता है। x और y न देने पर उनका डिफ़ॉल्ट मान 0,0 होता है।

circle तत्व

<circle cx="100" cy="100" r="50"> से वृत्त बनाएँ। cx और cy केंद्र के निर्देशांक हैं; r त्रिज्या है। SVG वृत्तों में canvas के arc कोण पैरामीटर जैसा कोई समकक्ष नहीं होता—वे हमेशा पूर्ण वृत्त होते हैं।

ellipse तत्व

<ellipse cx="100" cy="100" rx="80" ry="40"> से दीर्घवृत्त बनाएँ। rx क्षैतिज त्रिज्या और ry ऊर्ध्वाधर त्रिज्या है। समान rx और ry वाला दीर्घवृत्त वृत्त के बराबर होता है।

line और polyline

<line x1="0" y1="0" x2="100" y2="100"> एकल रेखाखंड बनाता है। <polyline points="0,0 100,50 200,0"> निर्देशांक युग्मों की शृंखला से जुड़े हुए रेखाखंड बनाता है। इनमें से कोई भी अपने-आप बंद नहीं होता।

polygon तत्व

<polygon points="100,10 190,190 10,190"> polyline जैसा है, लेकिन इसका आकार अपने-आप बंद हो जाता है—अंतिम बिंदु से पहले बिंदु तक एक रेखा जुड़ जाती है। त्रिभुज, तारों और अन्य नियमित बहुभुजों जैसे बंद आकारों के लिए polygon का उपयोग करें।

path तत्व

path सबसे शक्तिशाली SVG आकार है—यह रेखाओं, चापों और वक्रों के किसी भी संयोजन को दर्शा सकता है। d विशेषता में पथ आदेश होते हैं: M (moveTo), L (lineTo), A (arc), C (cubic bezier), Q (quadratic bezier), Z (closePath)।

पथ आदेश

बड़े अक्षरों वाले आदेश पूर्ण निर्देशांकों का और छोटे अक्षरों वाले आदेश सापेक्ष निर्देशांकों का उपयोग करते हैं। M 100 50 (100,50) पर ले जाता है। L 200 150 (200,150) तक रेखा खींचता है। Z पथ को बंद करता है। A rx ry rotation large-arc sweep x y एक चाप बनाता है।

CSS से शैलीकरण

SVG आकार CSS स्वीकार करते हैं: fill, stroke, stroke-width, opacity और stroke-dasharray। आसानी से बनाए रखने योग्य शैलीकरण के लिए SVG तत्वों पर CSS वर्गों का उपयोग करें। SVG CSS संक्रमण fill, stroke और opacity पर काम करते हैं, जिससे अवस्थाओं में सहज परिवर्तन होता है।

g के साथ समूहीकरण

<g> तत्व SVG तत्वों को एक समूह में रखता है। सभी बाल तत्वों को प्रभावित करने के लिए समूह पर transform, fill या stroke लागू करें। समूहीकरण से जटिल आकारों का संयोजन संभव होता है, जो एक साथ चलते या रूपांतरित होते हैं—जैसे अपने सभी घटकों वाली घड़ी का मुख।

defs और पुनः उपयोग

<defs> में पुनः उपयोग किए जा सकने वाले आकार परिभाषित करें: प्रतीक, ग्रेडिएंट और क्लिप पथ। <use href="#id"> से उनका संदर्भ लें। इससे जटिल पथ डेटा की नकल करने से बचा जा सकता है और use तत्व के माध्यम से प्रत्येक उदाहरण के स्तर पर रूपांतरण और शैलीकरण संभव होता है।

ज्ञान जाँच

SVG में polyline और polygon में क्या अंतर है?

इंटरैक्टिव पाठ में इसका उत्तर दें

सारांश

SVG घोषणात्मक आकार तत्व (rect, circle, ellipse, line, polyline, polygon) और जटिल आकारों के लिए M, L, A, C, Q, Z आदेशों का उपयोग करने वाला बहुमुखी path तत्व प्रदान करता है। CSS शैलीकरण, g के साथ समूहीकरण और defs/use के माध्यम से पुनः उपयोग, HTML में सीधे एम्बेड किए गए ऐसे वेक्टर ग्राफ़िक्स सक्षम करते हैं जिन्हें आसानी से बनाए रखा और बड़े पैमाने पर उपयोग किया जा सकता है।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “SVG की मूल आकृतियाँ: rect circle path” पाठ निःशुल्क है?

हाँ — HTML Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “SVG की मूल आकृतियाँ: rect circle path” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“SVG की मूल आकृतियाँ: rect circle path” में मैं क्या सीखूँगा?

SVG एलिमेंट से सामान्य आकृतियाँ बनाएँ आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ HTML Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या HTML Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर HTML Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।

“SVG की मूल आकृतियाँ: rect circle path” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस HTML Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर HTML Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← HTML Academy पर वापस जाएँ