"Dom-less" start for just generating result svg [Enhancement]

[pid0r-3blan]

Is your feature request related to a problem? Please describe. I'm trying to find a way to use Two.js in react-native because we want to reuse existing renders from our web app. I saw this issue #159, but want to try another way.

In RN there's a package https://github.com/software-mansion/react-native-svg and despite the fact that it does not implement all the features of svg, we can at least try. So the problem I have is that I probably need to attach to some DOM element to start using Two.js instance, but of course there's no web-DOM in RN. So I'm wondering if there's a way to get a resulting svg structure, but without trying to render it to DOM (I called it "dom-less" render)? I have static renders without animations, so I need to get only first state of the render. Then I can try to translate it to react-native-svg components.

Could you give me a hint?

[jonobr1]

Good question. In Two.js you can pass an element to a new instantiation:

const two = new Two({
  domElement: svgElement
});

An SVG element could be retrieved (possibly) through the useRef function in React to set svgElement to a valid SVG element.

Unfortunately, based on a preliminary look at how react-native-svg works, this won't be completely helpful because you need to supply the SVG architecture to Two.js. Two.js is a web-based library and expects to use the document to create all of its SVG elements (when using the SVG Renderer). There currently isn't a feature like the node.js / canvas rendering to do headless renders with Two.js in SVG. Though this would be a spiffy addition to the library.

Let's leave this issue open so I can explore it further. Sorry can't be more helpful.