Forums | NoesisGUI

I have imported the svg file for the board for one of my astronomy board games into Noesis Studio as a page.
This seemed to work well. Now I want to select bits of the board and convert them into objects that I can manipulate.

I am selecting several SVG paths and copying them into a component.

However, this translates all the paths to a common origin instead of keeping each path at its original origin.

Using the "Make compound path" option breaks the SVG (which has some gradients).

How do a convert a set of SVG paths into some kind of object that I can reference in Noesis Studio?

Or perhaps I should just accept that the SVG handling in Noesis Studio is not very good and convert all my star diagrams into png files?

But that seems to be a shame.

Hi Kevin! Dorian here.

I've just looked into recreating your situation, and I'll run you through what I'd do in this scenario for you to get all of your Paths to retain their positions as you bring them from one document to another.

I've made a little video for you showing what I understand the original approach was, versus the method I'll outline below.

The essence of the trick here, is that instead of copy-pasting the Paths themselves, their common Parent Element (Like a Grid, a Canvas, or a Viewbox that all of the Paths are inside) is what should be copy-pasted.



Now as to the mechanics of what's demonstrated in the video:

Grouping Paths into a Parent Element

You have two choices to form this 'Group' made up of a Parent Element, and its Children Paths:

1) If you are unsatisfied with the current Parent Element of the Paths (For example, if you want the Parent to be a 'Grid' rather than a 'Canvas', as I did in the video), you can right click on the current Parent Element, and from the right-click context menu, navigate to ''Layout'-->'Replace With'-->and then select the new Parent Element type you'd like to use. All of your Path positions will be conserved during this operation.

2) In the event that you want to envelop your Paths into a new Parent Element, you can easily group all of your Paths into an Element of your choice by shift-clicking all of the Paths you want to group together, then with them all selected, if you right-click any of them, from the context menu you can navigate to 'Layout'-->'Group Into'-->and then select the Parent Element you'd like to group them into. Similarly as the above, all of your Path positions will be conserved during this operation.

Copy-Pasting the Parent Element and its Paths as a Group

From there, you can simply copy-paste the Parent Element that contains all of the Paths, into your Component.

As in the video, you may have to clear your Margins, or change the Vertical/Horizontal Alignment Mode of the Parent during this process to ensure it displays how you want it within the Component.
(Not shown in the video, if a Viewbox was not selected as the Parent Element to the Paths, you could also envelop your Parent Element in one to have it always scale proportionally within the destination document.)

Other Notes

What I've also included as a step in the video, is something else to be aware: depending on where you created or copy-pasted the Paths from originally, some properties of the SVGs could be interpreted as Property changes rather than represent the 'footprint' of the shape you are expecting on the Page. (This is the case with the Diagonal line Path in the video, which has a Rotation in the Transform section of its Properties when introduced to Studio)

To remedy this, you'll see me using the 'Path'-->'Flatten Transform' from the Path's Context Menu. This essentially makes the changes to the Transforms into the new 'base' of the Path.
If you run into any unexpected footprints, I'd recommend trying this option out and seeing if it provides you something closer to the presentation/positioning you expected.

Let me know if this works out for you, and if not, happy to diagnose and help further!

- Dorian

Thank you so much for such for such a detailed response! Unfortunately my SVG paths have no such parent objects. I am looking into whether it might be possible to create them in Inkscape but it would be a very tedious restructuring of a large file so I am not sure. Or perhaps I have misunderstood your instructions and there is an easy way to parent a selection of SVG paths in NoesisGUI Studio?

Hi Kevin! The 'parenting' is indeed something that would need to occur within Noesis Studio.

In terms of the features we are able to offer in terms of vector importing, this is largely dependent on how each individual editor processes their vectors. Unfortunately, Inkscape has proved to be one of the more difficult editors to extract features out of compared to others; see 📘Path Import Features ).

For example, in Illustrator, Figma, or Affinity, you would have the ability to have Layer Names from the vector editor completely conserved when pasting them in, which would make the Grouping/Parenting process way easier than trying to navigate a couple hundred layers named 'Path'.

In terms of what I understand of your specific situation and wishes; the idea of conserving Groups from vector editors is something we don't currently have implemented, but has been raised in #3481. With that said, similar to many of our pre-existing import features, what we can achieve here will be determined by each third-party editor on a case-by-case basis.

With that said, in the immediacy, as another potential solution, one other shortcut I will mention though, to make this process of Parenting in Studio significantly less tedious, is that instead of shift-clicking each Path individually, you are also able to hold Shift, press the first Path in the Navigator, and then click on the last Path in the Navigator (whilst still holding down on the shift key), and it'll select everything in-between the first and last.

You'd then either press Ctrl+G to group them all into a Grid, or you could select your preferred Parent Element through the right-click Context Menu, and navigating to 'Layout'-->'Group Into'--> and selecting the Element you desire to envelop them all in.

Lastly, as another alternate option, I wonder if it may be possible to bring your vector artwork into Figma, where you can name-prep it all, and then export to Studio from there, to make that Grouping/Parenting process a lot easier.

- Dorian

That works! All I really needed to do was to select the paths, type Ctrl-G, Ctrl-C and then go to a component and type Ctrl-V. Thank you very much. It was the Ctrl-G that I was missing.

Terrific! Thank you for reporting back on this!

It's fantastic that I have a component. I would now like to add several copies of this component to a page.

Is there a video or web page anywhere explaining how I can add a specific component that I created to a page? I thought that would be clear but I think that I may be missing something obvious.

Hi Kevin,

To add a Component to a Page (or to within a different Component), all that you need to do is click-and-drag it from your Assets Panel, directly onto the Stage, or directly into the Navigator!

That works! Thank you for your patience.