Preparing and Exporting SVGs for VU OS
This guide provides a complete workflow for preparing an SVG file in Adobe Illustrator with independently colorable sections and then exporting it correctly for use in the VU OS customizer.
Part 1: How to Set Up Unique Paths for Coloring
Before exporting, you must prepare your artwork so that different parts of the design can be colored separately in VU OS.
The Core Concept
To allow for separate color changes on different parts of an SVG, the system needs to identify those parts as unique groups or "classes". The simplest way to create these classes is to assign a different fill color in Adobe Illustrator to each group of paths you want to control separately. When imported, VU OS will interpret every unique color value as a distinct, customizable class.
Step-by-Step Preparation
Create a new document or open your design in Adobe Illustrator.
Ensure your artwork consists of vector paths.
Assign a unique color to each desired color group:
Select all the paths that should be colored together.
Using the color palette, assign a single, unique fill color to them (e.g., #FF0000).
Select the paths for your next color group and assign a different unique fill color (e.g., #0000FF).
Repeat for all desired color groups. If you need three customizable areas, you must use three distinct colors.
Example: Camouflage Pattern
This camouflage pattern demonstrates the principle perfectly. To make three sections of the pattern customizable, the artwork was prepared using three different shades of gray. This creates three distinct classes for VU OS to recognize.
Part 2: How to Export SVGs from Illustrator
Once your paths are correctly set up with unique colors, follow these steps to export the file. Using "Export for Screens" is the recommended method.
Export for Screens vs. Save As
You may be tempted to use Illustrator’s File > Save As > SVG option, but we strongly recommend against it.
Save As: Creates an SVG that often includes extra, non-standard code specific to Adobe Illustrator. This can lead to larger file sizes, rendering errors, and unpredictable behavior in VU OS.
Export for Screens: Is specifically designed to generate clean, optimized, and web-standard SVG code. It strips out unnecessary data, resulting in a more reliable and performant file for our platform.
Step-by-Step Exporting
Ensure your artboard contains all the paths you need.
Navigate to the Export menu:
In the top menu bar, go to File > Export > Export for Screens.
Configure the Export Settings:
In the "Export for Screens" window, make sure the 'Artboards' tab is selected.
Crucially, leave the 'Full Document' option unchecked. This ensures the SVG is cropped to the artboard's dimensions.
In the 'Formats' section on the right, set the Format dropdown to SVG.
Click 'Export Artboard' to save the final SVG file to your computer.
Best Practices for Clean SVGs
Before exporting, follow these steps for the best results:
Outline All Text: Text must be converted to vector shapes. Select any text objects and go to Type > Create Outlines.
Expand All Strokes: If your design uses strokes (outlines), they should be converted to filled shapes. Select the objects and go to Object > Expand.
Name Your Layers: In the Illustrator Layers panel, give your color groups meaningful names (e.g., "Logo," "Text," "Accent"). This makes the SVG code easier to debug if issues arise.
Clean Your Document: Delete any hidden layers, stray points, or unused objects from your artboard to keep the file size minimal.
Fit the Artboard: Ensure your artboard is tightly cropped to your artwork by going to Object > Artboards > Fit to Artwork Bounds. This prevents unwanted empty space around your design.
Your SVG is now properly prepared and exported, ready for upload and configuration in VU OS.
Last updated