Cookies on ons.gov.uk

Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.

We would like to set additional cookies to remember your settings and understand how you use the site. This helps us to improve our services.

View cookies

You have accepted all additional cookies. You have rejected all additional cookies. You can change your cookie preferences at any time.

Skip to main content

For designers Exporting SVG files for web use

Overview

To use Scalable Vector Graphics (SVG) images for the web, they should be exported with inline styles and not with Cascading Style Sheets (CSS) classes.

This ensures that styles are not accidentally overridden. It also means the file can be optimised without breaking through SVG Optimizer (opens in a new tab) 

How to export from Adobe Illustrator

To export an inline SVG image:

  1. Select “File”, “Export”, then “Export as”.
  2. Select “SVG” from the format dropdown (you might want to tick “Use Artboards” depending on your asset) and select “Export”.
  3. Set “Styling” to “Inline Style”.
  4. Set “Font” to “Convert to Outlines” if your graphic contains any text.
  5. Select “OK”.

How to optimise an SVG

Before uploading an SVG to the web, you should optimise it to reduce its file size and remove any unnecessary code usually added by programs like Adobe Illustrator.

We recommend optimising an SVG using a service like SVG Optimizer (opens in a new tab) 

To optimise an SVG image using SVG Optimizer:

  1. Select “Open SVG” and choose your image file.
  2. Ensure all the global settings are switched on, except for “Show original” and the feature setting “Remove xmlns”.
  3. Download the optimised SVG file.

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss this page on GitHub (opens in a new tab) 

Back to top