SVG <Use /> implementation

[joshon]

I am building a PDF that will use a complex shape that is repeated. I was planning to use to define it and to place different instances of it. Is that possible? I could not see a Use function in react-PDF but it is part of https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs

[joshon]

Hi,
I am pretty new to Github and NPM so I have not been able to test this - but perhaps this fork will work to add the tag?

https://github.com/joshon/react-pdf/tree/joshon-svg-use

How can I test this? What is the best practice? When I used yarn to add it directly as a package it doesn't build, and when I try to build it I don't have husky etc. I don't need to solve all that unless you want me to - I just want to be able to use the use tag!

Thanks, Josh

[joshon]

OK I was being naive I didn't realize that the SVG elements in the primitives weren't just wrappers for an SVG implementation elsewhere, but that they are actually pointing to the render primitives functions. So making a use function work will involve parsing the defs (I see there is a getDefs function already) and then pointing to them. Question: is there a way to implement this and keep the file small with ctx? Is there an equivalent in PDFs of a reusable symbol?

[joshon]

I looked at the SVGtoPDF alternative because they have implemented the use tag, however, the way they handle it is to simply duplicate the original element over and over. The good news is that I looked at the resulting PDF and the PDF compression does a good job of compressing duplicate elements. The same is true with ReactPDF, so I will stick with ReactPDF, and not go down the rabbit hole of implementing the tag. I will just add the elements over and over and rely on PDF compression to sort it out!