Dynamic SVGs append to DOM but are not visible

[stephenavocado]

Hello,

I've built a tool in CodeSandbox that I am transferring to my Nextjs blog deployed on vercel. The tool uses react-xarrows to generate svg arrows between elements.

From the dev tools screenshot below, you can see that they svgs are being generated but are not visible on screen.

The expected behavior is shown in the below screenshot from the CodeSandbox version:

I assume this has to do with how Nextjs handles svgs, but I am unsure of how to address the issue. Any thoughts would be appreciated.

[icyJoseph]

Got more debugging information? What happens if you set widths on the surrounding area? Are all CSS resets, normalizers the same?

Edit

There was some global CSS affecting the SVG's.

[stephenavocado]

There are no changes between the two code bases, which is what is making it very confusing! Hmm, what do you mean by setting widths on the surrounding area?

[icyJoseph]

Next.js, simplified, calls React methods during SSR, and hands over to React client side hydration and further rendering.

Before looking into a bug there, which can be anything from namespace to broken svgs, I want to discard CSS issues. Got a link to a reproduction demo or repository?

[stephenavocado]

Gotcha. In this case, these arrows should all be handled by hydration then, as they are generated after linking two table together by creating an association (this is a domain modeling tool for reference), or loading these associations after SSR by pulling from local storage.

I did try modifying a number of CSS properties in the dev tools, but I don't see any properties being applied that would lead to these being visually hidden.

I did try changing the position attribute of the svg itself from absolute to relative, and the arrows now appear, but the positioning is not correct. Absolute positioning should work (as it does in the codesandbox) as the container is set to position relative.

[stephenavocado]

Ah, I have found the issue and it was with a global css declaration. This piece here was also being applied to svg's.

img, picture, video, canvas { display: block; max-width: 100%; }

@icyJoseph thanks for being a sanity check!!!

[icyJoseph]

Awesome! yeah I had a hunch that it might have been some CSS normalizer, or reset that was to blame. Don't forget to mark as answered!