What Is SVG? Scalable Vector Graphics Explained

SVG became a W3C recommendation in 2001 and describes images as maths — paths, shapes and text — rather than pixels. That makes it infinitely scalable, styleable with CSS, animatable and searchable, which is why logos, icons and charts on the modern web are overwhelmingly SVG. It is the wrong tool for photographs, which have no shapes to describe.

Compression: XML text, often gzip-compressed. Transparency: Full alpha. Animation: SMIL and CSS animation supported. Colour: Unlimited — resolution independent. Typical file size relative to WebP: tiny for flat graphics, enormous for anything photographic.

Every browser; most design tools. This is usually the deciding factor when choosing between SVG and WebP — WebP renders in every browser but is uneven in desktop software, while SVG has a very different support profile.

Rasterising an SVG to WebP pins it to fixed pixel dimensions, which is what you need when the destination cannot render vectors — email clients, older CMS uploaders, and any platform that treats SVG as a security risk and blocks it outright. The WebP-to-SVG direction embeds the photo rather than tracing it. The result will not scale cleanly the way true vector artwork does — for real vectorisation you want Illustrator's Image Trace or Inkscape.

This wraps your image inside an SVG container, which is what you want when a CMS, email builder or ad platform demands a .svg extension but the content itself is a photograph. It also gives you a hook for SVG-only CSS features — filters, masks and clipping paths that plain elements cannot use. Expect the SVG output to be tiny for flat graphics, enormous for anything photographic — that difference is the price of getting a format the destination will actually accept.