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.)
• 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.
Step 2: View outlines of pattern.
Step 3: Object > Expand > Fill Pattern
View Outlines now of pattern. It will be expanding past the Clipping Path boundaries. See the Layers Palette it now has expanded object layers.
Step 4: Group the multiple layers as one with the clipping path on top of that.
Step 5: With both the Clipping Path and the grouped ‘Art’ selected > Open Pathfinder > Select Merge. (Excess expanded Fill gets deleted)
Step 6: Merged art will appear as below.