Use React with SVGs created by a tool

Question

I know I can use React with SVGs just like with HTML. However, complex SVGs will be created in an external tool (Inkscape, Illustrator etc.) that know nothing about React. Now, I used to manipulate SVG nodes by selecting them via JQuery of .querySelector (you can give node ids in Inkscape i.e. which makes selecting them quite easy) and applying transformations / node manipulations via regular DOM manipulations.

Given the React way of one-way rendering and the virtual DOM, I don't see how this could be accomplished. As complex SVGs tend to change constantly, copying the SVGs out and manipulating them in a text editor is a no-go as the designer will want to re-open them in his favorite SVG tool (which surely can't open JSX).

Is there a way to bring Reacts one-way rendering and manually selecting and transforming nodes in the real DOM together?

Answer 1

Solving this workflow issue with SVG was my primary motivation to create https://www.npmjs.com/package/react-samy-svg. You can use one way declarative rendering without having to paste the svg code. So the svg file can evolve separately from it's transformations. Hope it helps.

Here's an example on Glitch