SVG to WebP Converter

The default quality here is 92, noticeably higher than the 75–82 you would use for a photograph, and that is deliberate.

Lossy compression of any kind is tuned for gradual colour variation. SVGs produce the opposite: large areas of perfectly flat colour meeting at hard edges. At middling quality settings that shows up as faint blotching inside solid shapes and a soft halo along boundaries — both far more noticeable on a clean logo than the same setting would be on a photograph.

• 95–100 — Effectively indistinguishable from a lossless render. Use for logos, icons and anything containing text.
• 88–94 — The default band. Clean on most artwork.
• 75–87 — Artefacts become visible around edges and in flat colour.
• Below 75 — Clearly degraded on graphics.

Render larger before you raise quality. Artefacts scale with pixel size, so a 2048 px render at 90 generally beats a 512 px render at 100 — and it stays sharp if the image is ever displayed bigger.

As with any SVG rasterisation, check your fonts. If the file names a font rather than converting text to outlines, the renderer substitutes whatever it has. Convert text to paths in your design tool if the lettering matters.

Choosing between the three raster targets

• WebP — best for a website you control. Transparency, clean edges, smallest file.
• PNG — best when you cannot predict what will open it. Transparency, clean edges, universally supported, larger file.
• JPG — only when something specifically demands it. No transparency, and its compression is a poor match for flat graphics.

Serving both a vector and a raster

If you want SVG's sharpness where it is supported and a raster fallback elsewhere, the <picture> element handles it:

<picture>
  <source srcset="logo.svg" type="image/svg+xml">
  <img src="logo.webp" alt="…">
</picture>

In practice every current browser takes the SVG, so this mostly protects against unusual clients.

How we handle SVG safely

SVG is a document with structure rather than a block of pixels, and a maliciously written one can attempt things a photograph cannot — reading files from the server, making outbound network requests, or carrying scripts. That is precisely why so many platforms refuse SVG uploads and send people here in the first place.

Two things make it safe here. You receive a WebP, never the SVG, so nothing embedded in the file can run in your browser. And every upload is screened before anything parses it: document type declarations, entity definitions, scripts, event handlers and references to external resources cause the file to be refused rather than repaired. Embedded data-URI images and internal references such as gradients are untouched, so ordinary design-tool exports convert normally.

Converting an icon set

Add as many files as you like; each is rendered at your chosen width with its own download. If you need the same icon at several sizes, run the batch once per size — every run renders from the vector rather than scaling a previous result, so each size is equally crisp.