Suggest an edit

Improve this article

Refine the answer for “What does the <svg> element do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts523 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.