Designer Studio

Create A Clip Art Image

11min

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.

What are .SVG files?

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.

What are the advantages of SVG files?

  • They give high-quality graphics.
  • Magnify without sacrificing sharpness.
  • No loss in details and clarity.
  • Offers superior support for text and colors.

How to Create a Clip Art (.SVG file) in Adobe Illustrator? (Single Color)

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.
Document image


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.
Document image

  • 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.

How to Create a Clip Art (.SVG file) in Adobe Illustrator? (Multi-Color)

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.
Document image


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
Document image

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


3. Save the SVG File

  • To save the SVG file, go to File > Export > Export as
Document image

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


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

Document image


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.