The svg image is not displaying on Next.js even though it has been placed in the public directory

Currently, I am working with Next.js and have a few SVG files stored in the public directory:

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

To display these images, I am using the img tag like this:

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

However, I am facing an issue where the image is not appearing. Interestingly, when I right-click on the image source in Google Chrome's Dev Tools, I can open the SVG file in a new tab and view its content.

Despite being able to see the content, there is a message that says:

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

What could be causing this problem?

csssvgnext.js

Answer №1

The issue lies within the browser message itself:

Upon inspection, this XML file appears to lack any associated style information. The structure of the document is displayed below.

If your SVG image does not appear in Nextjs, try opening the SVG file in a browser (such as Chrome). If you see the aforementioned message, the SVG may be faulty. Swap it out for a different SVG and that should solve the problem. This approach worked successfully for me.

Hence, it seems that Nextjs only displays valid SVG files that can be rendered by the browser. It took me a few days to figure this out.

Answer №2

Encountered a similar issue myself. It turned out that the svg file was missing the necessary xmlns information. Once I added 

xmlns="http://www.w3.org/2000/svg"
, Nextjs was able to render the file correctly.

As stated in the MDN documentation:

The namespace declaration is specified through the xmlns attribute. This attribute indicates that the <svg> element and its descendants are part of the XML language identified by the namespace with the name http://www.w3.org/2000/svg, which in this case is SVG.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Restricting the webkit-overflow-scrolling functionality is essential

I am facing an issue with a div that needs horizontal scrolling. It works fine without using -webkit-overflow-scrolling, but on the iPhone, I don't get the native bouncing effect. The scrolling is only happening horizontally when it should also be pos ...

cssmobile-webkit

Next.js: Extracting the Value of an HTTP-only Cookie

