What is an SVG file?

SVG is a plain-text format you can open in any editor. It stores shapes and coordinates rather than pixels, so it stays sharp at any size — a logo scaled to a billboard loses nothing. It is used for the web, line art and logos and editing.

The extension is .svg, and the full name is Scalable Vector Graphics. Both matter less than what the file can hold, which is what the rest of this page is about.

W3C published it in 2001. The specification is SVG 1.1.

Age is worth knowing here for one practical reason: the older a format is, the more programs have had time to learn it.

It is published in full, so anyone can implement it from the document rather than by inspection, which is why it turns up in so many programs and why files written twenty years ago still open. A published specification is not the same thing as a royalty-free one: where a format wraps a codec, the patent licensing is a separate question the standard does not settle.

SVG stores its content exactly. Saving it again changes nothing, so it can be opened, edited and re-saved as often as you like without accumulating damage — which is what makes it a working format rather than a delivery one.

SVG carries an alpha channel, so a logo keeps its soft edges over whatever sits behind it instead of arriving in a white box.

SVG can store an animation rather than a single still. That is worth knowing before converting one: a target that holds one frame keeps the first and drops the rest, usually without saying so.

It can work in RGB.

Eight bits per channel is what a screen shows and what nearly every delivery format carries.

SVG stores the parts of an image separately rather than flattened together, which is what makes it a working file. Almost every format it converts into flattens them, and the flattening is not reversible — keep the layered original.

Inkscape, Adobe Illustrator and Figma read it, and so do most programs of the same kind.

If a file will not open, the format is rarely the problem — it is more often that the program predates it. Converting to something older is the reliable way past that, and it is what the rest of this site is for.

Every current browser reads it.

That makes it a safe thing to put on a page or attach to a message without wondering what the other end has installed.

SVG is meant to be opened and changed. Keep the file in this format for as long as the work is going on, and export from it whenever a finished copy is needed.

An SVG is an XML document. Open one in a text editor and you find readable instructions: draw a circle at this coordinate with this radius, fill this path with this colour, put this text at this position. There are no pixels in the file at all.

That single property makes it unlike every other image format. It can be diffed in version control, edited by hand, generated by a script, compressed by the same gzip that compresses HTML, and searched. It also means a broken SVG can usually be diagnosed by reading it, which is not true of a corrupt PNG.

The file describes shapes rather than a grid of colour values, so the renderer draws them fresh at whatever size is asked for. A logo displayed at 24 pixels and printed at a metre wide comes from the same file and is exact at both.

This is why SVG is the right answer for logos, icons, diagrams and charts, and the wrong answer for photographs. A photograph has no shapes to describe — converting one to SVG produces either an enormous file of coloured rectangles or a posterised approximation, and neither is what anyone wanted.

Two attributes decide how an SVG behaves in a layout. `width` and `height` give it an intrinsic size; `viewBox` defines the coordinate system the shapes are drawn in. With a viewBox present, the drawing scales to whatever box the page gives it.

Almost every complaint about an SVG appearing at the wrong size traces back to this. A file with fixed dimensions and no viewBox ignores CSS sizing and sits at whatever the design tool wrote. Adding a viewBox that matches the artwork is usually a one-line fix and is what turns an exported file into a usable asset.

An SVG that contains text references its fonts by name, exactly as a web page does. On a machine that lacks the typeface, the renderer substitutes something else, letter widths change, and a carefully positioned wordmark shifts or overflows its shapes.

The standard defence is converting text to paths, which turns every letter into an outline. It guarantees the appearance everywhere and makes the text permanently uneditable and unsearchable. For a logo that is the right trade; for a chart with axis labels or a diagram meant to be maintained, it is not, and keeping a live-text version alongside is worth the second file.

When an SVG is written directly into the HTML rather than loaded through an `<img>` tag, its elements become part of the page. CSS can recolour a path on hover, a stylesheet can adapt an icon to dark mode, and JavaScript can animate individual pieces.

Loaded through `<img>` or as a CSS background, none of that applies — the SVG is rendered in isolation and the page cannot reach into it. That distinction decides which technique to use, and it is why the same file can be styleable in one place on a site and inert in another.

Because it is a document rather than a picture, an SVG can contain `<script>` elements, external references and links. Served from your own domain and opened directly, that script runs with your site’s privileges — which is a cross-site scripting vector that a PNG simply does not have.

This is why many upload forms reject SVG outright, and why a site accepting user-supplied ones should sanitise them rather than trust them. It is also worth knowing as a recipient: an SVG from an unknown source is closer to an HTML file than to an image, and opening it in a browser is not the neutral act it looks like.

Illustrator, Figma and Sketch write a great deal of scaffolding: editor metadata, layer names, empty groups, coordinates at sixteen decimal places, and definitions nothing references. An icon that should be 800 bytes commonly exports at eight kilobytes.

Optimisers strip all of it without changing what is drawn, and reductions of 60 to 80 per cent are ordinary. It also compresses well on the wire because it is text — a server sending gzip or brotli shrinks it again — which is why a well-prepared SVG icon set is often smaller than a single PNG.

An SVG can embed a bitmap as a base64 data URI, and some export paths do this without saying so — a shape with an effect the format cannot express gets flattened to an image and wrapped in SVG.

The result is a file with the `.svg` extension that does not scale, because the thing inside it is a fixed grid of pixels. If an SVG looks blurry when enlarged, this is almost always why, and the fix is upstream in the design file rather than in the export.

PNG when a fixed-size raster is needed and transparency matters — choose the pixel dimensions deliberately, because that decision is what you are giving up. JPG when the artwork is going somewhere that refuses PNG, accepting that transparency becomes a solid background. PDF when it is going to print, which loses nothing since both describe shapes.

Keep the SVG in every case. Every raster export is a decision about one size, and the original is the only version that can still produce any other. Converting to SVG from a photograph is the one direction that rarely makes sense — there are no shapes in a photograph to describe.