HTML5 Svg

What is SVG?

SVG stands for Scalable Vector Graphics.

It is an XML-based format for drawing vector graphics — such as lines, rectangles, circles, text, and even complex paths — directly in the browser.

Unlike images (PNG, JPG), SVG graphics scale without losing quality, because they’re based on geometry, not pixels.

Feature	Description
Scalable	Can resize without loss of quality (no pixelation).
Text-based	Written in XML, easy to edit or manipulate.
Stylable	Can use CSS to style shapes.
Animatable	Can animate with SMIL, CSS or JavaScript.
Interactive	Can attach events (click, hover, etc.).

<svg width="200" height="200">
    <circle cx="100" cy="100" r="50" fill="orange" stroke="black" stroke-width="3" />
</svg>

<svg>: defines the SVG container (width 200, height 200).

<circle>: draws a circle.

`Feature`	`SVG`	`Canvas`
`Type`	Vector-based (XML)	Pixel-based (bitmap)
`DOM nodes`	Shapes are part of DOM	Drawings are pixels on a bitmap
`Scalable`	Infinitely scalable	May pixelate when scaled
`Interactivity`	Easy to add events to elements	Requires manual hit-testing
`Best for`	Diagrams, icons, charts	Games, complex animations