1. Home
  2. Knowledge Base
  3. Quick Getting Started
  4. How to Build SVG's
  1. Home
  2. Knowledge Base
  3. PrintNow
  4. Documentation
  5. How to Build SVG's
  1. Home
  2. Knowledge Base
  3. Tips & Tricks
  4. How to Build SVG's

Creating SVG’s for Products in InDesign

 

How to Work with SVG’s:

For art such as icons, logos and illustrations that you would like the customer to colorize in the editor, the vector art needs to be created first in Illustrator and saved as SVG’s.
SVG’s or Scalable Vector Graphics allows the ‘art’ to look crisp at all screen resolutions. The svg’s can also be easily edited and modified. Vectors can be simple shapes, paths, gradients or just about anything you can do in Illustrator.

Remember it is best to work with the graphic at the size you would like it to appear.

Choose > Object > Artboards > Fit to Artwork Bounds > Save as SVG.

 Tip: Make an outer boundary box stroke with none and fill with none. (This will maintain the ‘placement in the correct x and y coordinates.)

See settings:

SVG-SETTINGS

Notes:

• If using font’s in the SVG convert text to outlines.
• If the position of your Art needs to be placed according to a dieline use the dieline layer as your guide when building your SVG. But save the AI/PDF/SVG without the dieline layer active.
• When you Create the Art > Choose > Object > Artboards > Fit to Artwork Bounds > Save as AI/PDF for placement in InDesign and also save Art file as an SVG for upload into the editor.
• There should not be any extra layers on the layer file when saving SVG’s other than the outer boundary box and the main ‘Art’ you want to be able to be editable. So as mentioned above if you used your dieline as a placement template and remember you must remove that dieline layer when saving the SVG.
• Open the product in the Editor and replace your current Art (pdf that was uploaded with the idml)  in the Editor by uploading your SVG as a PHOTO and drag your new uploaded SVG image over to your existing ‘Art.pdf’ to replace with SVG.
How to work with complex art or pattern fills:
 Step 1: Open for example, a pattern.

Step1-Pattern

Step 2: View outlines of pattern.

Step2-Pattern

Step 3:  Object > Expand > Fill Pattern

Step3a-ExpandStep3b-Expand_Fill

View Outlines now of pattern. It will be expanding past the Clipping Path boundaries. See the Layers Palette it now has expanded object layers.

 

Step3c-Expanded-pattern

Step 4: Group the multiple layers as one with the clipping path on top of that.

 

Select-ClippingPath-Art

Step 5: With both the Clipping Path and the grouped ‘Art’ selected > Open Pathfinder > Select Merge. (Excess expanded Fill gets deleted)

 

Pathfinder_Merge

Step 6: Merged art will appear as below.

 

Step1-Pattern

Was this article helpful?

Related Articles

© Copyright 2003 - 2016 PrintNow Technologies, Inc. All Rights Reserved.

Log in with your credentials

or    

Forgot your details?

Create Account