AVIF to SVG Crop Converter
Load an AVIF image, drag the crop handles to define exactly the area you need, preview the result, then download an SVG file. Everything runs in your browser — your image never leaves your device.
Drop an AVIF here
or Browse Files · AVIF supported
What This Tool Does
This tool loads an AVIF image directly in your browser, presents an interactive crop overlay with draggable handles, and converts the selected area to an SVG file. No server upload is required. The full workflow — loading, cropping, encoding — runs entirely in client-side JavaScript using the HTML5 Canvas API. AVIF files use AV1 compression that requires full pixel decoding before the canvas can draw them; this tool uses URL.createObjectURL() combined with img.decode() to guarantee the decode is complete before drawing, preventing the silent blank-canvas problem that affects standard Image element loading with AVIF. The output SVG embeds the cropped image as a base64-encoded PNG inside an SVG <image> element, preserving transparency and producing a file that opens in every browser, vector editor, and SVG-aware application.
Who This Is For
- Web developers who have AVIF source artwork and need a cropped region wrapped in SVG for clean HTML embedding
- Designers preparing cropped AVIF assets for Figma, Inkscape, or Illustrator workflows that prefer SVG input
- Anyone converting a specific region of an AVIF photo to SVG without installing a vector editor
- Developers who need a quick crop-and-convert workflow that stays entirely in the browser
AVIF vs SVG: Format Comparison
| Property | AVIF | SVG |
|---|---|---|
| Format type | Raster (pixels) | Vector (XML-based) |
| Scalability | Fixed resolution — degrades when enlarged | Infinite — scales without quality loss |
| Compression | Lossy or lossless (AV1) | Embeds raster data as base64 |
| Transparency support | Yes (full alpha) | Yes (32-bit RGBA when embedding PNG) |
| Browser support | Chrome 85+, Firefox 93+, Safari 16+ | Universal — all browsers |
| CSS/JS manipulation | Limited | Full — style and animate SVG elements |
| File size | Very small | Larger (base64 overhead ~33%) |
| Best for | Web delivery, high-quality photos | Web embedding, vector tools, HTML docs |
Frequently Asked Questions
new Image() and FileReader.readAsDataURL(), the browser fires the onload event before the AV1 pixel decoding completes. Calling ctx.drawImage() at that point silently draws a blank canvas — no error, no warning, just empty output. img.decode() is a method on the HTML Image element that returns a Promise which resolves only after the complete pixel decode is ready, so the canvas always receives real pixel data.<svg> root element sized to the crop dimensions. Inside is a single <image> element referencing the cropped pixel data as a base64-encoded PNG data URI. The PNG encoding preserves transparency. The SVG can be opened in any browser or vector editor, and the image inside it scales with the SVG viewport.