What is an SVG file?

You've seen the extension on logos, icons, and download buttons: .svg. But what actually is an SVG file, and why do designers and developers reach for it instead of a PNG or JPG? The short answer: an SVG doesn't store a picture — it stores the instructions for drawing one.

SVG in one sentence

SVG stands for Scalable Vector Graphics. It's an open, text-based format that describes an image as a set of shapes — lines, curves, rectangles, and text — using math, rather than as a grid of coloured pixels.

Vector vs raster: the core difference

Every image format falls into one of two camps:

• Raster (PNG, JPG, GIF, WebP): a fixed grid of pixels. Each pixel has a colour. Zoom in far enough and you see the squares.
• Vector (SVG): a description of shapes. "Draw a circle here, fill it blue, put this curve next to it." The browser redraws those shapes at whatever size you ask for.

That single distinction is why a vector stays razor-sharp at any size while a raster blurs when you scale it up. There are no pixels to stretch — the shapes are simply recomputed.

What's actually inside an SVG

Because SVG is just text (specifically XML), you can open one in any editor and read it. A blue circle looks like this:

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

That readability has real benefits: SVGs diff cleanly in version control, can be edited by hand or generated by code, styled with CSS, and animated with JavaScript. You can even paste one directly into your HTML so it loads with zero extra network requests.

What SVGs are great for

Vectors shine on flat, graphic content with clear edges:

• Logos and wordmarks — one file works from a favicon to a billboard.
• Icons and UI elements — crisp on every screen, recolourable with a single attribute.
• Illustrations and charts — clean lines, tiny file sizes.

They're also typically much smaller than an equivalent high-resolution PNG, and you never have to export @1x, @2x, and @3x variants to cover different displays.

Where SVGs fall short

SVG is the wrong tool for photographs or anything with continuous, organic detail. Reproducing a photo as vector paths would take thousands of shapes and produce a file far larger than a JPG — for no visual gain. For photos, stick with a raster format. We cover this trade-off in depth in why SVG beats PNG for logos & icons.

One safety note

Because an SVG is code, it can contain embedded scripts. That's harmless for files you create yourself, but you should sanitize SVGs from untrusted sources before displaying them on a website — strip scripts and event handlers, or render them as plain images. It's the same caution you'd apply to any user-uploaded content.

How do I get an SVG?

If you're designing from scratch, tools like Figma, Illustrator, or Inkscape export SVG directly. If your logo only exists as a PNG or JPG, you'll need to vectorize it — trace the raster into vector paths. That's exactly what SVGFast does: convert an image to SVG, or jump straight to PNG to SVG. New to vectorizing? Start with our guide on how to vectorize an image.