What is an SVG? A plain-English guide
SVG (Scalable Vector Graphics) is an image format that describes pictures with math instead of pixels — so it stays razor-sharp at any size. It's the format most modern icons ship in, and it's just readable text you can open in any editor.
Vectors vs. pixels
A PNG or JPG stores a fixed grid of coloured pixels. Blow it up and you get blurry, blocky edges. An SVG instead stores shapes — “draw a circle here, a line to there, fill it blue.” The browser re-draws those shapes at whatever size you ask for, so an SVG icon looks crisp on a smartwatch and on a 4K monitor from the same file.
SVG is just text
Open an SVG in a text editor and you'll see XML, a tag-based format like HTML. A tiny circle looks like this:
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="9" fill="#6d5efc" />
</svg>Because it's text, SVG compresses well, works with version control, can be edited by hand, and can be styled and animated with CSS and JavaScript — things a raster image simply can't do.
Why SVG is ideal for icons
- Sharp at every size — one file covers 16px UI icons and giant hero graphics.
- Tiny — a typical icon is well under 1 KB.
- Recolorable — change the fill in CSS instead of exporting new files.
- Accessible — you can add a title and description for screen readers.
- Animatable — line-drawing, spinners and transitions are all possible.
Frequently asked questions
Is SVG better than PNG?
For icons and logos, almost always yes — SVG scales without blurring and is usually smaller. For photos, raster formats like JPG or WebP are better.
Can I edit an SVG?
Yes. Open it in a text editor to tweak the code, or in a vector editor like Figma, Illustrator or Inkscape for a visual workflow.
Do all browsers support SVG?
Every modern browser supports SVG, and has for many years.