skip to content
HeyBrazadownload →

Illustrator logoillustrator · HeyBraza shows you

how to export svg from illustrator for web

HeyBraza points at the export-as svg options and the outline-text step that keeps your fonts from breaking on the web.

illustrator can save a website-ready svg, but the wrong export menu and a forgotten outline-text step produce bloated or broken files. here's the right export path and the settings that keep the svg small and faithful.

or do it yourself

  1. 1select your artwork, then go type > create outlines (shift+ctrl/cmd+o) so text renders without the font installed.
  2. 2choose file > export > export as (not 'save as'), and pick svg as the format.
  3. 3in the svg options dialog, set styling to 'presentation attributes' and 'responsive' on for clean web code.
  4. 4set decimal places to 2-3 and object ids to 'minimal' to shrink the file, then click ok.
  5. 5for ui assets at multiple sizes, use file > export > export for screens and add svg plus any png scales you need.

let HeyBraza do this with you

HeyBraza is a tiny on-screen guide that points at the right buttons and talks you through it, on windows and mac.

download

common questions

should i use save as or export for svg?

use file > export > export as - 'save as svg' is meant as an editable working file and produces heavier code than the export path.

why does my svg text look wrong on the website?

the visitor doesn't have your font; outline the text (type > create outlines) before exporting so it ships as shapes.

more fixes