Real cookie that rotate with scroll

We use cookies.

The correct way to export SVG Files From Adobe Illustrator

Written by Jim Raptis

Jan 27, 2022

The correct way to export SVG Files From Adobe Illustrator

In this quick tutorial, I want to show you how to export your SVG artboard, or layer, correctly from Adobe Illustrator to make sure the shape is compatible with the MagicPattern geometric pattern maker.

Many times MagicPattern fails to import and show shapes created by Adobe Illustrator. It’s more common when you try to import duotone shapes with opacity.

This issue happens because the default Adobe Illustrator export options create a CSS class for every <path> element.

To avoid this issue, and import your Adobe Illustrator shapes correctly, you need to follow these steps while exporting your shape:

The screenshot is from Adobe Illustrator CC. Your own Illustration version might have a slightly different panel.
The screenshot is from Adobe Illustrator CC. Your own Illustration version might have a slightly different panel.
  1. Export your layer/artboard as SVG
  1. In the SVG options panels, go to the “Advanced Options” section
  1. Change the “CSS Properties” option to “Presentation Attributes”
💡
Based on the Adobe Illustrator version you use, the “CSS Properties” might be called “Styling”.

In that way, all the SVG styling attributes (eg. opacity, fill, etc) use the core SVG attributes instead of custom CSS.

 

Create Unlimited Graphics
In Seconds.

The easiest way to brand your business uniquely

MagicPattern Geometric Patterns Editor Preview

©2024 MagicPattern. Founded by Jim Raptis

We also build