📘 Lesson · Lesson 30
SVG in HTML
HTML में SVG
Vector vs Pixels — the core idea
SVG (Scalable Vector Graphics) stores a picture as instructions ("circle of radius 40 at this point, filled gold") instead of a grid of coloured pixels. Because it's math, not dots, it stays perfectly sharp at ANY size — zoom to 1000% and edges are still crisp. A PNG at the same zoom turns into blurry squares. Analogy: a PNG is a printed photo (enlarge it and it pixelates); an SVG is a recipe the browser re-cooks fresh at every size.
Logo at 16px → same SVG file → Logo at 500px
sharp still perfectly sharp
(a PNG would need separate files per size AND blur when scaled up)Inline SVG — Shapes as Real Page Elements
<svg width="200" height="100">
<circle cx="50" cy="50" r="40" fill="gold" />
<rect x="110" y="20" width="70" height="60" fill="navy" />
</svg>[ a gold circle on the left, a navy rectangle on the right ]
Unlike canvas (which paints pixels you can't touch again), each SVG shape is a real element in the HTML — inspectable, styleable, clickable, animatable. You can also load SVG via
<img src="logo.svg">, but writing it INLINE (directly in the HTML) is what unlocks CSS and JavaScript control over individual shapes.The Basic Shapes
<circle cx="50" cy="50" r="40" /> cx,cy = centre; r = radius
<rect x="10" y="10" width="80" height="50" /> top-left x,y + size
<line x1="0" y1="0" x2="100" y2="100"
stroke="black" /> from point 1 to point 2
<ellipse cx="50" cy="50" rx="40" ry="20" /> two radii (oval)
<text x="10" y="30">Hello</text> text at a point
<path d="M10 10 L90 90 Z" /> the powerful one - any shapeSame top-left coordinate system as canvas (y grows downward). <path> with its d ("draw") commands can trace ANY shape — every icon you've seen (menu bars, arrows, logos) is a path. You rarely write paths by hand; design tools export them.
Styling SVG with CSS — the superpower
<style>
.star { fill: gold; transition: fill 0.3s; }
.star:hover { fill: orange; } /* hover changes the colour! */
</style>
<svg width="100" height="100">
<polygon class="star" points="50,5 61,40 98,40 68,62 79,95 50,75 21,95 32,62 2,40 39,40" />
</svg>This is SVG's killer feature. Because shapes are real elements, CSS reaches inside them:
fill (interior colour), stroke (outline), hover effects, transitions, even animations — all with plain CSS. A canvas drawing can't do this (it's flat pixels). This is exactly why icon systems and interactive charts use SVG: one file, infinitely scalable, fully styleable.SVG vs PNG vs Canvas — the decision table
| Use | Best choice | Why |
|---|---|---|
| Logo, icons | SVG | Sharp at every size, tiny file, CSS-styleable |
| Photograph | PNG/JPG/WebP | Vectors can't store photo detail |
| Interactive chart | SVG | Each bar is an element you can hover/click |
| Game / thousands of objects | Canvas | Faster for huge numbers of moving pixels |
Simple rule: photos → PNG/JPG; logos, icons, crisp graphics → SVG; games and heavy animation → canvas.
Exam Corner
Q: What does SVG stand for and why is it "scalable"? Scalable Vector Graphics — it stores shapes as math instructions, so it stays sharp at any size.
Q: SVG vs PNG for a logo? SVG — sharp at all sizes and smaller; PNG blurs when enlarged.
Q: Name 3 SVG shape elements. circle, rect, line (also ellipse, polygon, path, text).
Q: Can CSS style SVG? Yes — fill, stroke, hover, animation, when the SVG is inline.
Q: SVG vs canvas key difference? SVG shapes are editable page elements; canvas is flat pixels you can't re-edit.
Q: SVG vs PNG for a logo? SVG — sharp at all sizes and smaller; PNG blurs when enlarged.
Q: Name 3 SVG shape elements. circle, rect, line (also ellipse, polygon, path, text).
Q: Can CSS style SVG? Yes — fill, stroke, hover, animation, when the SVG is inline.
Q: SVG vs canvas key difference? SVG shapes are editable page elements; canvas is flat pixels you can't re-edit.
Vector vs Pixels — मूल विचार
SVG (Scalable Vector Graphics) तस्वीर को रंगीन pixels के grid की बजाय निर्देशों के रूप में रखता है ("इस बिंदु पर radius 40 का circle, gold भरा"). गणित है, बिंदु नहीं, इसलिए किसी भी size पर पूरी तरह sharp रहता है — 1000% zoom करो, किनारे फिर भी साफ. उसी zoom पर PNG धुंधले चौकोर बन जाता है. Analogy: PNG छपी photo है (बड़ा करो तो pixelate); SVG वह recipe है जिसे browser हर size पर ताज़ा पकाता है.
16px par logo → wahi SVG file → 500px par logo
sharp ab bhi poori tarah sharp
(PNG ko har size ki alag file chahiye AUR bada karne par blur)Inline SVG — Shapes असली Page Elements
<svg width="200" height="100">
<circle cx="50" cy="50" r="40" fill="gold" />
<rect x="110" y="20" width="70" height="60" fill="navy" />
</svg>[ baayein gold circle, daayein navy rectangle ]
canvas के उलट (जो ऐसे pixels paint करता है जिन्हें दोबारा छू नहीं सकते), हर SVG shape HTML में असली element है — inspect, style, click, animate होने वाला. SVG को
<img src="logo.svg"> से भी load कर सकते हैं, पर INLINE (सीधे HTML में) लिखना ही अलग-अलग shapes पर CSS और JavaScript control खोलता है.Basic Shapes
<circle cx="50" cy="50" r="40" /> cx,cy = centre; r = radius
<rect x="10" y="10" width="80" height="50" /> top-left x,y + size
<line x1="0" y1="0" x2="100" y2="100"
stroke="black" /> point 1 se point 2 tak
<ellipse cx="50" cy="50" rx="40" ry="20" /> do radii (oval)
<text x="10" y="30">Hello</text> ek point par text
<path d="M10 10 L90 90 Z" /> taakatwar wala - koi bhi shapecanvas जैसा ही top-left coordinate system (y नीचे बढ़ता है). <path> अपने d ("draw") commands से KOI भी shape बना सकता है — आपने जो icons देखे (menu bars, arrows, logos) सब path हैं. Paths शायद ही हाथ से लिखते हैं; design tools export करते हैं.
CSS से SVG Style करना — superpower
<style>
.star { fill: gold; transition: fill 0.3s; }
.star:hover { fill: orange; } /* hover colour badal deta hai! */
</style>
<svg width="100" height="100">
<polygon class="star" points="50,5 61,40 98,40 68,62 79,95 50,75 21,95 32,62 2,40 39,40" />
</svg>यही SVG का killer feature है. Shapes असली elements हैं इसलिए CSS उनके अंदर पहुंचती है:
fill (अंदरूनी रंग), stroke (outline), hover effects, transitions, यहां तक कि animations — सब सादी CSS से. canvas drawing यह नहीं कर सकती (सपाट pixels). इसीलिए icon systems और interactive charts SVG use करते हैं: एक file, अनंत scalable, पूरी तरह styleable.SVG vs PNG vs Canvas — फैसले की table
| Use | Best choice | क्यों |
|---|---|---|
| Logo, icons | SVG | हर size पर sharp, छोटी file, CSS-styleable |
| Photograph | PNG/JPG/WebP | Vectors photo detail नहीं रख सकते |
| Interactive chart | SVG | हर bar एक element जिसे hover/click कर सकते हैं |
| Game / हज़ारों objects | Canvas | बहुत सारे moving pixels के लिए तेज़ |
सरल rule: photos → PNG/JPG; logos, icons, crisp graphics → SVG; games और भारी animation → canvas.
Exam Corner
Q: SVG की full form और "scalable" क्यों? Scalable Vector Graphics — shapes को math निर्देशों के रूप में रखता है, इसलिए किसी भी size पर sharp रहता है.
Q: Logo के लिए SVG vs PNG? SVG — हर size पर sharp और छोटा; PNG बड़ा करने पर धुंधला.
Q: 3 SVG shape elements बताइए. circle, rect, line (और ellipse, polygon, path, text).
Q: क्या CSS SVG style कर सकती है? हां — fill, stroke, hover, animation, जब SVG inline हो.
Q: SVG vs canvas मुख्य अंतर? SVG shapes editable page elements हैं; canvas सपाट pixels जिन्हें दोबारा edit नहीं कर सकते.
Q: Logo के लिए SVG vs PNG? SVG — हर size पर sharp और छोटा; PNG बड़ा करने पर धुंधला.
Q: 3 SVG shape elements बताइए. circle, rect, line (और ellipse, polygon, path, text).
Q: क्या CSS SVG style कर सकती है? हां — fill, stroke, hover, animation, जब SVG inline हो.
Q: SVG vs canvas मुख्य अंतर? SVG shapes editable page elements हैं; canvas सपाट pixels जिन्हें दोबारा edit नहीं कर सकते.
💻 Live Code Editor
इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का
console.log देखने के लिए F12 दबाइए.