Create a SVG

SVG stands for Scalable Vector Graphics, SVG’s are a file format that is used on spiff to create illustrations. On Spiff SVG’s are powerful tool as they allow the user to place on an object in any size whilst being being to amend all of the colors easily using an illustration step.

To create an SVG for Spiff, we are demonstrating how this is done using Adobe Illustrator but you can use any program capable of building a vector.

Open Ai – create whatever shape/pattern/design you like

Make sure once you have your design, it is all grouped together. Make sure everything you want in the design is selected and go to Object > Group

After your object is grouped go to Window > Asset Export

With your asset export open drag your design into the exporter. Make sure the format is on SVG and press Export.

This will export the SVG to your desktop where you can now rename it and upload it to Spiff.

Check Export Settings

Before exporting your SVG’s, go to your top menu and go file > export asSelect SVG and make sure your settings are on embed and unique Id.

Uploading to Spiff Hub

\It’s very simple to upload it to the Hub. Simply go to your Assets tab in the sidebar and go to Illustrations.

Then press the pink CREATE ASSET button in the top right.

This will open a window where you can select your SVG and press Open to upload it!

And viola. It’s now ready to add to a workflow.

Here is an example of the created SVG being used in a workflow.

Remember

For SVG’s to work properly in Spiff they can not contain:

- Gradients
- Opacities
- Drop Shadows & Other Effects

The reason these can’t work is because the colour picker does not recognise them. If you want your design to contain these things, you will need to use a rasterised image instead (however rasters cannot change colour).

Gradients

Below is an example of two SVG’s. The one on the left cannot be used because of the gradient in the background. However the one on the right is fine. To remove a gradient open your SVG in Illustrator and change it to a solid colour.

Opacities

If you look below you can see the SVG on the left has two white circles both with opacity. These cannot be used. Open your design in Illustrator and change your opacity to 100%.

Drop Shadows

Remember to remove all drop shadows from your SVG’s. The design on the left below would not work because of it, however the right design will. To remove dropshadows or other effects open your design in Illustartor and delete the effect from the Appearance section. You can find this in the Window drop down.

Colors

The most exciting thing about using SVG’s is that customers get to change the color of them! However we highly reccomend you don’t have more than six colors in your design because it makes the page look crowded and confuing.

How it looks with six colours –