When to use SVG, and how to optimise it

What makes SVG different

SVG (Scalable Vector Graphics) describes shapes, paths and text as XML instead of storing pixels. A browser draws it fresh at whatever size it is shown, so it stays sharp on any screen and at any zoom. For simple graphics the file is tiny, and it can be styled with CSS like the rest of a page.

When SVG is the right choice

• Logos, icons and simple illustrations made of flat shapes.
• Charts and diagrams that must stay crisp when zoomed or printed.
• Graphics you want to recolour or animate with CSS.

When it is not

• Photographs. Turning a photo into SVG either wraps the pixels in an SVG file, which gains nothing, or traces it into thousands of paths that look posterised and can be larger than a JPG.
• Places that do not accept SVG, such as many social networks, office apps and upload forms. Render it with SVG to PNG first; because SVG is vector, you can render at a larger size without losing sharpness.
• Files from unknown sources, unless they are sanitised first.

Making SVG files smaller

Design tools export SVG with a lot of baggage. SVG Optimizer removes it while showing a live preview, the size before and after, and the gzipped size:

• Comments, metadata blocks and editor data from Inkscape, Illustrator, Sketch and Figma.
• Hidden elements and empty groups.
• Long colour values shortened, whitespace collapsed and coordinates rounded, to two decimal places by default.
• Optionally the width and height attributes, keeping the viewBox so the graphic scales with CSS.

Check the rendering after optimising

Rounding coordinates and removing hidden elements are the steps most likely to change how a file looks. The optimiser compares the rendered result with the original and warns when they differ. If that happens, allow more decimal places or turn off Remove hidden elements.

SVG files can contain code

An SVG can include scripts, event handlers and links to external resources, so an SVG from an unknown source should not be placed directly into a page you care about. Aback Images sanitises every SVG before showing it, removing scripts, event handlers and external references, and renders it as an image that cannot run code.

Sanitising changes the file. If a graphic relied on scripts or external images, those parts will be missing from the cleaned version.