Convert SVG to WebP

An SVG is a set of instructions — draw this path, fill this shape, stroke this line — with no resolution of its own. Rendering follows those instructions at one particular size and records the result as pixels, and from that moment the drawing is gone and only the picture remains.

So the size chosen at conversion time is the size you have. Enlarging the WebP afterwards can only invent the pixels in between, which is exactly the situation vector artwork exists to avoid. Getting the scale right is the whole craft of this conversion; everything else is a detail.

A phone screen packs two or three device pixels into every CSS pixel, so an image rendered at exactly its display size looks soft on most of the devices that will see it. Rendering at two or three times and letting the browser scale down is the standard practice and costs less than it sounds — a flat logo at 2× compresses to a fraction of what a photograph of the same dimensions would.

The exception is anything genuinely large. A full-width hero rendered at 3× produces a file nobody should download; there, render at 2× and accept it, or reconsider whether the SVG could simply be served directly.

An SVG names its fonts rather than containing them. When the renderer has the font, the text is drawn correctly; when it does not, something else is substituted, at different widths — so a wordmark set in a licensed typeface arrives in a generic sans-serif, at the wrong width, with the layout around it broken.

The fix belongs in the drawing program, before export: convert text to outlines, so the letters become paths and depend on nothing. The text stops being editable and starts being reliable, which for a logo is the correct trade. For a diagram with labels you may want to keep, embed the font in the SVG instead.

The WebP written here is always lossy — the quality control decides how hard the encoder squeezes, and there is no lossless mode on this pair. The default of 82 is tuned for photographs, and on vector artwork it shows in the wrong place: a one-pixel rule picks up a smear, and the boundary between two flat colours gains a halo of in-between pixels.

Raise it to 95 or above for a logo, an icon or a chart, and those artefacts go while the file stays small, because flat colour compresses well at any setting. An illustration with gradients and soft shading behaves like a photograph and needs none of that. If the artwork has to come out exact rather than close, render it to PNG instead — that encoder is lossless.

Often. If the drawing is a logo, an icon or a simple illustration going onto a web page you control, the SVG is usually smaller than any raster of it, sharp at every zoom on every screen, and recolourable from CSS without producing a second file.

Convert when something refuses SVG, and things do: social media preview images must be PNG or JPG at fixed dimensions, email clients are unreliable, many upload forms reject the format outright, and platforms that accept user uploads often refuse it on security grounds — an SVG is XML and can contain scripts. Those are real constraints, and they are the reason this page exists rather than a general preference for pixels.

Icons come in sets, not singly. Drop the whole folder: each file is rendered in turn at the scale you chose, keeps its name with the extension swapped, and everything comes back as one ZIP ready to drop into a build.

Two habits keep the results consistent. Render every icon at the same scale rather than by eye, so a set looks deliberate at a glance. And keep the SVGs in version control as the source — regenerating the whole set at a new size then costs one pass rather than a redraw.

The rendering happens in the browser tab on your own processor. Nothing is uploaded, so there is no queue, no daily count and no account — and no third party ends up holding your unreleased brand assets, which is a more common concern with logos than with most files.

It also means a folder of two hundred icons converts as fast as your machine can draw them rather than as fast as they can be uploaded and fetched back.