HTML SVG
पहले मिनी प्रोजेक्ट ने छोटी व्यक्तिगत साइट मांगी। यह पाठ वैकल्पिक ग्राफ़िक्स ट्रैक शुरू करता है। SVG HTML को गणित से तेज़ आइकन/आकृतियाँ खींचने देता है, पिक्सेल नहीं। दायरा व्यावहारिक: पेज पर SVG कैसे लगाएँ — पूरा डिज़ाइन कोर्स नहीं।
HTML कोर्स में SVG क्यों
रैस्टर छवियाँ बढ़ाते समय धुँधली हो जाती हैं। SVG पथ और आकृतियाँ बताता है — लोगो तेज़ रहता है। शुरुआती SVG को हेडर आइकन या बैज के रूप में देखते हैं। इनलाइन बनाम फ़ाइल जानना पेज हल्के और सुलभ रखता है।
सीधा उत्तर
1) इनलाइन: HTML में svg पेड़। 2) फ़ाइल: .svg सहेजें और img+alt से लोड करें। 3) CSS/JS हुक या सटीक नाम के लिए इनलाइन। 4) स्थिर लोगो के लिए img। 5) अर्थपूर्ण ग्राफ़िक्स नाम दें। 6) यह कोर्स केवल एम्बेडिंग।
📊 SVG embedding beginners use
| Choice | What it does | Beginner tip |
|---|---|---|
| Inline svg | Shapes live in the HTML tree | Easy to style and label in-page |
| img to .svg | Treats SVG like an image file | Simple for static logos |
| viewBox | Maps SVG coords to the viewport | Keep width/height + viewBox aligned |
| Accessible name | alt or aria-label on meaningful art | Empty name only if truly decorative |
| Scales cleanly | Vectors stay sharp when resized | Great for icons and UI marks |
| Not a photo format | Photos stay JPEG/PNG/WebP | Use SVG for shapes/icons, not camera shots |
छोटा इनलाइन SVG
इनलाइन SVG केवल मार्कअप है। viewBox और सुलभ नाम वाला वृत्त HTML काम दिखाता है: ब्राउज़र खींचता है; आकार और अर्थ आप नियंत्रित करते हैं।
<svg width="80" height="80" viewBox="0 0 80 80" role="img" aria-label="Green circle">
<circle cx="40" cy="40" r="32" fill="#2a7"></circle>
</svg>
इनलाइन डेमो पढ़ना
- svg जड़ है
- width/height लेआउट बॉक्स; viewBox निर्देशांक
- circle संतान आकृति
- role=img व aria-label ग्राफ़िक नाम देते हैं
- आकार बदलने पर तेज़ रहता है
- मिनी प्रोजेक्ट ने फ़ोटो के लिए img इस्तेमाल किया; यहाँ «छवि» मार्कअप हो सकती है
छवि फ़ाइल के रूप में SVG
जब logo.svg हो, मीडिया जैसा व्यवहार: src और उपयोगी alt। पथ फ़ोल्डर से मेल खाने चाहिए।
<img src="images/logo.svg" alt="Site logo" width="120">
फ़ाइल पैटर्न पढ़ना
- src .svg की ओर इशारा करता है
- alt सुलभ नाम रखता है
- width आकार नियंत्रित करता है; वेक्टर साफ़ स्केल होते हैं
- CSS img बॉक्स स्टाइल करता है, इनलाइन हर पथ जितना आसान नहीं
- एक फ़ाइल कई पेजों पर पुन: उपयोग
- अगला canvas JS पिक्सेल खींचता है — अलग उपकरण
इनलाइन बनाम फ़ाइल चुनना
- CSS से रंगने वाला आइकन: अक्सर इनलाइन
- स्थिर ब्रांड लोगो: img
- कैमरा फ़ोटो: रैस्टर
- विशाल इनलाइन चित्रण: फ़ाइल बेहतर
- अर्थपूर्ण ग्राफ़िक: हमेशा नाम
- गहरा SVG लेखन: बाद का रास्ता
अभ्यास — पेज पर SVG
- वृत्त चिपकाएँ; रेंडर जाँचें।
- width/height बदलें — तेज़ रहे।
- .svg को img+alt से लोड करें।
- अस्थायी रूप से aria-label/alt हटाएँ।
- मिनी प्रोजेक्ट होम की कॉपी पर शीर्षक के पास इनलाइन आइकन।
- वाक्य: SVG स्केलेबल मार्कअप या वेक्टर फ़ाइल है — फ़ोटो विकल्प नहीं।
- आगे: canvas स्क्रिप्ट से खींचता है।
आसान गलतियाँ
- अर्थपूर्ण SVG पर सुलभ नाम भूलना
- विशाल इनलाइन SVG पेड़ चिपकाना
- फ़ोटो के लिए SVG
- viewBox छोड़ना
- SVG को canvas से मिलाना
- परिचय को पूरा चित्रण कोर्स मानना
- मिनी प्रोजेक्ट a11y आदतें छोड़ना
सारांश
- SVG रिज़ॉल्यूशन-स्वतंत्र आकृतियाँ और आइकन खींचता है
- इनलाइन svg या img से .svg फ़ाइल
- अर्थपूर्ण ग्राफ़िक्स नाम दें
- वेक्टर स्केल; फ़ोटो रैस्टर रहती हैं
- मिनी प्रोजेक्ट साइट बिल्ड था; यहाँ वैकल्पिक ग्राफ़िक्स शुरू
- अगला: HTML canvas
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी