Skip to main content

Design guides Exporting SVGs

When exporting SVG images for the web you should ensure that styles are exported as inline rather than as CSS. This is to ensure that styles are not accidentally overridden as the generated class names are not unique, and allows SVGO  to optimise the file without breaking it.

How to export from Adobe Illustrator

  1. File > Export > Export as
Screenshot of File > Export > Export as
  1. Select SVG from the drop-down (you might want to check “Use artboards” depending on your asset) and click “Export”
Screenshot of selecting SVG from drop-down
  1. Set “Styling” to “Inline Style”
Screenshot of selecting inline style