While working on my web app with Next.js, I implemented authentication management using HTTP-only cookies. To set a cookie named token, I utilized the following code snippet with the help of an npm package known as cookie: res.setHeader( "Set-Coo ...

javascriptnode.jscookiesnext.jscookie-httponly

NextJS implementation causes Alibaba Cloud OSS to be denied by CORS policy restrictions

After using NextJS to upload an image file to Alibaba OSS from my local server at http://localhost:3000 to a bucket in Alibaba Cloud, I ensured that CORS was properly set up. However, the upload process is still not functioning correctly. How can I resolve ...

node.jsreactjsnext.jsalibaba-cloud-oss

What methods are available to test my website across different browsers such as outdated versions of Internet Explorer like IE8?

Currently, I am working on Chrome with Windows 7 OS installed. However, Windows 7 does not support Internet Explorer 8. This is causing issues when trying to view my web pages in the IE8 version and older. How can I resolve this problem? I have attempted ...

javascripthtmlcssuser-interface

The table is spilling over the edge of the parent container only in Firefox. This issue is not related to padding, margins

My table is causing an issue by overflowing the width of its container. It displays fine in Chrome, but Firefox is giving me trouble. If you'd like to see the site for yourself, it's available here: http://goo.gl/vkN5s I attempted using box-siz ...

cssfirefoxoverflowcss-tables

Respond to adjustments in iframe height

I am currently working on a page with an embedded iframe. The height of the iframe may change dynamically while on the page. I am wondering if there is a way to adjust the height of the iframe based on its content. Even after trying to set the height at ...

javascripthtmlcssiframe

The information is undefined, yet it is being recorded in the console

After retrieving data from the backend, it seems to be undefined when I try to use it. However, I can see the data logged in the console when using console.log. //I attempted to fetch data using axios but encountered a 404 error and received und ...

javascriptreactjsreact-reduxnext.jsredux-toolkit

What changes should I make to my code in order to incorporate an additional level of submenu to my CSS-based dropdown menu?

Hello and thank you for your help, I currently have some CSS code that is working well for 3 levels of dropdown menus, but I am now in need of it to also support a 4th level. When I try to add the extra level by copying the 3rd level code and making adjus ...

htmlcss

The Next.js router generates both query strings and arrays of query strings

I'm currently using Next.js for my project and I'm looking to create a dynamic query string. The code I have so far is: const createQuery = (filter) => { let currentPath = router.pathname; let filterSize = Object.keys(filter).length; fi ...

reactjsroutesnext.jsnext-router

Encountering a ERROR 500 while making an axios API Call in Next JS following deployment on Vercel

I am currently utilizing a basic API to send emails using axios and nodemailer within Next JS. Everything works perfectly fine locally, but after deploying to Vercel, I encounter Error 500 when attempting to send an email. This snippet is from the Form ...

deploymentnext.jsaxiosnodemailervercel

Creating a dynamic sitemap in Next.js using the sitemap package: A step-by-step guide

In my web application, I am using Next.js and Back4App. Recently, I came across the sitemap library to generate a sitemap for my website. However, I have encountered difficulties in creating a dynamic sitemap as I am unable to execute any API calls or clou ...

xmlnext.jssitemapparse-server

Navigate to a specific section of the page by scrolling when linked to an id

Just getting started with web development and using Bootstrap to build this site. I'm working on a single-page site where the top navbar directs users to specific IDs. The issue I'm facing is that I want the page to scroll to the ID when clicked ...

javascriptjqueryhtmlcsstwitter-bootstrap

Adjust the dimensions of input tag depending on the length of content in Angular

Is there a way to dynamically set the size of the input tag in my HTML based on the length of the ng-model value? I attempted this approach: <span>Node Path: <input for="nodeName" type="text" ng-model="nodePath" size="{{nodePath.length()}}"ng- ...

javascripthtmlcssangularjs

Styling Borders with CSS in Electron's WebView Component

Is there a way to add border radius to Electron's <webview> tag? If not, is there a list of supported styles available? HTML <body> <aside> </aside> <main> <webview id="view" src="h ...

htmlcsswebviewelectron

HTML - No alterations to Writing Mode

Hello everyone, I'm attempting to display a header vertically in my table but the writing-mode property is not having any effect. CSS .VerticalText { writing-mode: tb-rl; } HTML <td rowspan="6" id="tableHeader" class="Border"> <h1 cl ...

htmlcss

Exploring the functionality of dynamic routing in NextJS on the powerful infrastructure of

Using NextJS as a wrapper for my application has been quite helpful, especially with the dynamic routing feature it offers. However, I faced an issue when deploying to CloudFront - instead of rendering dns.com/path/page, CloudFront expected dns.com/path/pa ...

amazon-web-servicesnext.jsamazon-cloudfrontdynamic-routing

Determining the Presence of a Value in an Array using .includes

I've been facing challenges trying to use .includes with my array. My goal is to have a function that checks if a value already exists and removes it from the array if it does. The value is a string obtained from an object with a .name property. 0: { ...

javascriptarraysreactjsnext.js

Maximizing Bootstrap's Potential: Achieving Right Alignment for Divs

I am facing a challenge with aligning my div in the layout_cshtml. Currently, it is aligned to the left and the search bar and dropdownlist are not displaying properly. This negatively impacts the user experience. Additionally, my navigation menu is not ...

htmlcssasp.net-mvcbootstrap-4

Is there a way to retrieve the modal's viewport height in Angular?

Is it possible to determine the viewport height of my ng bootstrap modal within my Angular application? Here is what I currently have: I have a modal with CSS styling as shown below: .modal-xxl { width: 95% !important; max-height: 90% !important; ...

htmlcssangulartypescriptng-zorro-antd

Activate the div when hovering over the span

Experiencing an issue with triggering a visible div while hovering over a span. Here is the code structure: <ul class="products"> <li> <a href="somelink"> <img src="some image"> <div class="overlay"> Some Text</div> & ...

javascriptcsswordpress