What Is an SVG File, and When Should You Rasterise It?

An SVG file does not store pixels. It stores instructions: draw a curve from here to there, fill this region with that colour, set this string in that typeface. Because the browser executes those instructions at render time, the artwork stays crisp at any size and the file is often only a couple of kilobytes. The same qualities make it a terrible choice for photographs and a non-starter in some environments. This article covers both sides honestly.

When rasterising is the right call, SVG to PNG preserves transparency, SVG to WebP gives a smaller result, and SVG to JPG maximises compatibility. For the smallest possible export try SVG to AVIF, and use the image resizer if the output dimensions need adjusting afterwards.

What an SVG file is, and where it diverges from raster art

A raster image is a grid of coloured dots. Blow a 400-pixel PNG up to 1200 pixels and the browser has no extra information to work with; it invents intermediate dots by guessing, and the result goes soft. Scaling a vector drawing simply applies the same mathematical description to a larger canvas, so nothing is lost.

The second difference is editability. A vector drawing opens in a plain text editor. Colours, stroke widths, even whole layers can be changed by hand. When a brand palette shifts, that turns a week of redrawing icons into a single find-and-replace.

What determines the weight of the file

A vector drawing weighs what its node count says it weighs, not what its on-screen size suggests. A clean icon lands under a kilobyte. A drawing produced by auto-tracing software, carrying tens of thousands of nodes, can run into megabytes and make the browser work hard to paint it. Complexity, not dimensions, is the thing to watch.

Where vectors genuinely win

• Logos and brand marks. One file serves the business card, the signage and the favicon.
• Interface icons. High-density displays stop requiring a second and third exported set.
• Charts and diagrams. Text stays real text, which screen readers and search engines can actually read.
• Artwork that needs colour variants. A dark-theme version is a changed attribute, not a new asset.

Photographs, natural textures and illustrations with thousands of blended colours do not belong in a vector. Automatic tracing from raster to vector is deliberately not offered anywhere in the toolset: the output either drifts far from the original or ends up heavier than the picture it replaced.

When an SVG file should become a PNG

Vectors look unbeatable on paper, yet several everyday situations call for rasterising.

• The destination refuses vectors. Social sharing images, email templates and most marketplace back-ends accept raster uploads only.
• The artwork goes into a document. Office suites and print workflows behave far more predictably with a fixed-resolution file.
• There is a font dependency. A drawing whose text has not been converted to outlines renders differently on a machine without that typeface. Rasterising removes the variable.
• The drawing is enormously complex. Painting tens of thousands of nodes on every visit costs more than shipping one raster export.

If none of those apply, stay in vector. Rasterising is a one-way door, so keep the source file regardless of what you publish.

Comparison table: vector source versus raster exports

Criterion	Vector (SVG)	PNG export	WebP export	JPG export
Behaviour when scaled	Lossless	Softens	Softens	Softens
Transparency	Yes	Yes	Yes	No
Selectable text	Yes	No	No	No
Typical icon weight	1 – 4 KB	8 – 25 KB	5 – 15 KB	12 – 30 KB
Compatibility	High on the web, low in dashboards	Universal	High	Universal
Edited with	A text editor	An image editor	An image editor	An image editor

Rasterising settings: dimensions, density and background

Three decisions determine what comes out the other side.

Output dimensions

A vector has no native pixel size, so you have to state the target. Conversions render the drawing at a density of 144 and cap any single edge at 4000 pixels. In practice 1200 pixels covers social and hero artwork, and 256 pixels is plenty for an icon. Exporting larger than you need only inflates the file.

Background handling

Send a transparent drawing to a destination without an alpha channel and the empty area becomes a flat colour. To get the result you expect, either choose a target that carries transparency or define the background explicitly inside the drawing before exporting.

Fonts and external references

If the drawing references a typeface that the rendering machine does not have, the letters are drawn with a substitute. Converting text to outlines before export removes that risk entirely. The same applies to drawings that pull in an external picture: when the reference cannot be fetched, the export comes out incomplete.

One environment note: rendering vector input requires a suitable drawing component on the server. Where that component is missing, the page still opens but the job returns an error instead of a file. When that happens, rasterise locally and continue with PNG to WebP.

Practical notes for shipping vectors on a page

There are two ways to put a drawing on a page and they behave differently. Referencing the file from an ordinary image tag is the simple route: the browser caches it, the markup stays clean, and you cannot reach inside the artwork afterwards. Inlining the drawing into the page markup lets stylesheet rules drive its colours, which is how a single rule can recolour every icon for a dark theme. The cost is that using the same icon in ten places repeats the markup ten times and gives up the caching benefit.

On accessibility, two small habits are enough. Give a meaningful drawing a short title so a screen reader can announce what it is, and explicitly hide a purely decorative one so the reader does not try to describe an empty graphic. Both take seconds and measurably improve how the page reads aloud.

A final caution: exports from design tools arrive stuffed with editor metadata, hidden layers and absurd decimal precision. Cleaning that out before publishing usually halves the file. An untouched export can reach 40 kilobytes for a single icon that should weigh two.

Frequently asked questions

Can I convert a PNG back into a vector?

Not as an automatic step. Deriving vectors from pixels means inventing information that was never there, and the result is either a rough imitation or a file with thousands of nodes that weighs more than the original. The right move is to go back to the source drawing or redraw the mark.

Are vector files safe to accept from third parties?

The format can carry scripts and external references, so drawings from unknown sources should not be embedded directly into a page. Rasterising eliminates that concern completely, because the export contains nothing but pixels.

Which format should a favicon use?

Modern browsers accept vector favicons, but older clients and operating-system shortcuts still expect raster. The pragmatic answer is both: keep the vector as the source of truth and generate 32, 96 and 180-pixel raster copies alongside it.

How do I make an oversized drawing smaller?

Removing redundant nodes, deleting unused layers and reducing decimal precision typically cuts more than half the weight. If it is still heavy after that, the artwork probably was not a good candidate for vector in the first place.

Still unsure which export target to settle on? How to choose an image format puts the options in one table, and image optimization for SEO covers the file naming and alt text side once the export exists.