Skip to content
ImageDoctor
Image formatUpdated

SVG: vector images that stay sharp at any size

SVG is a vector format: instead of storing pixels, it describes shapes, lines and text as code, so the image is redrawn sharply at any size. It is ideal for logos, icons and diagrams, and unsuitable for photographs.

SVG at a glance

File extensions
.svg, .svgz (compressed)
MIME type
image/svg+xml
Compression
None as such — it is text. Servers usually gzip or Brotli it, and .svgz is a pre-gzipped file.
Transparency
Yes. Anything not drawn is transparent.
Animation
Yes, with CSS or SMIL animation inside the file.
Colour
Any CSS colour, including gradients, patterns and filters.
Browser support
Every current browser.
In ImageDoctor
Opens SVGs by drawing them to pixels, then saves PNG, JPEG, WebP or AVIF. The Favicon Generator and Image to Base64 accept SVG directly. ImageDoctor does not edit SVGs as vectors.

Vector versus raster

JPEG, PNG and the other formats in this reference are raster formats: a fixed grid of coloured pixels. Enlarge one past its native size and the pixels show. An SVG is instead a list of instructions — draw a circle here, fill this path with that colour, set this text in that font — which the viewer carries out at whatever size it is displayed. A logo in SVG is equally crisp on a phone and on a billboard, from the same file.

Because it is instructions, an SVG's size depends on complexity, not on dimensions. A simple icon may be under a kilobyte. A detailed illustration traced from a photo can be megabytes and slow to draw.

SVG files can contain code

SVG is XML, and it can include scripts and links to external files. Browsers don't run scripts in an SVG shown with an <img> tag, but opening an untrusted SVG directly can. That is why many upload forms, email systems and content platforms reject SVG uploads, and why the safe route for sharing an SVG with a system that doesn't need the vector is to convert it to PNG.

Turning an SVG into a PNG

Converting to a raster format means choosing a pixel size, because the result will only be sharp up to that size. Decide where the PNG is going — a 512 px app icon, a 1200 px social image — and export at that size or double it for high-density screens. The Image Converter draws the SVG in your browser and saves PNG (keeping transparency), JPEG, WebP or AVIF; use its resize option to set the output size.

When to use SVG

  • Logos and icons on websites and in apps, where one file must look sharp at every size.
  • Charts, diagrams and simple illustrations built from flat shapes.
  • Favicons — many browsers accept an SVG favicon, though not all, so sites still ship the PNG and ICO files the Favicon Generator produces alongside it.

When not to

  • Photographs. They have no shapes to describe; use JPEG, WebP or AVIF.
  • Uploads to systems that only take raster images, such as most social networks and forms. Export a PNG.
  • Very complex artwork with thousands of paths and filters, which can be larger and slower than a well-compressed WebP.

Common questions

On a website, usually yes: one small file stays sharp at every size. Where a platform only accepts raster images, export a PNG at the size it needs.

Open the SVG in the Image Converter, choose PNG and set the output size you need. The PNG keeps the SVG's transparent background.

SVG files can contain scripts, so many platforms block them for security. Convert the SVG to PNG and upload that.

Tools for SVG files

Image ConverterConvert between JPG, PNG, WebP and AVIF with control over quality, transparency and background colour.Favicon GeneratorGenerate favicon.ico plus every PNG size a modern site needs, with the HTML snippet and manifest.Image to Base64Encode an image as a Base64 string or data URI, with ready-made HTML, CSS and JSX snippets.

Keep reading

All image formats