Split SVG (Design) into individual elements

Posted over 4 years ago by Tom

Post a topic

Implemented

Tom

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 Votes

8 Comments

Aytac posted almost 2 years ago

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

0 Votes

Halil İbrahim Kırtay posted about 2 years ago

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

0 Votes

rady kal posted almost 3 years ago Admin

Included in V4.5.4

0 Votes

Steve posted over 3 years ago

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

0 Votes

rady kal posted over 3 years ago Admin

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.

0 Votes

Olly Eveleigh posted over 3 years ago

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

0 Votes

James Sutherland posted almost 4 years ago

Is there any way to currently do something like that?

0 Votes

Yet Another Tech posted over 4 years ago

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.

0 Votes