A conversion you should question before making
SVG and AVIF are both excellent formats, but for opposite kinds of image. SVG describes shapes and scales without loss; AVIF stores photographic pixels with the best compression ratio in mainstream use. Converting a simple icon from SVG to AVIF is usually a mistake: the SVG is already smaller, sharper and more flexible. The conversion earns its place in two situations. The first is a platform that rejects SVG but accepts modern raster formats, such as a headless CMS or an image CDN configured for AVIF. The second is a very complex SVG, a detailed map or a generated chart with tens of thousands of paths, where the vector file is several megabytes and renders slowly, while a raster at the needed size is a few hundred kilobytes and displays instantly.
How the tool gets from paths to pixels
Your browser loads the SVG into an image element and draws it onto a canvas at the file's intrinsic width and height, taken from the root element's attributes. Without those, the browser may fall back to the viewBox; without either, the tool uses 512x512. There is no size control on the page, so adjust the attributes in a text editor first. Scripts inside the SVG do not run, and external fonts, images and stylesheets are not loaded, so text renders with locally installed fonts unless it has been converted to outlines.
The pixels then go to a Web Worker where the AV1 encoder from jSquash, compiled to WebAssembly, produces the AVIF. The encoder runs at effort level 4. It is the slowest encoder on this site: a 1600x900 frame takes a second or two on a laptop, and a 4000x4000 rasterised map can take well over ten seconds. The delay is local CPU time; nothing is uploaded.
What AVIF does to vector-style content
Transparency is preserved as a separate alpha plane, so a transparent background and anti-aliased edges survive. Colour is stored with 4:2:0 chroma subsampling, which keeps brightness at full resolution and colour at half. Photographs never show this, but vector art is where it can appear: a one-pixel coloured outline, or small red text on white, may look slightly soft or show a faint fringe. Raising the quality slider does not change the subsampling. If that matters for your artwork, SVG to PNG keeps every pixel exact, and SVG to WebP has the same subsampling but wider support.
Quality settings and expected sizes
The slider runs from 20 to 95, defaulting to 80. For flat graphics with hard edges, 85 to 95 keeps outlines clean. For illustrations with gradients, 65 to 80 is plenty and produces very small files.
A worked example: a 1600x900 flat illustration with a transparent background typically becomes an AVIF of 25 to 50 KB at quality 85, against roughly 40 to 80 KB as WebP and 300 to 600 KB as PNG. A 3000x3000 rasterised city map with thousands of thin lines usually lands between 200 and 400 KB at quality 80, where the source SVG might have been 3 MB. A 512x512 icon comes out at 5 to 12 KB, which is often larger than the original SVG. These are typical outcomes, not guarantees.
Compatibility and keeping the master
AVIF displays in current Chrome, Edge, Firefox and Safari 16 or later, but Windows Photos needs an extension, older macOS cannot preview it, and most upload forms and email clients reject it. Use it for websites you control, ideally inside a picture element with a WebP or PNG fallback. Always keep the SVG as the master file; the raster cannot be scaled up again without blur. For the wider comparison of modern formats, read WebP vs AVIF vs JPEG.