Hello community!
I’m facing a problem of SVG icon not showing on the Netlify build but showing properly on local build.
This icon is from bootstrap-5.0.1 navigation bar, only happened after upgrading the bootstrap package from 5.0.0-beta2 to 5.0.1. I know it’s maybe not a Netlify issue, it also happened using gatsby build, but I think I might get some ideas in this forum.
I presume there is something wrong with the SVG, because the local and production builds show different SVG url (same bootstrap module) when inspecting the website.
Here’s what local build shows: (icon shows properly)
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
Here’s what production build shows: (icon is not showing)
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(0, 0, 0, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")
I’m very new to coding so these are all the clues I can find. Any helps or tips would be appreciated!
Cheers,
Hi @cheng-en-yang
Welcome to the Netlify community
I believe the issue is in the charset=utf-8 in the send one.
Using URL-encoder for SVG to decode the data returns a blank preview on the second (production) version, but when the charset=utf-8 is removed from the string, the image shows the same as the first version.
1 Like
Hello @coelmay,
thanks for the reply! Now I understand what’s wrong with the svg code. But how can I move on to solve this issue? This is a Bootstrap component that returns this svg string in css, so I’m not able to edit it. Even though I try to overwrite “background-image” property in my local css file (using the svg code without charset=utf-8), the production build still shows the wrong one. I’m sure the style has been over-written cause it has “!important” I wrote in the local css file. Shall I contact Bootstrap for help? Thank you so much!
Can you share a snippet of the code/CSS? What/where is this transformation taking place in your build? Are you using the NPM module?
Hello @coelmay
I’m using npm module bootstrap-5.0.1
This is the snippet I took from bootstrap navbar component and use it in my React front-end
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
The bootstrap css file will give “navbar-toggler-icon” a style of backgroun-image in local build, which shows the icon properly
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
But at production build the bootstrap css gives a different style
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(0, 0, 0, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")
I did nothing other than using Bootstrap’s default component. Really have no idea why it can have different svg code between production and develop build
Are these information enough? Thanks a lot!
Apologies @cheng-en-yang getting bootstrap to run is proving somewhat troublesome. 
It is possible someone else might have something more to offer in terms of possible solutions (though you are correct in this is not likely a Netlify issue.)
In the meantime, you might do well to reach out to Bootstrap through their social channels.
1 Like
Thank you so much spending time on this @coelmay !
I’m now trying to find some help from the bootstrap community.
Cheers,
2 Likes
@cheng-en-yang, if you are able to resolve this with the bootstrap community, don’t hesitate to come back and share your solution. Good luck!
1 Like
I have almost the same issue.
I am using Gatsby and react-bootstrap styled with Sass and my own CSS using a .scss file. I installed the react-bootstrap plugin via npm. I am using the Navbar and Navbar.Collapse components from react-bootstrap in my project. The icon that shows up when the Navbar collapses displays in development, however the icon doesn’t show up in production. I am also using Netlify. Netlify is using the public folder and the gatsby build command.
It’s worth noting that the functionality for the Navbar.Collapse works fine. if you can figure out where the icon should be, you can click on that area and the Navbar will expand.
So I concluded that somewhere in my project, there is an icon for the Navbar.Collapse, but somehow it isn’t being pushed to Github or isn’t being included in the Netlify build process so I’m trying to understand why.
Are you able to provide your site URL @kirillm ?
@coelmay I deleted the site because I didn’t want this issue to show up in production. However if you need it for troubleshooting I might be able to add it back. Would you like me to deploy it again?
EDIT: I may be able to create a separate test site that I will be more comfortable with providing. Working on this now…
Hard to try to diagnose an issue when you can’t see/replicate it.
@kirillm I finally found a workaround solution that might also work in your case.
Have a look here 
@coelmay Yes I totally understand. Thank you so much for your quick response time. I created a test site which duplicates almost everything from my original.
http://www.whitemastiff.com/
So your data:image/svg looks like this:
url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E);
…which when decoded looks like…
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'>
<path stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round'
stroke-miterlimit='10' stroke-width='2'
d='M4 7h22M4 15h22M4 23h22'/>
</svg>')'
stroke-linecap='round' stroke-miterlimit='10'
stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/>
</svg>
What it should look like is
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
…which decoded looks like…
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'>
<path stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round'
stroke-miterlimit='10'
stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/>
</svg>
@coelmay Thank you for your reply. I was looking at @cheng-en-yang link to the issue on Gatsby’s github. Apparently this issue was fixed in Gatsby 3.8.1. Am I correct in saying that Netlify will take whats on my Github repository and build it on their servers using their version of Gatsby? If so, what version of Gatsby is Netlify using?
Exactly.
No. Using whichever version of Gatsby is specified in your package.json
@coelmay Good to know. I solved my problem by updating the value for the “gatsby” attribute under “dependencies”. Previously, the value was less than version 3.8.1, so changing it resolved the issue. Thank you.
2 Likes
Hey there @kirillm 
Thanks for coming back and sharing your solution with the Forums! This will be beneficial to future Forums members who encounter something similar.
1 Like