HTML SVG Graphics में SVG (Scalable Vector Graphics) का use करके web pages पर graphics बनाई जाती हैं।
SVG XML-based और vector-based graphics format है, जो zoom करने पर भी quality maintain रखता है।
SVG directly HTML में embed किया जा सकता है।
svg Element
<svg> element SVG graphics का container होता है।
<svg width="300" height="150">
</svg>
SVG element के अंदर shapes और graphics define की जाती हैं।
SVG Coordinate System
SVG में top-left corner origin (0,0) होता है।
X-axis right की तरफ और Y-axis नीचे की तरफ जाती है।
SVG Rectangle
Rectangle draw करने के लिए <rect> element use होता है।
<svg width="200" height="100">
<rect x="10" y="10" width="150" height="70" fill="blue" />
</svg>
SVG Circle
Circle draw करने के लिए <circle> element use होता है।
<svg width="200" height="100">
<circle cx="60" cy="50" r="40" fill="red" />
</svg>
SVG Ellipse
Ellipse draw करने के लिए <ellipse> element use होता है।
<svg width="200" height="100">
<ellipse cx="100" cy="50" rx="80" ry="30" fill="green" />
</svg>
SVG Line
Line draw करने के लिए <line> element use होता है।
<svg width="200" height="100">
<line x1="10" y1="10" x2="180" y2="90" stroke="black" />
</svg>
SVG Polyline
Multiple connected lines के लिए <polyline> element use होता है।
<svg width="200" height="100">
<polyline points="10,90 50,10 90,90" fill="none" stroke="blue" />
</svg>
SVG Polygon
Closed shape बनाने के लिए <polygon> element use होता है।
<svg width="200" height="100">
<polygon points="100,10 190,90 10,90" fill="orange" />
</svg>
SVG Path
Complex shapes बनाने के लिए <path> element use होता है।
<svg width="200" height="100">
<path d="M10 80 Q 95 10 180 80" stroke="purple" fill="none" />
</svg>
SVG Text
SVG में text draw करने के लिए <text> element use होता है।
<svg width="300" height="100">
<text x="20" y="50" font-size="24" fill="black">Hello SVG</text>
</svg>
Styling SVG with CSS
SVG elements को CSS से style किया जा सकता है।
<svg width="200" height="100">
<circle cx="50" cy="50" r="40" class="myCircle" />
</svg>
<style>
.myCircle {
fill: red;
stroke: black;
stroke-width: 2;
}
</style>
SVG और JavaScript
SVG elements को JavaScript से manipulate किया जा सकता है।
document.querySelector("circle").setAttribute("fill", "blue");
SVG Animation Basics
SVG में simple animations possible हैं।
<circle cx="50" cy="50" r="30">
<animate attributeName="cx" from="50" to="150" dur="2s" repeatCount="indefinite" />
</circle>
SVG Use Cases
Icons और logos
Charts और diagrams
Interactive graphics
Scalable illustrations
SVG Limitations
Very complex scenes में performance slow हो सकता है
Large animations heavy हो सकती हैं
Raster image जैसी photo editing के लिए suitable नहीं है
HTML SVG Graphics Summary
SVG vector-based graphics system है
Zoom करने पर quality loss नहीं होता
CSS और JavaScript से easily control होता है
Icons और diagrams के लिए best choice है