What does the <svg> element do?

HTMLJunior~2 min read

The <svg> element (Scalable Vector Graphics) is used to display vector graphics directly in HTML. It lets you draw shapes, icons, lines, text, and animations that do not lose quality when scaled, unlike raster images (PNG, JPG).

1. Example of a simple SVG

html

<svg width="200" height="100">
  <circle cx="50" cy="50" r="40" fill="skyblue" stroke="navy" stroke-width="4" />
</svg>

What happens:

<svg>: creates a 200x100 pixel drawing area;
<circle>: draws a circle centered at (50,50) with a radius of 40;
fill: the fill color, stroke: the outline.

Result: a circle with a navy border and a light blue fill.

2. The key difference from `<canvas>`

Feature	`<canvas>`	`<svg>`
Graphics type	Raster (drawn pixel by pixel)	Vector (mathematical shapes)
Scaling	Loses quality	Scales perfectly
Access to elements	None: everything is drawn as a "picture"	Each object: a separate DOM element
Use cases	Games, animations, charts	Icons, logos, diagrams, charts

In other words:

<canvas> draws "pixel by pixel";
<svg> builds shapes from formulas.

3. Main SVG shapes

Element	Purpose	Example
`<rect>`	Rectangle	`<rect x="10" y="10" width="80" height="50" fill="tomato" />`
`<circle>`	Circle	`<circle cx="50" cy="50" r="40" fill="gold" />`
`<ellipse>`	Ellipse	`<ellipse cx="80" cy="50" rx="60" ry="30" />`
`<line>`	Line	`<line x1="10" y1="10" x2="100" y2="100" stroke="black" />`
`<polygon>`	Polygon	`<polygon points="50,10 90,90 10,90" fill="lime" />`
`<polyline>`	Polyline	`<polyline points="0,50 25,0 50,50" stroke="red" fill="none" />`
`<path>`	Arbitrary curve (the most powerful shape)	`<path d="M10 80 Q 95 10 180 80" stroke="purple" fill="none" />`
`<text>`	Text	`<text x="20" y="50" font-size="20">Hello, SVG!</text>`

4. Embedding SVG

SVG can be inserted into HTML in three ways:

Directly in the page's code:

html

<svg>…</svg>

As a separate file:

html

<img src="icon.svg" alt="Icon">

As a CSS background:

css

background: url('pattern.svg');

5. Example with animation

SVG supports built-in animations:

html

<svg width="120" height="120">
  <circle cx="60" cy="60" r="40" fill="orange">
    <animate attributeName="r" from="10" to="40" dur="1s" repeatCount="indefinite" />
  </circle>
</svg>

The circle will pulsate.

6. Why SVG matters

No loss of quality: perfect for Retina screens and responsive sites.
Small size: usually smaller than PNG/JPG.
Styled via CSS: you can change the color, outline, and opacity.
Animated via CSS or JS.
Accessible in the DOM: you can interact with elements through JavaScript.

Summary:

Property	Value
Tag	`<svg>`
Graphics type	Vector
Advantages	Scalability, small size, interactivity
Main elements	`<rect>`, `<circle>`, `<path>`, `<text>`, and others
Use cases	Icons, logos, charts, diagrams, animations

In simple terms: <svg> is a vector editor built into HTML that draws shapes and text using formulas, not pixels. That's why it always stays sharp, lightweight, and scalable, on any screen.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.