react-juce svg capabilities/rendering

[Fyfe93]

Hi everyone, just wanted to get opinions on how best to approach using complex svgs that have masks,shadows,highlights,patterns and other filters etc in a vst plugin?

Does React-Native allow for this and can this be done using react-juce? I know the Juce svg parser and rendering is rather primitive/incomplete and can only deal with relatively basic svgs.

I have been looking at different ways to incorporate more complex svgs and considering react-juce as a potential solution. Other ideas are to use a WebBrowserComponent to use the html canvas and communicate between Juce and the webtech using messages. I'd rather not do this though as it seems like the largest amount of work!

[nick-thompson]

Hey @Fyfe93 good question, thanks for writing!

I'm not up to date on React-Native's svg capabilities, but you hit the nail on the head here:

I know the Juce svg parser and rendering is rather primitive/incomplete and can only deal with relatively basic svgs.

React-juce uses juce's svg parser under the hood, so our SVG support is exactly as complete as what you know of JUCE itself.

WebBrowserComponent/HTML Canvas definitely would get you more complete SVG support, but indeed, it would be a serious bit of work just to get that in there.

In the long run, I'd like to improve our SVG support, perhaps using something like https://github.com/svgpp/svgpp which will let us define our own mapping from SVG elements -> draw commands but otherwise handle all of the appropriate parsing. Or perhaps we can upstream some SVG parsing improvements to juce itself.

I'd also be curious to explore something with SVG parsing/handling on the js side of react-juce (i.e. https://github.com/canvg/canvg). Since our <Canvas> element is already a small abstraction over juce's draw commands, we could potentially get canvg in here and pass it our own canvas draw context.

Anyway, there's a lot of work/exploration to be done here, but it's definitely part of my goal!

[Fyfe93]

Hi Nick,

Thank you for your reply. That's great! Hopefully in time then there will be improved support for SVG. It seems to be that most SVG parsing/rendering outside the browser world is severely lagging behind. I noticed similar behaviour when importing SVGs in Affinity Designer too and hence why they recommend exporting SVGs rather than importing. However, it's frustrating when designers are used to using fancy features from the creating-and-exporting end of things; using modern tools like Figma, Illustrator, Affinity Designer but developers can't use their exports "as is".

To help with your research I came across this:
https://github.com/JanosGit/Resvg4JUCE which leverages off the Resvg Rust library and allows for what you described regarding custom mapping. This Rust library seems to be highly reputable so should provide greater capabilities than the current Juce SVG parser.

https://github.com/RazrFalcon/resvg

[nick-thompson]

Wow @Fyfe93 I've not seen resvg before but that looks awesome! Definitely worth a close look, thanks for that