Uploading Graphics
Graphics are 2D images and SVG files used in Pattern Designer and Design Canvas option blocks. They can include logos, patterns, decals, and artwork that users apply onto 3D surfaces.
Supported Formats
| Format | Use Case | Notes |
|---|---|---|
| SVG | Logos, patterns, vector art | Scalable; colour channels can be read and recoloured. |
| PNG | Photos, detailed graphics | Supports transparency. Best for raster graphics. |
| JPEG / JPG | Photos, prints | No transparency. Good for photographic decals. |
| GIF | Simple graphics | Animated GIFs display as a still image. |
| WebP | General purpose | Modern format, excellent compression. |
File Limits
| Limit | Value |
|---|---|
| Maximum file size | 50 MB per file (JPEG, PNG, GIF, WebP) · 10 MB per SVG |
| Recommended resolution (raster) | 1024x1024 to 2048x2048 pixels |
| SVG complexity | No limit on the number of shapes, groups, gradients or clipping paths. Very detailed SVGs (thousands of paths) upload fine but recolour more slowly in the Pattern Designer. |
How to Upload
- 1Navigate to Dashboard > Assets.
- 2Switch to the "Graphics" tab.
- 3Click "Upload" and select your image or SVG files.
- 4After upload, assign a name and category to each graphic.
- 5Graphics will become available in the Pattern Designer and Design Canvas option blocks.
Uploading SVG Files
SVG files are especially powerful in Simplio3D because the platform can read individual colour channels from the SVG, allowing end users to recolour specific parts of the design.
- 1Prepare your SVG in a vector editor (Illustrator, Figma, Inkscape). Use distinct fill colours for parts you want to be independently recolourable.
- 2Upload the SVG file via the Assets > Graphics tab.
- 3When the SVG is used in a Pattern Designer or Design Canvas option block, Simplio3D automatically detects the colour channels (distinct fill colours in the SVG).
- 4Each detected colour channel becomes a configurable option — users can change individual colours at runtime.
What happens to an SVG when you upload it
Every SVG is checked and cleaned before it is stored, so a graphic can never run code in your configurator or on your shoppers' screens. Your artwork — shapes, groups, transforms, gradients, patterns, clipping paths, masks, filters, embedded images and stylesheets — is kept exactly as it is. The following are removed, and the upload dialog tells you when it removed any of them:
| Removed | Why |
|---|---|
| Scripts and event handlers (onclick, onload, …) | Graphics are displayed as images and never run code. |
| Links to external files or websites, external stylesheets and fonts | Only embedded content is displayed. Embed images in the SVG instead of linking them. |
| Animation elements | Graphics are displayed as still images. |
| Embedded HTML (foreignObject, iframe) | Not supported inside graphics. |
| Comments, the XML header and Adobe Illustrator editing data | Not needed for display. This is never reported, because the artwork is unchanged. |
If an upload fails
The Upload Graphic dialog checks each file as soon as you add it and shows the reason next to the file:
| Message | What to do |
|---|---|
| This SVG is too large | Simplify the artwork or remove embedded photos, then re-export under 10 MB. |
| SVG could not be parsed: … line X | The file is damaged or not valid XML at that line. Re-export it from your design tool (Illustrator, CorelDRAW, Inkscape, Figma). |
| No <svg> root element was found | The file is not really an SVG (for example an HTML page or an image renamed to .svg). Export it as SVG again. |
| Missing xmlns="http://www.w3.org/2000/svg" | Usually an SVG copied out of a web page. Save it from a design tool, which adds this declaration automatically. |
#FF0000) for the icon and a black fill (#000000) for the text, Simplio3D will detect two colour channels. Users can then independently change the icon colour and text colour in the configurator.Using Graphics in Option Blocks
Pattern Designer
Apply repeating patterns onto 3D surfaces. Supports SVG and raster images with adjustable scale, rotation, and offset.
Design Canvas
Place graphics freely on a 3D surface. Users can position, scale, and rotate decals, logos, or artwork.
Categories
Organise graphics into categories such as "Logos", "Patterns", "Decals", "Icons", etc. When creating option blocks, you can filter by category to quickly find the right graphic.