14. SVG Graphics (Scalable Vector Graphics)
Web par resolution independent, math driven sharp graphics banayein aur CSS se animate karein.
1. Raster vs Vector Paradigm
Basic: SVG ek drawing banane ka XML/HTML tarika hai. JPG photo mein lakho pixels ke dot hote hain (Raster image). SVG coordinates, lines aur maths formulas ki information hoti hai.
Pro: Raster (PNG/JPG) ko CSS se zoom karne par quality degrade (Blurry) ho jati hai. SVG mathematically khud ko naye size pe re-draw karti hai. Chahe Apple Watch pe render karein ya 4K OLED TV pe, quality 100% loss-less (crisp) rehti hai. File size usually Bytes/KBs mein hota hai, jisse Network latency drastically kam ho jati hai.
2. SVG DOM Structure & Elements
Pro: SVG container <svg> viewBox attribute follow karta hai jo drawing bounds define karta hai. Uske andar specific geometrical nodes hote hain:
<rect>,<circle>,<polygon>: Basic mathematical shapes coordinate inputs (cx, cy, r) accept karte hain.<path>: SVG ka dil hai. Ye pen tool commands (M = moveTo, L = lineTo, C = cubic curve) encode karta hai. Complex icon libraries (FontAwesome, HeroIcons) entirely complex path datas generate karti hain jo hum copy paste karte hain.
3. CSS Synergy (Fill & Stroke Magic)
Pro: SVG DOM ka hissa (Inline Document) hone ki wajah se direct external CSS select ho sakti hai. Aap CSS pseudoclasses (:hover) se direct SVG ka color fill: red; ya lines stroke: blue; update kar sakte hain. Icon fonts ki jagah developers ab entirely Inline SVGs use karna prefer karte hain.
4. Path Animations
Pro: stroke-dasharray aur stroke-dashoffset CSS properties ki manipulation karke Line-drawing animations banaye jate hain (jaise script signature animation). Yeh complex visual flair bohot kam compute power demand karta hai.