Welcome to the support center for

Fancy Product Designer & Multistep Product Configurator


Split SVG (Design) into individual elements

First of all, thank you for this amazing product!

I am using the jQuery-version.

I wondered if there was a way, when adding an SVG to the canvas, to split it into its individual SVG-elements.

This would allow the user to change the position and size of each element separately, as opposed to moving/scaling the whole SVG.

A more general approach might be adding support for Fabric.js-groups in FancyProductDesignerView.addElement.

For example:

var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
path.set({ left: 120, top: 120 /* , ... */ });
var my_group = new fabric.Group([path]);
viewInstance.addElement('group', my_group, /* , ... */);
FPD could then treat this added group like it already handles SVG (which basically is a Fabric.js-group internally, if I am not mistaken).

11 people like this idea

Additionally, if you support this feature, when these are added as canvas objects, I think it would be great to create an option defaulted to true (with a global/ design/image/custom override) which allows us to link these items together in the layer selector.

Is there any way to currently do something like that?

This is a really nice idea. Is this still planning to be implemented?

We are thinking about to make it possible via the "Advanced Editing" button in the toolbar. That will load the SVG in the advanced editing modal and the user is able to ungroup the SVG and edit the every path separately. 

This would be wonderful. I am looking for a way where user can upload their own SVG assets and tweak them with in the editor. Something like the new Freepik editor: https://editor.freepik.com

Included in V4.5.4

Hello sir, were you able to add the "Advanced Editing" option?

Is there an "ungroup" button at the "Advanced Editing" section?

Login or Signup to post a comment