Create A Clip Art Image
In the Designer Studio settings on the Admin Panel, you can upload Clip Arts for your customer. This helps them to create the design in a more enhanced way.
On the Admin Panel, the system allows only to upload .SVG files as Clip Art.
SVG is a vector format that describes images as shapes, paths, text, and filter effects. These files are compact and provide high-quality graphics. The SVG images magnify their view on-screen without sacrificing the sharpness, detail or clarity. The SVG format is entirely XML-based.
- They give high-quality graphics.
- Magnify without sacrificing sharpness.
- No loss in details and clarity.
- Offers superior support for text and colors.
1. Create your Clip Art using various shapes.
The below example is a Clip Art of the cloud. For the cloud shape, there are several circles created that lead to the formation of the cloud shape.
Enable Path Finder from Ctrl + Shift + F9 or go to, Windows > Path Finder.
2. Merge All the Shapes
- Press Ctrl + A to select all the shapes.
- Click on Pathfinder Tool to create a compound shape and add to the shape area.

3. Create a Compound Path
After merging all the shapes made a Compound Path for the shape i.e. the SVG path.
- Go to, Objects >> Compound Path >> Make.

- To save the files in SVG format export the files as SVG.
The .SVG exported is ready for upload into the designer studio of the Admin Panel as a Clip Art.
To upload a .SVG file into the Admin Panel go to Designer Studio >> Images >> ‘Clip Art’ Tab >> ‘Add’ Button
The above example shown was of a Clip Art with a single color. Shown below is an example where the Clip Art has two different fill colors, like a flower.
Note: If there are 10 paths or less in a clip art then only there will be an option to change color. Also, we don't support color gradient in clip art fill property.
1. Create a Shape
- Draw an image with more than one color fill.
- Enable Path Finder from Ctrl + Shift + F9 or go to, Windows > Path Finder.

2. Create Path
- The example shows a flower where petals are of a different color than the center of the flower.
- Thus, to create a path there is a need to merge both the entities separately and then create a Compound Path.
- Select all the petals of flowers.
- Go to Object > Compound Path > Make

- Now, select the center portion of the flower and go to, Object > Compound Path > Make

3. Save the SVG File
- To save the SVG file, go to File > Export > Export as

- In the Save As Dialog box, enter the file name.
- In the ‘Save as Type’ section, enter the file format as SVG (*.SVG).

In the SVG Options dialog box, enter the Decimal as 2 and look for other settings.

Using similar steps, you can create SVG files for other Clip Arts. In case of any queries, please connect with the OnPrintShop support team.
Note: If you have the same color with multiple objects then, merge those paths to have a single color picker.