What Is an SVG and Why Use It? Vector vs Raster, Explained

You have probably seen .svg files pop up when you download a logo pack or export an icon, and you may have noticed something odd: you can scale one up to fill a billboard and it stays razor-sharp, while a PNG of the same logo turns into a blurry, blocky mess. That difference is the whole story of SVG. This guide explains what an SVG really is, how it differs from ordinary image files, and when it is the right tool for the job.

What an SVG actually is

SVG stands for Scalable Vector Graphics. The key word is vector. Unlike a photo, an SVG doesn't store a grid of coloured dots. It stores instructions, a set of mathematical descriptions of shapes: "draw a circle of radius 40 here," "fill this path with blue," "put this line between these two points."

Because those instructions are just text, you can open an SVG in a code editor and read it. Here is a complete, valid SVG that draws a red circle:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="crimson" />
</svg>

That's it. No pixels anywhere, just a recipe. When your browser renders it, it does the maths and paints the shape at whatever size it needs. Want to inspect the raw code and preview of a file you already have? Drop it into the SVG viewer and you can see the markup and the rendered image side by side.

Vector vs raster: the core difference

Almost every image you meet online is one of two kinds.

Raster (bitmap) images

PNG, JPG, GIF and WebP are raster formats. They store an explicit grid of pixels (say, 800 across and 600 down) each with its own colour. This is perfect for photographs, where every pixel can be a slightly different shade and there's no simpler way to describe a sunset than to list its colours.

The catch is resolution. A raster image only contains as much detail as its pixel grid. Scale it up and the browser has to invent pixels that were never there, which is why enlarged photos look soft or jagged. If you have run into this, our guide on how to enlarge photos without turning them blurry explains the limits.

Vector images

SVG is a vector format. Because it stores shapes as maths rather than dots, there is no fixed resolution. The same file renders crisply on a tiny phone icon and a giant printed poster. Zoom in forever and the edges stay perfectly clean, the browser simply recalculates the curves at the new scale.

Why this matters in practice

The vector/raster split isn't academic. It drives real decisions:

• File size for simple graphics. A logo with a few flat colours might be a 40 KB PNG but a 3 KB SVG. Fewer bytes means faster pages.
• One file, every screen. With raster you often ship 1x, 2x and 3x versions for different pixel densities. One SVG covers them all and always looks sharp on Retina displays.
• Editability. You can change an SVG's colour, size or even individual shapes by editing text or CSS. No re-exporting from a design app.
• Accessibility and SEO. SVG is real markup, so you can add a <title> element that screen readers announce, and search engines can read it.

For a head-to-head on when each wins, see our comparison of SVG vs PNG.

When to use an SVG (and when not to)

SVG is not a universal replacement for PNG or JPG. Match the format to the artwork.

Reach for SVG when the graphic is made of shapes:

• Logos and brand marks
• Icons and UI elements
• Charts, diagrams and infographics
• Illustrations with flat colours or simple gradients
• Anything you might need to resize, recolour or animate

Reach for a raster format when the image is photographic:

• Photos of people, products or scenery
• Screenshots
• Anything with fine, continuous tonal detail

Trying to express a photograph as vectors would require millions of tiny shapes. The file would balloon far past a JPG and look worse. Conversely, saving a two-colour icon as a PNG throws away SVG's crispness and flexibility for no benefit.

The hidden superpowers of SVG

Because an SVG is text and lives in the DOM, it can do things a flat image simply cannot.

It responds to CSS

You can style an SVG with the same CSS you use everywhere else, change fill colours on hover, adapt to dark mode, or resize with a single rule. A common trick is setting fill="currentColor" so an icon automatically matches its surrounding text colour.

It can be animated

Paths can be drawn on, shapes can morph, colours can transition, all with CSS or a little JavaScript, no video file required. If that intrigues you, start with our beginner's guide to animating SVG.

It becomes a component

In modern frameworks you can drop an SVG straight into your markup as a reusable piece of UI. We cover the practical patterns in how to use SVG icons in React.

A few honest trade-offs

SVG isn't free of downsides. Complex vector illustrations with thousands of paths can actually be heavier and slower to render than a compressed raster image. Files exported from design tools also tend to carry cruft (editor metadata, redundant groups, absurdly long decimals) that bloats them until you clean them up. And truly photographic content will always belong in a raster format.

Usefully, the cleanup problem is easily solved. Once you have an SVG, running it through an optimiser strips the junk and can cut its size dramatically. Our walkthrough on how to optimise an SVG shows the whole process.

Prove the difference in ten seconds

Drop any SVG into the viewer and zoom: no pixels appear, because the browser re-executes the drawing instructions at every scale. Then open the same file in a text editor and read it, because it is text, and that property is quietly the superpower: SVGs diff cleanly in version control, minify well, and can be edited with find-and-replace. Everything in our SVG toolbox builds on those two facts, and both are visible in your first ten seconds with the format.

Instructions, not pixels

An SVG is a set of drawing instructions, not a grid of pixels, and that single fact explains everything it does well. Use it for logos, icons, diagrams and illustrations, where it stays sharp at any size, weighs little, and can be restyled or animated on the fly. Keep photographs in PNG, JPG or WebP, where their pixel-perfect detail belongs.

The easiest way to get a feel for it is to look inside one. Open any .svg in the SVG viewer (everything runs in your browser, nothing is uploaded) and read the shapes for yourself. Once you can see the maths behind the picture, choosing the right format becomes obvious.

Sources

• SVG (MDN Web Docs)
• Scalable Vector Graphics (SVG) 2 (W3C)