AVIFify

SVG

.svg

The W3C's XML-based vector format from 2001. It scales to any size without quality loss, making it the default for logos, icons, and UI art.

vectorlosslessTransparencyAnimation99% browser support

SVG and AVIF are complementary, not competing, formats — one describes shapes, the other stores pixels. SVG is an XML vector format: it records geometry, so it scales to any size with zero quality loss and stays tiny for line art. AVIF is a raster format derived from the AV1 video codec, built to compress photographs. This page explains the vector/raster split, when SVG is the only correct choice, why you must never flatten a vector logo into raster, and where AVIF takes over.

For the raster side of that split, convert in your browser with no upload: Convert JPG to AVIF, Convert PNG to AVIF, Convert AVIF to JPG, Convert AVIF to PNG.

Why SVG sits in a different category from AVIF

SVG stores mathematical instructions, not a pixel grid. A <circle> element is a centre, a radius, and a fill — the renderer rasterises it on demand at the exact resolution the display needs. AVIF, PNG, JPG, and WebP all store a fixed array of pixels and differ only in how that array is compressed.

Three consequences follow directly from the vector model:

  • SVG is resolution-independent — one file renders crisply at 16px and at 1600px, with no @2x or @3x variants.
  • SVG is scriptable and styleable — CSS colours it (currentColor inherits text colour) and JavaScript animates it.
  • SVG is inspectable text — you open the .svg in any editor and read the shapes.

No raster format, AVIF included, can match these. The trade is symmetrical: SVG is the wrong container for a photograph, exactly as AVIF is the wrong container for a logo.

Where SVG came from

SVG is a W3C open standard, not a vendor format. The W3C began work in 1999, and SVG 1.0 became a Recommendation on 4 September 2001. SVG 1.1 followed in 2003 and remained the practical baseline for over a decade. SVG 2 reached Candidate Recommendation status in 2018 but is implemented unevenly, so most production SVG still targets the 1.1 feature set.

The MIME type is image/svg+xml, reflecting its XML lineage. Because it is XML, an SVG is a document you can diff in Git, template server-side, and generate programmatically — capabilities a binary raster file like AVIF does not offer. See the W3C SVG specification for the authoritative grammar.

When SVG is the only correct choice

Choose SVG for any content built from shapes rather than captured from a lens. These assets are natively vector, and rasterising them throws away the property that makes them useful:

  • Logos and brand marks — they must render sharp on a business card and a billboard.
  • UI and app icons — modern icon libraries such as Lucide, Heroicons, and Phosphor ship vector-only.
  • Diagrams, charts, and infographics — the text stays selectable and screen-reader-readable.
  • Line-art illustrations — flat shapes compress to a few hundred bytes.

For these categories SVG is also smaller. A typical UI icon is 200–500 bytes as SVG versus 1–2 KB as PNG, and file size tracks shape count, not pixel dimensions. A 10-path logo stays 1–2 KB whether it renders at 24px or 2400px. See the MDN SVG guide for element-level detail.

Never convert a vector logo to a raster format

Flattening a vector logo to AVIF, PNG, or JPG is a one-way loss of scalability. The raster file is locked to the pixel dimensions you exported. Scaling it up produces blur or visible blocks; scaling down wastes bytes you already committed.

The damage is concrete. A logo exported at 240×80 looks correct in that one slot and degrades everywhere else — a retina header, a print sheet, a favicon. The original SVG would have served all of them from one resolution-independent file. Keep the SVG as the master, and rasterise only when a specific destination cannot accept vector.

Where AVIF takes over from SVG

AVIF wins decisively for photographic and continuous-tone content. Photographs are not geometric primitives — they are millions of subtly varying colour samples. Encoding that as SVG, by tracing it into thousands of filled paths, produces a file far larger than even uncompressed PNG, and it renders slowly.

Hand the asset to AVIF when the content is:

  • Photographs — portraits, products, scenery, anything from a camera sensor.
  • Complex gradients and soft shadows — AVIF's 10-bit and 12-bit depth suppresses the banding vector tracing cannot avoid.
  • Textured or noisy imagery — film grain, foliage, fabric, where there is no clean shape to describe.

AVIF stores a photograph in roughly half the bytes of an equivalent JPEG at matched quality. For the full raster decision framework, see the AVIF format overview and AVIF vs PNG.

The rule of thumb: vector to SVG, photographic to AVIF

The decision is structural, not aesthetic: ask whether the content is made of shapes or of pixels.

  • Shapes — logos, icons, diagrams, line art — ship as SVG.
  • Pixels — photographs, screenshots of photos, textured imagery — ship as AVIF with a fallback.
  • Genuinely mixed or hyper-detailed illustrations — compare both file sizes per asset, because a 5,000-path illustration beats its raster export only sometimes.

Because the two formats never overlap in their sweet spots, a well-built site uses both: SVG for the interface chrome, AVIF for the imagery. Tuning the raster side is covered in AVIF Optimization and Core Web Vitals for Images.

Sanitise untrusted SVG before rendering it

Treat any SVG from an outside source as executable code, not just an image. Because SVG is XML, it can carry <script> elements, event-handler attributes such as onload and onclick, and javascript: URLs — all of which run if the file is inlined into the page. This makes user-uploaded SVG a cross-site-scripting (XSS) vector that AVIF, a passive binary format, simply cannot be.

Two defences cover the common cases:

  • Render untrusted SVG through an <img> tag — browsers disable scripting and external loads for SVG referenced this way.
  • Run a sanitiser before inlining — DOMPurify strips dangerous tags, event handlers, and unsafe URI schemes using the browser's own parser.

Sanitisation is non-trivial: a 2023 disclosure showed a CSS @import inside an SVG <style> block could trigger external requests, so keep your sanitiser current.

FAQ

Should I convert SVG to AVIF?

Generally no. Converting SVG to AVIF discards resolution independence and usually increases file size for logos and icons. Keep the SVG. Rasterise to AVIF only when a destination cannot render vector — for example, a platform that rejects image/svg+xml uploads.

Is SVG smaller than AVIF?

For line art, yes; for photographs, no. A logo or icon is far smaller as SVG, often under 1 KB. A photograph is far smaller as AVIF, because SVG must trace every tonal variation into paths.

Can AVIF replace SVG for icons?

No. Icons need to scale to arbitrary sizes and inherit CSS colour. AVIF is fixed-resolution and cannot be recoloured with currentColor, so SVG remains the icon standard.

Does AVIF support transparency like SVG?

Yes, but differently. AVIF carries full 8/10/12-bit alpha for raster pixels, while SVG transparency is a property of vector shapes. Both handle transparent backgrounds; only SVG also scales infinitely.

Sources and further reading