How to Export an SVG for web using Adobe Illustrator

by

SVGs are the future. Get vectorized! Small size. Process of exporting SVG hYAh.

Step 1. Open the source vector file in Adobe Illustrator

.ai, .eps, and .pdf are all valid file formats for vector source files.

Step 2. File > Document Setup

  • Click on Edit Artboards
  • Specify the W and H dimensions of the artboard to fit the design
  • Scale the vector artwork to fit the newly sized artboard

 

Step 3. Select all and Object > Path > Outline Stroke

 

Step 4. File > Export…

Make sure use “Use Artboards” is checked.

Step 5.Click “Export”

  • Select Format: SVG (svg)

Use the following settings:

  • Styling: Internal CSS
  • Font: Convert To Outline
  • Images: Preserve
  • Decimal: 4
  • Minify: Checked
  • Responsive: Unchecked

 

*BONUS STEP* (for improved legacy browser compatibility)

Open the generated .svg file and add the following XML attribute to the SVG tag:
preserveAspectRatio="xMidYMid meet"

Resources

  • http://tutorials.jenkov.com/svg/svg-viewport-view-box.html
  • Description of values:
    meet – Preserves aspect ratio and scales view box to fit within viewport.
    slice – Preserves aspect ratio and slices off any part of the image that does not fit inside the viewport.
    none – Does not preserve aspect ratio. Scales image to fit view box fully into viewport. Proportions will be distorted.