Illustrator
The Zentrick studio allows you to convert any Illustrator project to an app in just a few steps. This section gives you a step-by-step guide on how to do this, and a list of all the pitfalls you can prevent.

Basic Workflow

1. Open your Illustrator project and click "Save As...".
2. Click on the "Save as type:" dropdown menu and choose "SVG (*.SVG)".
3. Click on "Save" and then click on "OK".
4. Open the Zentrick studio and go to your project folder.
5. Click on the green "Add new" button, select "App" and click "Add".
3. Now click on "Upload SVG" and click "Next".
4. Your file explorer will now open, select the SVG file and upload it.
5. Hint: you can also drag and drop the SVG file into the studio.

Best Practices

Layers and Groups

Try to have a clear structure, the more layers or groups you use, the more complex the SVG file will become to work with at the end. You want it to be as clear as possible.

Naming

Be sure to name every element layer in your Illustrator project (even layers and groups), these names will be used by the SVG import tool to determine class names for the SVG elements. Having a structured naming convention in your app will surely improve the development process.

Pitfalls

Before importing an Illustrator project into the Zentrick studio there are multiple things you have to prepare first. Not every feature in Illustrator is supported by our import tool and you will have to adjust these elements in your file.

Clipping Paths

Clipping paths are not supported by the SVG import tool and will have to be resolved in the Illustrator file itself.

1. Go to Layers.
2. Select the <Clip Group>.
3. Go to Pathfinder.
4. Select Intersect.
5. Go back to Layers.
6. Select the newly created group.
7. Click on Object in the top menu, click on "Compound Path" and then click on "Make".

The clipping path has now been resolved and transformed into a single path element that is supported by our SVG imported engine.

Paragraphs

Paragraphs with multiple lines of text, indentation, listing or any other kind of special layout are not supported. Make sure to break down the paragraph into multiple single lines of text and position them accordingly.

Example of how it will then appear in the SVG editor:

Linked Files

Linked files in your Illustrator project will not get picked up by the SVG import tool. Instead you will have to upload images to a file server and paste the URL into the xlink:href attribute of <image> tag generated by the SVG import tool.

Replace the URL.

Oops! Your screen is too small for this website.