What is an SVG file, and when should you use one

Most picture formats store a grid of pixels. SVG stores instructions. That single difference explains everything it is good at and everything it is not.

A picture made of sentences

Open an SVG in a text editor and it is readable. A simple one might say: the drawing is 100 units wide and 100 tall; draw a circle at 50, 50 with a radius of 40; fill it with this blue; draw this path on top of it in white.

Because the file says “a circle of radius 40” rather than “this pixel is blue, and this one, and this one”, there is no resolution in it. Ask for it at 16 pixels and something draws a 16 pixel circle. Ask for it at 3000 and something draws a 3000 pixel circle. Both are exactly as sharp as the device can manage.

The format is XML, it is a W3C standard, and every browser has supported it for well over a decade. It sits alongside HTML and CSS rather than apart from them, which is why an SVG on a web page can be styled with CSS, changed with JavaScript and made to respond to a colour scheme.

What it is good at

Logos and wordmarks. One file that is correct on a business card, a website header and a billboard. This alone is the reason most brand guides ship SVG.

Icons. Crisp at 16 pixels and at 512, and typically a few hundred bytes each.

Charts and diagrams. Lines, shapes and text, all of which stay sharp and all of which stay selectable if the text is real text.

Illustrations with flat colour. Anything drawn rather than photographed.

Anything that must change colour. An SVG placed inline in a page can take its colour from CSS, so one icon file serves a light theme and a dark theme.

What it is bad at

Photographs. A photograph is not made of shapes. Describing one as vectors either loses almost all of it or produces a file with tens of thousands of paths that is larger and slower than the JPG it came from.

Anything with complex texture. Fur, foliage, grain, noise. Same reason.

Fine gradients and soft shadows. Possible, and they make files larger and render slower, and the result often differs slightly between renderers.

If the picture came out of a camera, it wants a raster format. If it came out of a drawing program, it probably wants SVG.

The size question

For the things it suits, an SVG is usually much smaller than the equivalent PNG, and the gap widens the larger the picture is displayed. A company logo might be 4 KB as an SVG and 40 KB as a PNG at the size a website header needs, and the SVG is also correct on a dense display, where the PNG needs to be twice the size again.

For the things it does not suit, the comparison reverses violently. A traced photograph can be several megabytes of path data that renders more slowly than a 200 KB JPG and looks worse.

There is a middle case worth knowing about: an SVG that contains an embedded bitmap. That is a PNG or JPG encoded as text inside the XML, which adds about a third to its size because of the encoding. It is a perfectly normal thing to do when a design genuinely mixes vector and photographic elements, and it is not a scalable file however much the extension suggests otherwise.

Text, and the trap in it

An SVG can contain real text, which stays selectable, searchable and crisp. It can also name a font that your machine does not have, in which case whatever renders it substitutes something else and the layout changes.

This matters most when the file leaves your computer. A logo with live text set in a licensed font looks perfect to you and different to everybody else. The fix is to convert the text to outlines, sometimes called converting to paths or to curves, which turns each letter into a shape. The file stops being editable as text and starts being reliable everywhere.

Rasterising an SVG has the same issue: the renderer uses fonts available to it. A drawing whose font lives on a web server will not get it, because the browser deliberately does not fetch anything while rendering an SVG used as an image. That restriction is also a privacy feature, and it is why any honest converter warns you about text rather than quietly substituting.

How an SVG is placed on a page

There are four ways to put one on a web page and they behave differently, which surprises people.

In an img tag, like any other picture. Simple, cached like an image, and completely sealed: no script runs, no external font or picture is fetched, and CSS on the page cannot reach inside it. If you want to change its colour, you cannot.

Inline in the HTML, pasting the SVG markup straight into the document. Now the shapes are part of the page, so CSS can colour them, JavaScript can animate them, and an icon can follow a dark theme. The cost is that the markup is repeated in every page that uses it and is not cached separately.

As a CSS background, with url() in a background-image rule. Sealed like the img tag, useful for decorative things, and it can be inlined as a data URI to avoid a request.

In an object or iframe, which is rare and mostly used when the SVG is a self contained interactive thing with its own script.

The practical rule: use inline for icons that need to change colour, an img tag for logos and illustrations that do not, and never use an object element when one of the other three will do.

Editing one without a design tool

Because an SVG is text, several useful edits need no software at all.

Changing a colour is a search and replace on the hex value. Changing the size is editing the width and height attributes on the root, or adding them if they are missing. Adding a viewBox, if the file lacks one, is writing the original width and height into one: a drawing that was 64 by 64 gets viewBox=“0 0 64 64”, and from that moment it scales.

The one to be careful with is deleting things. An SVG is a tree, and removing an element that has children, or a definition that something else references by id, produces a file that renders differently or not at all. If a change does not do what you expected, a browser tab is the fastest way to check: drag the file in and reload after every edit.

Safety

An SVG is code, and it can contain a script element. If somebody opens such a file directly in a browser, as a page rather than as an image, that script runs in the context of wherever it was served from. This is a real category of web vulnerability, which is why many sites refuse SVG uploads or sanitise them.

It is worth keeping in proportion. Script inside an SVG never runs when the file is used in an img tag, set as a CSS background, or converted to a PNG. The risk is specifically about opening an untrusted SVG as a page, or letting users upload SVGs that other users will open. Treat an SVG from a stranger the way you would treat an HTML file from a stranger, and you are fine.

Converting to PNG, properly

Sooner or later a vector has to become pixels: for an email signature, a social profile, a platform that does not accept SVG, a favicon, an app icon.

The whole job is choosing the size, and this is where most converters fall down. A drawing with a viewBox and no width or height has no intrinsic size, and the CSS rule for a replaced element with no intrinsic size is 300 by 150 pixels. A converter that simply loads the file as an image gets a 300 by 150 drawing and scales it to whatever you asked for, which is why so many people report a blurry PNG from a perfectly sharp SVG.

The other common failure is a missing xmlns attribute on the root element. Such a file renders perfectly when pasted into an HTML page and fails completely as an image, and it is the single most frequent reason a file is said not to convert. Both problems are repairable in the file itself, and the SVG to PNG tool here repairs them before rendering.

While you are converting, it is usually worth producing a set rather than one: the sizes for a favicon, a home screen icon and a web app manifest are all standard, and favicon and app icon sizes lists them.

Questions

What does SVG stand for?

Scalable Vector Graphics. Scalable because it has no fixed resolution, vector because it stores shapes and curves rather than a grid of pixels, and it is a web standard maintained by the W3C.

How do I open an SVG file?

Any browser opens one: drag it onto a tab. For editing, Illustrator, Affinity Designer, Figma, Sketch and the free Inkscape all handle them. To read the code, open it in any text editor, because an SVG is text.

Is SVG better than PNG?

For anything made of shapes, usually yes: smaller, sharp at every size, and styleable. For photographs, no: a photograph has no shapes to describe, and an SVG of one is either enormous or just a PNG wrapped in XML.

Can an SVG contain a photograph?

Yes, embedded as a block of base64 encoded PNG or JPG data, or linked to an external file. That is legitimate but it does not make the photograph scalable: it is still a bitmap, now inside a vector container.

Are SVG files safe?

Mostly, with one caveat: an SVG is code and can contain script, which runs if the file is opened directly in a browser as a page. It never runs when the SVG is used as an image in an img tag or converted to PNG. Treat SVGs from strangers the way you would treat an HTML file.

How do I convert an SVG to a PNG?

Render it at a size you choose. The important part is choosing: an SVG has no pixels of its own, so a converter that does not ask is guessing, and several of them guess 300 by 150 and then stretch.