CODEWITHSUNDEEP
csssvgnext.js
Hossein Fallah
Hossein Fallah

Reputation: 2589

Next.js is not showing the svg image, though it's in the public directory

I'm using Next.js and I have a couple of SVG files inside the public directory:

/public/branding/logo.svg
/public/branding/brand.svg
/public/branding/slogan.svg

And I'm using img tag to load them:

<img src='/branding/logo.svg' />

However, the image is not shown. But I can right click on the image src in Google Chrome's Dev Tools and open the SVG in a new tab and see its content.

Though I see this message:

This XML file does not appear to have any style information associated with it. The document tree is shown below.

What's wrong?

Upvotes: 0

Views: 12200

Answers (2)

marko
marko

Reputation: 101

I had the same issue. In my case the problem was that svg file did not have xmlns information. After adding xmlns="http://www.w3.org/2000/svg" Nextjs was able to display the file properly.

From the MDN docs:

The namespace declaration is provided by the xmlns parameter. This parameter says that the element and its child elements belong to whichever XML dialect has the namespace name http://www.w3.org/2000/svg which is, of course, SVG.

Upvotes: 4

Hossein Fallah
Hossein Fallah

Reputation: 2589

The problem is exactly that browser message:

This XML file does not appear to have any style information associated with it. The document tree is shown below.

If nextjs does not show your SVG image, first open that SVG inside a browser (Chrome for example). If it shows you that message, then SVG has problems. Replace it with another SVG and it should work. It worked for me.

So, we can say that nextjs only shows valid SVG files that browser can render. It took me some days to be solved though.

Upvotes: 4

Related Questions