HTML SVG
In this page:
<svg width="width" height="height">
<shape attribute="value" />
</svg>SVG क्या है?
SVG (Scalable Vector Graphics) एक XML-आधारित फाइल फॉर्मेट है जिसका उपयोग सीधे आपके HTML के अंदर vector graphics डिफाइन करने के लिए किया जाता है। raster images के उलट, SVGs बिना पिक्सेलेट हुए किसी भी screen resolution और डिस्प्ले zoom लेवल पर बेदाग तरीके से स्केल होते हैं।
- सभी डिवाइसेज़ पर तेज़ दिखते रहने के लिए वेबसाइट logos, इंटरफ़ेस icons, और flat illustrations के लिए SVG का उपयोग करें।
- Accepted attributes:
- xmlns — http://www.w3.org/2000/svg (needed in standalone files)
- width / height — size
- viewBox — min-x min-y width height
- preserveAspectRatio — xMidYMid meet | slice | none ...
उदाहरण: What is SVG?
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>बेसिक Shapes ड्रॉ करना (rect और circle)
SVG में बुनियादी shapes सीधे ड्रॉ करने के लिए बिल्ट-इन एलिमेंट टैग्स (जैसे rect और circle) शामिल हैं। आप उनका साइज़, पोजीशन, और fill रंग टैग के अंदर स्टैण्डर्ड XML attributes का उपयोग करके तय करते हैं।
- अपने circle टैग्स के center coordinates तय करने के लिए cx और cy attributes का उपयोग करें, और radius तय करने के लिए r का।
- Accepted attributes:
- rect x, y, width, height — position and size
- rect rx, ry — corner radii
- circle cx, cy, r — center and radius
- fill — color | none
- stroke, stroke-width — outline color and width
उदाहरण: Drawing Basic Shapes (rect and circle)
<svg width="120" height="120">
<rect x="10" y="10" width="50" height="30" fill="red" />
<circle cx="80" cy="80" r="20" fill="green" />
</svg>path से जटिल Paths ड्रॉ करना
कस्टम shapes, curves, या advanced icons ड्रॉ करने के लिए, आप शक्तिशाली path टैग का उपयोग करते हैं। path टैग एक specialized d (data) attribute का उपयोग करता है जिसमें जटिल लाइनें ट्रेस करने के लिए commands (जैसे move-to के लिए M, line-to के लिए L, और close-path के लिए Z) होते हैं।
- अपने paths डिज़ाइन करने और generated SVG कोड को सीधे कॉपी करने के लिए किसी ऑनलाइन vector editor (जैसे Figma या Illustrator) का उपयोग करें।
- Accepted attributes:
- d — path commands M L H V C S Q T A Z
- fill — color | none
- stroke — color
- stroke-width — number
- fill-rule — nonzero | evenodd
उदाहरण: Drawing Complex Paths with path
<svg width="100" height="100">
<path d="M10 10 L90 10 L50 90 Z" fill="orange" />
</svg>CSS के साथ SVG को स्टाइल करना
क्योंकि SVGs को native HTML एलिमेंट्स की तरह ट्रीट किया जाता है, इसलिए आप उनकी properties को स्टैण्डर्ड CSS स्टाइलशीट या inline rules का उपयोग करके आसानी से स्टाइल और एनिमेट कर सकते हैं।
स्टैण्डर्ड CSS स्टाइल की जगह, SVGs specialized properties का उपयोग करते हैं (जैसे रंग के लिए fill और बॉर्डर के लिए stroke)।
उदाहरण: Styling SVG with CSS
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" style="fill: purple; stroke: black;" />
</svg>Inline बनाम External SVG
आप SVG कोड को सीधे अपने HTML पेज में embed कर सकते हैं (inline), या इसे स्टैण्डर्ड img टैग का उपयोग करके एक image फाइल के रूप में लोड कर सकते हैं। Inline SVG इंटरैक्टिव होता है और CSS से स्टाइल किया जा सकता है, जबकि external SVG फाइलें आपके HTML कोड को साफ रखती हैं और ब्राउज़र कैशिंग का फायदा उठाती हैं।
उदाहरण: Inline vs. External SVG
<svg width="50" height="50">
<circle cx="25" cy="25" r="20" fill="blue" />
</svg>
<img src="icon.svg" alt="Icon">और SVG Shapes (line, polyline, polygon, ellipse)
rect और circle से आगे, SVG सीधी लाइनों के लिए line, जुड़ी हुई सीधी लाइनों की एक श्रृंखला के लिए polyline, सीधी लाइनों से बनी बंद shape के लिए polygon, और स्वतंत्र रूप से कंट्रोल किए गए horizontal व vertical radii वाले ovals के लिए ellipse देता है।
- जब भी आपको triangle या star जैसी बंद shape चाहिए हो, तो मैन्युअली कई line एलिमेंट्स ड्रॉ करने की बजाय polygon का उपयोग करें।
- Accepted attributes:
- line x1, y1, x2, y2 — end points
- polyline / polygon points — list of x,y pairs
- ellipse cx, cy, rx, ry
- fill / stroke / stroke-width
उदाहरण: More SVG Shapes (line, polyline, polygon, ellipse)
<svg width="150" height="100">
<line x1="0" y1="0" x2="100" y2="0" stroke="black" />
<polygon points="10,90 50,10 90,90" fill="teal" />
<ellipse cx="120" cy="50" rx="20" ry="10" fill="pink" />
</svg>SVG Text एलिमेंट
text एलिमेंट किसी SVG image के अंदर असली, सिलेक्ट करने योग्य, सर्च करने योग्य टेक्स्ट ड्रॉ करता है, जिसे x और y coordinates का उपयोग करके पोजीशन किया जाता है।
canvas टेक्स्ट के उलट, SVG टेक्स्ट डॉक्यूमेंट का हिस्सा बना रहता है, इसलिए इसे CSS से स्टाइल किया जा सकता है, यूज़र द्वारा सिलेक्ट किया जा सकता है, और screen readers द्वारा पढ़ा जा सकता है।
- अपने पेज की बाकी टाइपोग्राफी के साथ मेल के लिए SVG टेक्स्ट को साधारण CSS font properties से स्टाइल करें।
- Accepted attributes:
- x, y — text position
- text-anchor — start | middle | end
- font-size, font-family, fill
- dominant-baseline — auto | middle | hanging
उदाहरण: SVG Text Element
<svg width="150" height="50">
<text x="10" y="30" font-size="20">Hello SVG</text>
</svg>SVG बनाम Canvas
SVG shapes को डॉक्यूमेंट में एलिमेंट्स के रूप में डिस्क्राइब करता है, जिसका मतलब है कि हर shape सिलेक्ट करने योग्य, scriptable, और क्वालिटी खोए बिना अनंत रूप से scalable बनी रहती है, लेकिन हज़ारों एलिमेंट्स के साथ परफॉर्मेंस प्रभावित हो सकती है।
Canvas एक सिंगल bitmap है जिस पर आप pixels ड्रॉ करते हैं, जो डायनामिक shapes की बड़ी संख्या को कुशलता से संभालता है लेकिन ड्रॉ होने के बाद individual shape की सारी जानकारी खो देता है।
- icons, logos, charts, और ऐसी किसी भी चीज़ के लिए SVG चुनें जिसे बेदाग स्केल करना हो या individual क्लिक्स का जवाब देना हो।
- कई moving pieces वाले games, जटिल एनिमेशन, या image editing के लिए canvas चुनें।
उदाहरण: SVG vs Canvas
<svg width="50" height="50">
<circle cx="25" cy="25" r="20" fill="blue" />
</svg>
<canvas id="myCanvas" width="50" height="50"></canvas>SVG Accessibility (title और desc)
किसी svg के पहले child के रूप में एक title एलिमेंट जोड़ना screen readers को उस ग्राफ़िक के लिए एक छोटा accessible नाम देता है, बिल्कुल किसी image पर alt टेक्स्ट की तरह।
desc एलिमेंट एक लंबी, ज़्यादा विस्तृत डिस्क्रिप्शन दे सकता है जब ग्राफ़िक chart जैसी ज़्यादा जटिल जानकारी दर्शाता हो।
उदाहरण: SVG Accessibility (title and desc)
<svg width="100" height="100">
<title>Company Logo</title>
<desc>A blue circle representing our brand logo</desc>
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: