You have probably seen the .svg file extension next to a logo or an icon and wondered how it differs from a normal image. The short version: an SVG is not a photograph stored as dots, it is a set of drawing instructions stored as text. That one difference is why designers reach for SVG whenever a graphic has to look perfect on a tiny phone and a huge monitor alike.
This guide explains what the format actually is, where it beats an ordinary image and where it does not, and the practical steps to open, edit and use an SVG file. No prior knowledge is assumed.
What SVG stands for, and what it really is
SVG stands for Scalable Vector Graphics. It is an open standard, which means no single company owns it, and it has been part of the web since 1999. The "vector" part is the key idea. Instead of recording the colour of every pixel in a grid, an SVG records the shapes themselves: a circle here, a line there, a curve from one point to another, each with a colour.
Because those instructions are written in plain text, you can open an SVG in a text editor and read it. A small icon might be only a few lines long. That text is XML, the same kind of structured markup that HTML uses, so an SVG sits very comfortably inside a web page. It is the reason an SVG can be styled with CSS, animated with JavaScript and even read by search engines, none of which is possible with a flat image.
In one sentence
A PNG is a picture of a shape; an SVG is the recipe for drawing that shape. Give the recipe a different size and the browser simply draws it again at that size, perfectly crisp every time.
How SVG differs from PNG and JPG
PNG and JPG are raster formats. A raster image is a fixed grid of coloured pixels, like a mosaic. It looks fine at its intended size, but enlarge it and the browser has to guess what goes in the gaps, which is why blown-up photos look soft and blocky. An SVG has no fixed grid. Ask for it at 16 pixels or 1,600 and it is redrawn from the maths, so the edges stay clean at any scale and on any screen density.
The trade-offs follow from that. For a flat logo or icon, an SVG is usually a smaller file as well as a sharper one. For a photograph, the opposite is true: describing millions of subtly different pixels as shapes produces a huge, clumsy file, so photos belong in JPG or PNG. If you want the full breakdown, see our dedicated guide on SVG vs PNG.
| SVG (vector) | PNG / JPG (raster) | |
|---|---|---|
| Made of | Shapes described in code | A fixed grid of pixels |
| Resizing | Sharp at any size | Blurs when enlarged |
| Best for | Logos, icons, illustrations | Photos and detailed images |
| Recolour with CSS | Yes | No |
| Animate | Yes, with CSS or JS | No (except animated GIF/APNG) |
What SVG is good at, and what it is not
SVG is the right choice when a graphic is made of clean shapes and has to scale. That covers most of what you see around the edges of a website, which is why the format is so common for:
- Logos and icons that need to look sharp from a favicon to a billboard.
- Illustrations and line art with solid colours rather than photographic detail.
- Charts and diagrams, where the text inside stays selectable and readable.
- Anything responsive, because one file serves every screen size and pixel density.
On top of scaling, SVG brings three practical wins. The files are tiny for simple artwork, which keeps pages fast. They can be recoloured in the browser, so one icon works in light text, dark text and a hover state without extra files; our guide on how to change icon colour covers that in detail. And the text inside an SVG stays as real text, which helps both accessibility and search engines.
Where SVG falls down is detail. A holiday photo or a richly shaded painting has no clean shapes to describe, so forcing it into SVG creates a bloated, ugly file. For anything photographic, stay with JPG or PNG. If you have an SVG icon but a particular tool only accepts a flat image, you can convert the SVG to PNG in a couple of clicks.
How to open an SVG file
This is where SVG surprises people, because there is no special software to install. You almost certainly already have something that opens it.
- A web browser is the quickest route. Drag the
.svgfile onto an open Chrome, Firefox, Safari or Edge tab, or right-click the file and choose "Open with" your browser. It renders instantly. - A design tool such as Adobe Illustrator, the free Inkscape, Figma or Affinity Designer opens an SVG as fully editable shapes.
- A text or code editor such as VS Code, Sublime Text or even Notepad shows you the underlying markup, since an SVG is just text. This is handy for a quick look or a small edit.
Double-clicking an SVG on Windows or macOS usually opens it in a browser or the default image viewer. Older versions of the Windows Photos app did not preview SVG, so if a double-click does nothing useful, the browser method always works.
How to edit an SVG file
There are two honest ways to edit an SVG, and the right one depends on how big the change is.
For a quick tweak, edit the code. Open the file in a text editor, find the fill attribute and change the colour value, or adjust the viewBox to crop or reframe the artwork. Because the file is readable text, small changes like recolouring or renaming are faster here than in any design app.
For anything visual, such as moving shapes, redrawing a path or combining icons, use a vector editor like Inkscape, Illustrator or Figma. You select the shapes on a canvas and edit them directly, then export back to SVG.
If all you want is a different colour or size before downloading, you do not need to edit the file by hand at all. You can recolour, resize and re-export any icon directly in the ICON OOP colour tool and download a fresh file.
How to use an SVG on a website
Once you have your file, there are several ways to place it on a page, each suited to a different situation: as a simple img tag, pasted inline into the HTML, set as a CSS background, used as a React component, or pulled from an SVG sprite. Each method has a moment when it is the right one, and our full guide on how to use SVG icons on a website walks through all five with copy-ready examples.
One small but real point before you ship anything: check the licence. Open-source icon sets are generous, but brand logos carry trademark rules even when the file itself is free. Our short guide to icon licensing explains CC0, MIT, ISC and Apache in plain terms.
A common first job for an SVG is a site icon. If that is what you are here for, see how to add a favicon to your website, which uses an SVG as the modern, scalable favicon.
A quick safety note
Because an SVG can contain script, some platforms, WordPress among them, block SVG uploads by default. That is a sensible precaution, not a flaw in the format. Use files from sources you trust, and sanitise any SVG that comes from somewhere unknown.
Frequently asked questions
Next, compare the formats in SVG vs PNG, learn how to use SVG icons on a website, or just browse the icon library and grab one.