radykal | Support Center Chooser

For which product do you need support?

Fancy Product Designer Multistep Product Configurator Another

Start a new topic

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).

5 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?

Login or Signup to post a comment