Optimise SVG while preserving appearance and accessibility

An SVG can contain compact vector geometry, a large embedded bitmap or both. Start by inspecting what is inside. Changing the filename or wrapping a raster image in SVG does not turn its pixels into clean vector paths.

A safe comparison workflow

Keep the source SVG, make an optimised copy and compare both at the smallest and largest sizes where they will appear. Check clipped shapes, gradients, strokes and text. If the SVG is embedded inline, test its real page too: IDs, CSS selectors and scripts can depend on names that an optimiser changes.

SVGO provides command-line and library interfaces. Configure it for the way the image is used; do not treat every plugin as harmless. Removing unused editor data can help, but rounding coordinates or changing paths can affect rendering. Keep a meaningful viewBox for scalable delivery and preserve any accessible name or description that the embedding depends on.

Do not promise a fixed percentage reduction. Record the input bytes and output bytes, then separately measure the served response if your server applies gzip or Brotli. A file saved on disk and its compressed network transfer are different measurements.

A small case to inspect

This SVG is complete and has no external assets:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"
     role="img" aria-labelledby="mark-title">
  <title id="mark-title">Blue circle</title>
  <circle cx="50" cy="50" r="40" fill="#176bba"/>
</svg>

Save it as circle.svg, open it in a browser and resize the display. If you embed it as an <img>, provide the appropriate alt on that element; its surrounding use determines the text alternative. A decorative image needs different treatment from a labelled control.

What the OpenImages tools do

SVG to PNG rasterises at a chosen output size. That helps when the receiving app needs PNG, but the output no longer scales as vector geometry. Image to SVG has its own conversion options; inspect its result rather than assuming a photograph becomes an editable illustration.

Check the actual destination and any interactivity before replacing production assets. File optimisation is also separate from sanitising untrusted SVG: use an appropriate sanitisation/rendering boundary for uploaded content, rather than assuming fewer bytes make it safe.