Web Pattern Library

Github Repo

Menu


Global styles

Global components


Template Structure


Bag, Wishlist, & Checkout

Home / Login

Marketing Modules

Product Listing & Detail

Size & Fit Guides

Personalization

My Account / History

Static pages


JavaScript Helpers

Components Marketing template system:

SVG production guidelines

Many marketing modules support adding custom SVGs to the channel message element. This is done by selecting "Custom SVG/image" from the list of SVG icon presets and pasting in the SVG code for your custom artwork.

In this guide

Looking for help on how to export image bitmaps for photos?


Formatting and Saving SVGs

There are two methods to prep and Save SVGs for the web:

Copy & Pasting directly from Illustrator

The easiest way to add a custom SVG to your module is to copy your artwork in Illustrator Cmd + c and paste Cmd + v it directly into the "Custom SVG/image" text field of the form as SVG code. As soon as you paste, you will see your new artwork in the preview window. For this to work smoothly, you must first set up Illustrator to export SVGs correctly to avoid CSS conflicts between multiple SVGs on a page.


Setting up Illustrator for copy & paste

The default setting for copying artwork as SVG code in Illustrator can lead to duplicated class names and style collisions if you have multiple SVGs on a page. Luckily, we can "train" Illustrator to paste SVGs in a better format by first saving a SVG with custom options. After that, Illustrator should automatically use those settings every time we copy and paste so this is a one-time setup.

1. Open Illustrator and create an icon or other artwork we can use as our sample to export. Next, in the menu, go to File > Save a Copy...

2. In the save dialog, choose the SVG (svg) option in the Format dropdown at the bottom.

3. Click the Save button and another dialog will appear with SVG export options. In this dialog, first click the More Options button at the bottom to reveal advanced options. In the "CSS Properties" menu, choose the "Style Attributes" option.

4. Click the OK button to save your SVG file. Once you've saved one SVG with these settings, it will apply to all SVGs you copy to the clipboard. To confirm this, select some artwork, Copy Cmd + C it to your clipboard then paste it Cmd + v into the Custom SVG/image text field in the form and confirm there is no <style> block at the top of the SVG.


Alternate approach: Exporting SVGs as image files

The copy/paste method is ideal if you are working in the configuration form and creating a jsbin of the completed module for review. However, if you are instead prepping a set of image and SVG assets to hand off to the web team, then exporting the artwork as SVG (.svg) files is better because those can be placed in a folder or zip file. We'll walk though the standard way to export SVGs to ensure they are exported correctly.

1. In Illustrator, prep your artwork in artboards then go to File > Export > Export for Screens...:

2. In the dialog, look for the small gear icon in the middle of the right column to open the export settings. In this overlay, click on SVG in the left list:

3. Click on the Styling dropdown at the top and change that value from "Internal CSS" (Style block with classes) to "Inline Style" (inline style attributes on each element). Click the Save Settings button to make this your default SVG export setup.

4. Back in the Export for Screens dialog, make sure "SVG" is selected under Formats for your artboard(s) then press the "Export Artboard" button to save your SVG.

5. Once saved, you can preview and share these SVG files like any other image.

To use your SVG file in the configuration form, first open your SVG in a text editor so you can see the code. Select all Cmd + a, then Copy Cmd + c the code to your clipboard then paste Cmd + v it into the Custom SVG/image text field in the form.


Footnote: Why multiple SVGs can conflict with each other

By default, Illustrator creates a <style> block inside each SVG it exports that contains stroke and fill colors for the various elements in the SVG.

Unfortunately, Illustrator re-uses the same class names across every SVG you export so if you have multiple SVGs, each will have classes cls-1, cls-2, cls-3, etc.

Since the cascade in CSS allows rules lower in the page to override previous rules, the colors specified in the last SVG on a page will re-color all the SVGs higher in the page that share the same classes. For example, if you have an SVG that defines the fill of cls-1 to white, then follow it with a second SVG that defines the fill pf cls-1 to red, both paths will be red due to how CSS works.

If the colors in your SVGs mysteriously shift when you add them to the page, this is likely the reason.

To avoid conflicts, it's best to configure Illustrator to not use generic classes and instead apply colors directly to each element in the SVG in the form of inline style attributes:

<path class="st0" style="fill:#FFFFFF" d="M16.4,44l0.4,0c1.7-0.1,3.5-0.1,5.3"></path>

Since inline styles only impact to the specific element they are applied to, ther eis no risk of the styles from one SVG impacting others on the page.


Back to top