Suggest an edit

Improve this article

Refine the answer for “How does SVG differ from raster images?”. 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 main difference between **SVG** and **raster images (JPG, PNG, WebP)**: it is in **how the data is stored and displayed**:
vector graphics (SVG) are described with **mathematical formulas**,
while raster ones: with a **set of pixels**.

All the key pros and cons follow from this difference.

---

### 1. Storage principle

| Image type | How it is structured |
|---|---|
| **SVG (vector)** | Made of **formulas and coordinates**: "draw a circle with radius 40 at point (50,50)" |
| **Raster (JPG, PNG, WebP)** | Made of **pixels**: millions of small colored dots stored in memory |

Example of SVG code for a circle:

```html
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="tomato" />
</svg>
```

In JPG, that same picture is thousands of bytes of encoded pixels.

---

### 2. Scaling (the key difference)

| Criterion | SVG | Raster |
|---|---|---|
| When enlarged | No quality loss: formulas are recalculated | Loses sharpness: becomes "pixelated" |
| Best suited for | Logos, icons, interfaces, charts | Photos, realistic images, textures |

SVG scales perfectly:
on a Retina screen or an 8K monitor it stays **crystal clear**.
A raster photo becomes "blurry" when enlarged.

---

### 3. Size and performance

| Parameter | SVG | Raster |
|---|---|---|
| File size | Very small (text-based code) | Can be heavy (up to megabytes) |
| Compression | Can be minified, gzips extremely well | Already compressed (JPG/WebP) |
| Rendering | Fast, as long as the image is simple | Fast, but fixed |
| With complex graphics | Many elements → higher CPU load | Fixed file → simpler to render |

For a logo, SVG is better,
for a photo: JPG or WebP.

---

### 4. Capabilities and flexibility

| Capability | SVG | Raster |
|---|---|---|
| Scales without loss | Yes | No |
| Can be styled with CSS | Yes | No |
| Animated via CSS/JS | Yes | No |
| Interactivity (clicks, hover) | Yes | No |
| Transparency | Yes (via `fill-opacity`) | Yes (in PNG, WebP) |
| Gradient support | Yes | Yes |
| Photographic quality | No | Yes |

---

### 5. Where to use each format

| Task | What to choose |
|---|---|
| Logos, icons, diagrams, infographics | **SVG** |
| Photos, screenshots, textures, banner backgrounds | **JPG / WebP** |
| Transparent elements | **SVG** or **PNG** |
| Animations and interfaces | **SVG** (via CSS/JS) |

---

### 6. A visual example

| Scale 100% | Scale 500% |
|---|---|
| **SVG:** lines stay sharp | Quality does not change |
| **JPG/PNG:** "stair-stepping" appears | Blurry, pixels are visible |

---

### Summary:

| Criterion | **SVG** | **Raster (JPG, PNG, WebP)** |
|---|---|---|
| Graphics type | Vector | Pixel-based |
| Quality when enlarged | Not lost | Lost |
| File size | Small (for simple shapes) | Can be large |
| Scalability | Perfect | Limited |
| Animation and interactivity | Supported | No |
| Best use case | Icons, logos, charts | Photos, background images |

---

**In simple terms:**
**SVG** is like a **blueprint** that can be scaled infinitely.
A **raster image** is a **photograph**, where every pixel is already fixed.
SVG is ideal for **graphics and interfaces**,
raster formats: for **realistic images and photographs**.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.