Is there a way to generate SVG in the production build

[lidonis]

I want to be able to have a Vue component to generate SVG using JavaScript and include it with parameters in several pages
For now I have put all my generation code in the mounted function but with that the SVG is generated client side.

I'd like to have it embedded in the render HTML of the file generated a build time to reduce loading time in the browser

[kissu]

You could maybe generate it in created since this is available in both server and client.

[lidonis]

Unfortunately I don't have access to the DOM at the created stage. I need it to create SVG elements.

[manniL]

Could you share a small repo of what you are trying to achieve?

[lidonis]

Here it is https://github.com/lidonis/nuxt-ssg-svg

[manniL]

Ah, I see.
As rough.js needs the document to create SVGs, it cannot be used server-side easily (see also rough-stuff/rough#169 for people who tried using it with pure Node.js).
You can either think about a "fake dom" like xmldom (or jsdom?) and ensure this lib is only used on the server-side. Major downside: You have to add logic for client and server-side separately.

TL;DR - not easily achievable but likely possible.

[lidonis]

I found a way around my problem using rough.js generator. With that I am able to draw my SVG and have it in the generated HTML file.
See the result on this branch https://github.com/lidonis/nuxt-ssg-svg/tree/rough_generator

Thanks everyone for helping