Netlify SVG in background-image different than local

Support
1

netlify site: beckliao.com

For some reason, the background-image SVG animation on hover I committed is different than what Netlify deployed. The animation portion of the SVG is eliminated.
ORIGINAL
data:image/svg+xml,%3Csvg width=‘25’ height=‘5’ viewBox=‘0 0 20 4’ fill=‘none’ xmlns=‘SVG namespace’%3E%3Cstyle type=‘text/css’%3E.squiggle{animation:shift 0.6s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath class=‘squiggle’ d=‘M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3’ stroke-width=‘2.5’ stroke=‘black’/%3E%3C/svg%3E%0A

NETLIFY
“data:image/svg+xml;charset=utf-8,%3Csvg width=‘25’ height=‘5’ viewBox=‘0 0 20 4’ fill=‘none’ xmlns=‘SVG namespace’%3E%3Cstyle%3E%3C/style%3E%3Cpath d=‘M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3’ stroke-width=‘2.5’ stroke=‘%23000’ style=‘animation:shift .6s linear infinite’/%3E%3C/svg%3E”

Can anyone explain - is this some optimization? How do I prevent Netlify from changing the url() of the background-image here?

2

@xiaoj1e Is there a public repository for this site?

3

Yes- beck-site/src/styles.css at main · xiaoj1e/beck-site · GitHub

4

@xiaoj1e Thanks for supplying the repository link, it has let me confirm my suspicion of what’s occurring.

Netlify does not directly deploy “what you commit”, it retrieves your repository, executes the build command you’ve configured, then deploys the publish directory you have set.

It is not an optimization.
It is simply what your build produces.
You can confirm this by running your npm run build command locally.
Once done, open and look in the file it has created, e.g. build/static/css/main.878d92d1.css
You’ll find that it’s missing the animation.

You don’t need to prevent Netlify from changing it, as Netlify isn’t changing it.

You should debug your build locally, investigating why your build command does not produce the output that you want.

I’d imagine you’ll find it’s related to your browserslist configuration in your package.json, and the fact that you have different targets for development than production: