SVG in css files are broken (only in build mode)

[javialon26]

Description

SVG files referenced in scss files are broken in build mode. In development mode, I can see all files without problems. This affects bootstrap icons too.

Related issues:
#31619
#15629

In my scss file I have:

background-image: url('../images/site-core/icons/arrow-prev-icon.svg')

This compiles to:

background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgOS40ODcgNi4zMjgiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0zLjQzNy4xMjFhLjQzMS40MzEgMCAwIDEgMCAuNjA2bC0yIDIuMDA3aDcuNjIyYS40MjguNDI4IDAgMCAxIDAgLjg1N0gxLjQ0bDIgMi4wMDdhLjQzNC40MzQgMCAwIDEgMCAuNjA2LjQyNy40MjcgMCAwIDEtLjYgMEwuMTE4IDMuNDY2YS40ODEuNDgxIDAgMCAxLS4wODktLjEzNS40MDkuNDA5IDAgMCAxLS4wMzMtLjE2NS40My40MyAwIDAgMSAuMTIyLS4zTDIuODMzLjEzMWEuNDIuNDIgMCAwIDEgLjYwNC0uMDF6IiBkYXRhLW5hbWU9Ikljb24gaW9uaWMtaW9zLWFycm93LXJvdW5kLWJhY2siLz48L3N2Zz4=);

This is the original SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="9.487" height="6.328" viewBox="0 0 9.487 6.328"><path id="Icon_ionic-ios-arrow-round-back" data-name="Icon ionic-ios-arrow-round-back" d="M13.932,11.373a.431.431,0,0,0,0,.606l2,2.007H8.307a.428.428,0,0,0,0,.857h7.622l-2,2.007a.434.434,0,0,0,0,.606.427.427,0,0,0,.6,0l2.715-2.735h0a.481.481,0,0,0,.089-.135.409.409,0,0,0,.033-.165.43.43,0,0,0-.122-.3l-2.715-2.735A.42.42,0,0,0,13.932,11.373Z" transform="translate(-7.882 -11.252)" fill="#fff"/></svg>

Steps to reproduce

Repository with gatsby plugin sass and an icon in index.js page.

https://github.com/MedicalWebExperts/gatsby-bug

Expected result

All SVG files should be fine in build mode.

Actual result

The SVG files are broken in build mode.

Environment

System:
OS: macOS 11.3.1
CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.17.0 - /usr/local/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.13 - /usr/local/bin/npm
Languages:
Python: 3.9.1 - /Users/javier/.pyenv/shims/python
Browsers:
Chrome: 91.0.4472.77
Safari: 14.1
npmPackages:
gatsby: ^3.7.1 => 3.7.1
gatsby-plugin-gatsby-cloud: ^2.7.1 => 2.7.1
gatsby-plugin-image: ^1.7.1 => 1.7.1
gatsby-plugin-manifest: ^3.7.1 => 3.7.1
gatsby-plugin-offline: ^4.7.1 => 4.7.1
gatsby-plugin-react-helmet: ^4.7.1 => 4.7.1
gatsby-plugin-sass: ^4.7.1 => 4.7.1
gatsby-plugin-sharp: ^3.7.1 => 3.7.1
gatsby-source-filesystem: ^3.7.1 => 3.7.1
gatsby-transformer-sharp: ^3.7.1 => 3.7.1
npmGlobalPackages:
gatsby-cli: 2.12.113

[xavdid]

I'm seeing the same thing when I tried upgrading my site from gatsby@2 to gatsby@3 today. the branch with the changes is here: https://github.com/xavdid/website/tree/gatsby-v3 Works fine during gatsby develop, doesn't work during gatsby build.

The line where I reference the svg is here.

`gatsby develop` output

data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB2aWV3Qm94PSIwIDAgMzA0IDMwNCIKICB3aWR0aD0iMzA0IgogIGhlaWdodD0iMzA0Igo+CiAgPHBhdGgKICAgIGZpbGw9IiMyMzIzMjMiCiAgICBmaWxsLW9wYWNpdHk9IjAuNSIKICAgIGQ9Ik00NC4xIDIyNGE1IDUgMCAxIDEgMCAySDB2LTJoNDQuMXptMTYwIDQ4YTUgNSAwIDEgMSAwIDJIODJ2LTJoMTIyLjF6bTU3LjgtNDZhNSA1IDAgMSAxIDAtMkgzMDR2MmgtNDIuMXptMCAxNmE1IDUgMCAxIDEgMC0ySDMwNHYyaC00Mi4xem02LjItMTE0YTUgNSAwIDEgMSAwIDJoLTg2LjJhNSA1IDAgMSAxIDAtMmg4Ni4yem0tMjU2LTQ4YTUgNSAwIDEgMSAwIDJIMHYtMmgxMi4xem0xODUuOCAzNGE1IDUgMCAxIDEgMC0yaDg2LjJhNSA1IDAgMSAxIDAgMmgtODYuMnpNMjU4IDEyLjFhNSA1IDAgMSAxLTIgMFYwaDJ2MTIuMXptLTY0IDIwOGE1IDUgMCAxIDEtMiAwdi01NC4yYTUgNSAwIDEgMSAyIDB2NTQuMnptNDgtMTk4LjJWODBoNjJ2MmgtNjRWMjEuOWE1IDUgMCAxIDEgMiAwem0xNiAxNlY2NGg0NnYyaC00OFYzNy45YTUgNSAwIDEgMSAyIDB6bS0xMjggOTZWMjA4aDE2djEyLjFhNSA1IDAgMSAxLTIgMFYyMTBoLTE2di03Ni4xYTUgNSAwIDEgMSAyIDB6bS01LjktMjEuOWE1IDUgMCAxIDEgMCAySDExNHY0OEg4NS45YTUgNSAwIDEgMSAwLTJIMTEydi00OGgxMi4xem0tNi4yIDEzMGE1IDUgMCAxIDEgMC0ySDE3NnYtNzQuMWE1IDUgMCAxIDEgMiAwVjI0MmgtNjAuMXptLTE2LTY0YTUgNSAwIDEgMSAwLTJIMTE0djQ4aDEwLjFhNSA1IDAgMSAxIDAgMkgxMTJ2LTQ4aC0xMC4xek02NiAyODQuMWE1IDUgMCAxIDEtMiAwVjI3NEg1MHYzMGgtMnYtMzJoMTh2MTIuMXpNMjM2LjEgMTc2YTUgNSAwIDEgMSAwIDJIMjI2djk0aDQ4djMyaC0ydi0zMGgtNDh2LTk4aDEyLjF6bTI1LjgtMzBhNSA1IDAgMSAxIDAtMkgyNzR2NDQuMWE1IDUgMCAxIDEtMiAwVjE0NmgtMTAuMXptLTY0IDk2YTUgNSAwIDEgMSAwLTJIMjA4di04MGgxNnYtMTRoLTQyLjFhNSA1IDAgMSAxIDAtMkgyMjZ2MThoLTE2djgwaC0xMi4xem04Ni4yLTIxMGE1IDUgMCAxIDEgMCAySDI3MlYwaDJ2MzJoMTAuMXpNOTggMTAxLjlWMTQ2SDUzLjlhNSA1IDAgMSAxIDAtMkg5NnYtNDIuMWE1IDUgMCAxIDEgMiAwek01My45IDM0YTUgNSAwIDEgMSAwLTJIODBWMGgydjM0SDUzLjl6bTYwLjEgMy45VjY2SDgydjY0SDY5LjlhNSA1IDAgMSAxIDAtMkg4MFY2NGgzMlYzNy45YTUgNSAwIDEgMSAyIDB6TTEwMS45IDgyYTUgNSAwIDEgMSAwLTJIMTI4VjM3LjlhNSA1IDAgMSAxIDIgMFY4MmgtMjguMXptMTYtNjRhNSA1IDAgMSAxIDAtMkgxNDZ2NDQuMWE1IDUgMCAxIDEtMiAwVjE4aC0yNi4xem0xMDIuMiAyNzBhNSA1IDAgMSAxIDAgMkg5OHYxNGgtMnYtMTZoMTI0LjF6TTI0MiAxNDkuOVYxNjBoMTZ2MzRoLTE2djYyaDQ4djQ4aC0ydi00NmgtNDh2LTY2aDE2di0zMGgtMTZ2LTEyLjFhNSA1IDAgMSAxIDIgMHpNNTMuOSAxOGE1IDUgMCAxIDEgMC0ySDY0VjJINDhWMGgxOHYxOEg1My45em0xMTIgMzJhNSA1IDAgMSAxIDAtMkgxOTJWMGg1MHYyaC00OHY0OGgtMjguMXptLTQ4LTQ4YTUgNSAwIDAgMS05LjgtMmgyLjA3YTMgMyAwIDEgMCA1LjY2IDBIMTc4djM0aC0xOFYyMS45YTUgNSAwIDEgMSAyIDBWMzJoMTRWMmgtNTguMXptMCA5NmE1IDUgMCAxIDEgMC0ySDEzN2wzMi0zMmgzOVYyMS45YTUgNSAwIDEgMSAyIDBWNjZoLTQwLjE3bC0zMiAzMkgxMTcuOXptMjguMSA5MC4xYTUgNSAwIDEgMS0yIDB2LTc2LjUxTDE3NS41OSA4MEgyMjRWMjEuOWE1IDUgMCAxIDEgMiAwVjgyaC00OS41OUwxNDYgMTEyLjQxdjc1LjY5em0xNiAzMmE1IDUgMCAxIDEtMiAwdi05OS41MUwxODQuNTkgOTZIMzAwLjFhNSA1IDAgMCAxIDMuOS0zLjl2Mi4wN2EzIDMgMCAwIDAgMCA1LjY2djIuMDdhNSA1IDAgMCAxLTMuOS0zLjlIMTg1LjQxTDE2MiAxMjEuNDF2OTguNjl6bS0xNDQtNjRhNSA1IDAgMSAxLTIgMHYtMy41MWw0OC00OFY0OGgzMlYwaDJ2NTBINjZ2NTUuNDFsLTQ4IDQ4djIuNjl6TTUwIDUzLjl2NDMuNTFsLTQ4IDQ4VjIwOGgyNi4xYTUgNSAwIDEgMSAwIDJIMHYtNjUuNDFsNDgtNDhWNTMuOWE1IDUgMCAxIDEgMiAwem0tMTYgMTZWODkuNDFsLTM0IDM0di0yLjgybDMyLTMyVjY5LjlhNSA1IDAgMSAxIDIgMHpNMTIuMSAzMmE1IDUgMCAxIDEgMCAySDkuNDFMMCA0My40MVY0MC42TDguNTkgMzJoMy41MXptMjY1LjggMThhNSA1IDAgMSAxIDAtMmgxOC42OWw3LjQxLTcuNDF2Mi44MkwyOTcuNDEgNTBIMjc3Ljl6bS0xNiAxNjBhNSA1IDAgMSAxIDAtMkgyODh2LTcxLjQxbDE2LTE2djIuODJsLTE0IDE0VjIxMGgtMjguMXptLTIwOCAzMmE1IDUgMCAxIDEgMC0ySDY0di0yMi41OUw0MC41OSAxOTRIMjEuOWE1IDUgMCAxIDEgMC0ySDQxLjQxTDY2IDIxNi41OVYyNDJINTMuOXptMTUwLjIgMTRhNSA1IDAgMSAxIDAgMkg5NnYtNTYuNkw1Ni42IDE2MkgzNy45YTUgNSAwIDEgMSAwLTJoMTkuNUw5OCAyMDAuNlYyNTZoMTA2LjF6bS0xNTAuMiAyYTUgNSAwIDEgMSAwLTJIODB2LTQ2LjU5TDQ4LjU5IDE3OEgyMS45YTUgNSAwIDEgMSAwLTJINDkuNDFMODIgMjA4LjU5VjI1OEg1My45ek0zNCAzOS44djEuNjFMOS40MSA2Nkgwdi0yaDguNTlMMzIgNDAuNTlWMGgydjM5Ljh6TTIgMzAwLjFhNSA1IDAgMCAxIDMuOSAzLjlIMy44M0EzIDMgMCAwIDAgMCAzMDIuMTdWMjU2aDE4djQ4aC0ydi00NkgydjQyLjF6TTM0IDI0MXY2M2gtMnYtNjJIMHYtMmgzNHYxek0xNyAxOEgwdi0yaDE2VjBoMnYxOGgtMXptMjczLTJoMTR2MmgtMTZWMGgydjE2em0tMzIgMjczdjE1aC0ydi0xNGgtMTR2MTRoLTJ2LTE2aDE4djF6TTAgOTIuMUE1LjAyIDUuMDIgMCAwIDEgNiA5N2E1IDUgMCAwIDEtNiA0Ljl2LTIuMDdhMyAzIDAgMSAwIDAtNS42NlY5Mi4xek04MCAyNzJoMnYzMmgtMnYtMzJ6bTM3LjkgMzJoLTIuMDdhMyAzIDAgMCAwLTUuNjYgMGgtMi4wN2E1IDUgMCAwIDEgOS44IDB6TTUuOSAwQTUuMDIgNS4wMiAwIDAgMSAwIDUuOVYzLjgzQTMgMyAwIDAgMCAzLjgzIDBINS45em0yOTQuMiAwaDIuMDdBMyAzIDAgMCAwIDMwNCAzLjgzVjUuOWE1IDUgMCAwIDEtMy45LTUuOXptMy45IDMwMC4xdjIuMDdhMyAzIDAgMCAwLTEuODMgMS44M2gtMi4wN2E1IDUgMCAwIDEgMy45LTMuOXpNOTcgMTAwYTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMC0xNmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTE2IDE2YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMTYgMTZhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0wIDE2YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptLTQ4IDMyYTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMTYgMTZhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0zMiA0OGEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bS0xNiAxNmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTMyLTE2YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMC0zMmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTE2IDMyYTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMzIgMTZhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0wLTE2YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptLTE2LTY0YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMTYgMGEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTE2IDk2YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMCAxNmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTE2IDE2YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMTYtMTQ0YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMCAzMmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTE2LTMyYTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMTYtMTZhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0tOTYgMGEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTAgMTZhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0xNi0zMmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTk2IDBhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0tMTYtNjRhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0xNi0xNmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bS0zMiAwYTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMC0xNmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bS0xNiAwYTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptLTE2IDBhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0tMTYgMGEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6TTQ5IDM2YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptLTMyIDBhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0zMiAxNmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6TTMzIDY4YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMTYtNDhhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0wIDI0MGEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTE2IDMyYTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptLTE2LTY0YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMCAxNmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bS0xNi0zMmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTgwLTE3NmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTE2IDBhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0tMTYtMTZhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0zMiA0OGEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTE2LTE2YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMC0zMmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTExMiAxNzZhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0tMTYgMTZhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0wIDE2YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMCAxNmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6TTE3IDE4MGEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTAgMTZhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0wLTMyYTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMTYgMGEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6TTE3IDg0YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMzIgNjRhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0xNi0xNmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6IgogID48L3BhdGg+Cjwvc3ZnPgo=

`gatsby build` output

data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzA0IDMwNCI+PHBhdGggZmlsbD0iIzIzMjMyMyIgZmlsbC1vcGFjaXR5PSIuNSIgZD0iTTQ0LjEgMjI0YTUgNSAwIDEgMSAwIDJIMHYtMmg0NC4xem0xNjAgNDhhNSA1IDAgMSAxIDAgMkg4MnYtMmgxMjIuMXptNTcuOC00NmE1IDUgMCAxIDEgMC0ySDMwNHYyaC00Mi4xem0wIDE2YTUgNSAwIDEgMSAwLTJIMzA0djJoLTQyLjF6bTYuMi0xMTRhNSA1IDAgMSAxIDAgMmgtODYuMmE1IDUgMCAxIDEgMC0yaDg2LjJ6bS0yNTYtNDhhNSA1IDAgMSAxIDAgMkgwdi0yaDEyLjF6bTE4NS44IDM0YTUgNSAwIDEgMSAwLTJoODYuMmE1IDUgMCAxIDEgMCAyaC04Ni4yek0yNTggMTIuMWE1IDUgMCAxIDEtMiAwVjBoMnYxMi4xem0tNjQgMjA4YTUgNSAwIDEgMS0yIDB2LTU0LjJhNSA1IDAgMSAxIDIgMHY1NC4yem00OC0xOTguMlY4MGg2MnYyaC02NFYyMS45YTUgNSAwIDEgMSAyIDB6bTE2IDE2VjY0aDQ2djJoLTQ4VjM3LjlhNSA1IDAgMSAxIDIgMHptLTEyOCA5NlYyMDhoMTZ2MTIuMWE1IDUgMCAxIDEtMiAwVjIxMGgtMTZ2LTc2LjFhNSA1IDAgMSAxIDIgMHptLTUuOS0yMS45YTUgNSAwIDEgMSAwIDJIMTE0djQ4SDg1LjlhNSA1IDAgMSAxIDAtMkgxMTJ2LTQ4aDEyLjF6bS02LjIgMTMwYTUgNSAwIDEgMSAwLTJIMTc2di03NC4xYTUgNSAwIDEgMSAyIDBWMjQyaC02MC4xem0tMTYtNjRhNSA1IDAgMSAxIDAtMkgxMTR2NDhoMTAuMWE1IDUgMCAxIDEgMCAySDExMnYtNDhoLTEwLjF6TTY2IDI4NC4xYTUgNSAwIDEgMS0yIDBWMjc0SDUwdjMwaC0ydi0zMmgxOHYxMi4xek0yMzYuMSAxNzZhNSA1IDAgMSAxIDAgMkgyMjZ2OTRoNDh2MzJoLTJ2LTMwaC00OHYtOThoMTIuMXptMjUuOC0zMGE1IDUgMCAxIDEgMC0ySDI3NHY0NC4xYTUgNSAwIDEgMS0yIDBWMTQ2aC0xMC4xem0tNjQgOTZhNSA1IDAgMSAxIDAtMkgyMDh2LTgwaDE2di0xNGgtNDIuMWE1IDUgMCAxIDEgMC0ySDIyNnYxOGgtMTZ2ODBoLTEyLjF6bTg2LjItMjEwYTUgNSAwIDEgMSAwIDJIMjcyVjBoMnYzMmgxMC4xek05OCAxMDEuOVYxNDZINTMuOWE1IDUgMCAxIDEgMC0ySDk2di00Mi4xYTUgNSAwIDEgMSAyIDB6TTUzLjkgMzRhNSA1IDAgMSAxIDAtMkg4MFYwaDJ2MzRINTMuOXptNjAuMSAzLjlWNjZIODJ2NjRINjkuOWE1IDUgMCAxIDEgMC0ySDgwVjY0aDMyVjM3LjlhNSA1IDAgMSAxIDIgMHpNMTAxLjkgODJhNSA1IDAgMSAxIDAtMkgxMjhWMzcuOWE1IDUgMCAxIDEgMiAwVjgyaC0yOC4xem0xNi02NGE1IDUgMCAxIDEgMC0ySDE0NnY0NC4xYTUgNSAwIDEgMS0yIDBWMThoLTI2LjF6bTEwMi4yIDI3MGE1IDUgMCAxIDEgMCAySDk4djE0aC0ydi0xNmgxMjQuMXpNMjQyIDE0OS45VjE2MGgxNnYzNGgtMTZ2NjJoNDh2NDhoLTJ2LTQ2aC00OHYtNjZoMTZ2LTMwaC0xNnYtMTIuMWE1IDUgMCAxIDEgMiAwek01My45IDE4YTUgNSAwIDEgMSAwLTJINjRWMkg0OFYwaDE4djE4SDUzLjl6bTExMiAzMmE1IDUgMCAxIDEgMC0ySDE5MlYwaDUwdjJoLTQ4djQ4aC0yOC4xem0tNDgtNDhhNSA1IDAgMCAxLTkuOC0yaDIuMDdhMyAzIDAgMSAwIDUuNjYgMEgxNzh2MzRoLTE4VjIxLjlhNSA1IDAgMSAxIDIgMFYzMmgxNFYyaC01OC4xem0wIDk2YTUgNSAwIDEgMSAwLTJIMTM3bDMyLTMyaDM5VjIxLjlhNSA1IDAgMSAxIDIgMFY2NmgtNDAuMTdsLTMyIDMySDExNy45em0yOC4xIDkwLjFhNSA1IDAgMSAxLTIgMHYtNzYuNTFMMTc1LjU5IDgwSDIyNFYyMS45YTUgNSAwIDEgMSAyIDBWODJoLTQ5LjU5TDE0NiAxMTIuNDF2NzUuNjl6bTE2IDMyYTUgNSAwIDEgMS0yIDB2LTk5LjUxTDE4NC41OSA5NkgzMDAuMWE1IDUgMCAwIDEgMy45LTMuOXYyLjA3YTMgMyAwIDAgMCAwIDUuNjZ2Mi4wN2E1IDUgMCAwIDEtMy45LTMuOUgxODUuNDFMMTYyIDEyMS40MXY5OC42OXptLTE0NC02NGE1IDUgMCAxIDEtMiAwdi0zLjUxbDQ4LTQ4VjQ4aDMyVjBoMnY1MEg2NnY1NS40MWwtNDggNDh2Mi42OXpNNTAgNTMuOXY0My41MWwtNDggNDhWMjA4aDI2LjFhNSA1IDAgMSAxIDAgMkgwdi02NS40MWw0OC00OFY1My45YTUgNSAwIDEgMSAyIDB6bS0xNiAxNnYxOS41MWwtMzQgMzR2LTIuODJsMzItMzJWNjkuOWE1IDUgMCAxIDEgMiAwek0xMi4xIDMyYTUgNSAwIDEgMSAwIDJIOS40MUwwIDQzLjQxVjQwLjZMOC41OSAzMmgzLjUxem0yNjUuOCAxOGE1IDUgMCAxIDEgMC0yaDE4LjY5bDcuNDEtNy40MXYyLjgyTDI5Ny40MSA1MEgyNzcuOXptLTE2IDE2MGE1IDUgMCAxIDEgMC0ySDI4OHYtNzEuNDFsMTYtMTZ2Mi44MmwtMTQgMTRWMjEwaC0yOC4xem0tMjA4IDMyYTUgNSAwIDEgMSAwLTJINjR2LTIyLjU5TDQwLjU5IDE5NEgyMS45YTUgNSAwIDEgMSAwLTJoMTkuNTFMNjYgMjE2LjU5VjI0Mkg1My45em0xNTAuMiAxNGE1IDUgMCAxIDEgMCAySDk2di01Ni42TDU2LjYgMTYySDM3LjlhNSA1IDAgMSAxIDAtMmgxOS41TDk4IDIwMC42VjI1NmgxMDYuMXptLTE1MC4yIDJhNSA1IDAgMSAxIDAtMkg4MHYtNDYuNTlMNDguNTkgMTc4SDIxLjlhNSA1IDAgMSAxIDAtMmgyNy41MUw4MiAyMDguNTlWMjU4SDUzLjl6TTM0IDM5Ljh2MS42MUw5LjQxIDY2SDB2LTJoOC41OUwzMiA0MC41OVYwaDJ2MzkuOHpNMiAzMDAuMWE1IDUgMCAwIDEgMy45IDMuOUgzLjgzQTMgMyAwIDAgMCAwIDMwMi4xN1YyNTZoMTh2NDhoLTJ2LTQ2SDJ2NDIuMXpNMzQgMjQxdjYzaC0ydi02Mkgwdi0yaDM0djF6TTE3IDE4SDB2LTJoMTZWMGgydjE4aC0xem0yNzMtMmgxNHYyaC0xNlYwaDJ2MTZ6bS0zMiAyNzN2MTVoLTJ2LTE0aC0xNHYxNGgtMnYtMTZoMTh2MXpNMCA5Mi4xQTUuMDIgNS4wMiAwIDAgMSA2IDk3YTUgNSAwIDAgMS02IDQuOXYtMi4wN2EzIDMgMCAxIDAgMC01LjY2VjkyLjF6TTgwIDI3MmgydjMyaC0ydi0zMnptMzcuOSAzMmgtMi4wN2EzIDMgMCAwIDAtNS42NiAwaC0yLjA3YTUgNSAwIDAgMSA5LjggMHpNNS45IDBBNS4wMiA1LjAyIDAgMCAxIDAgNS45VjMuODNBMyAzIDAgMCAwIDMuODMgMEg1Ljl6bTI5NC4yIDBoMi4wN0EzIDMgMCAwIDAgMzA0IDMuODNWNS45YTUgNSAwIDAgMS0zLjktNS45em0zLjkgMzAwLjF2Mi4wN2EzIDMgMCAwIDAtMS44MyAxLjgzaC0yLjA3YTUgNSAwIDAgMSAzLjktMy45ek05NyAxMDBhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0wLTE2YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMTYgMTZhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0xNiAxNmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTAgMTZhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0tNDggMzJhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0xNiAxNmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTMyIDQ4YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptLTE2IDE2YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMzItMTZhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0wLTMyYTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMTYgMzJhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0zMiAxNmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTAtMTZhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0tMTYtNjRhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0xNiAwYTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMTYgOTZhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0wIDE2YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMTYgMTZhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0xNi0xNDRhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0wIDMyYTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMTYtMzJhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0xNi0xNmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bS05NiAwYTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMCAxNmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTE2LTMyYTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptOTYgMGEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bS0xNi02NGEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTE2LTE2YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptLTMyIDBhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0wLTE2YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptLTE2IDBhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0tMTYgMGEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bS0xNiAwYTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnpNNDkgMzZhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0tMzIgMGEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTMyIDE2YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnpNMzMgNjhhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0xNi00OGEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTAgMjQwYTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMTYgMzJhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0tMTYtNjRhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0wIDE2YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptLTE2LTMyYTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptODAtMTc2YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMTYgMGEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bS0xNi0xNmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTMyIDQ4YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMTYtMTZhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0wLTMyYTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMTEyIDE3NmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bS0xNiAxNmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTAgMTZhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0wIDE2YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnpNMTcgMTgwYTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMCAxNmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTAtMzJhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0xNiAwYTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnpNMTcgODRhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0zMiA2NGEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTE2LTE2YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnoiLz48L3N2Zz4=

gatsby@2 output, live on my site (https://xavd.id, a style on the `body`)

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDQgMzA0IiB3aWR0aD0iMzA0IiBoZWlnaHQ9IjMwNCI+PHBhdGggZmlsbD0iIzIzMjMyMyIgZmlsbC1vcGFjaXR5PSIwLjUiIGQ9Ik00NC4xIDIyNGE1IDUgMCAxIDEgMCAySDB2LTJoNDQuMXptMTYwIDQ4YTUgNSAwIDEgMSAwIDJIODJ2LTJoMTIyLjF6bTU3LjgtNDZhNSA1IDAgMSAxIDAtMkgzMDR2MmgtNDIuMXptMCAxNmE1IDUgMCAxIDEgMC0ySDMwNHYyaC00Mi4xem02LjItMTE0YTUgNSAwIDEgMSAwIDJoLTg2LjJhNSA1IDAgMSAxIDAtMmg4Ni4yem0tMjU2LTQ4YTUgNSAwIDEgMSAwIDJIMHYtMmgxMi4xem0xODUuOCAzNGE1IDUgMCAxIDEgMC0yaDg2LjJhNSA1IDAgMSAxIDAgMmgtODYuMnpNMjU4IDEyLjFhNSA1IDAgMSAxLTIgMFYwaDJ2MTIuMXptLTY0IDIwOGE1IDUgMCAxIDEtMiAwdi01NC4yYTUgNSAwIDEgMSAyIDB2NTQuMnptNDgtMTk4LjJWODBoNjJ2MmgtNjRWMjEuOWE1IDUgMCAxIDEgMiAwem0xNiAxNlY2NGg0NnYyaC00OFYzNy45YTUgNSAwIDEgMSAyIDB6bS0xMjggOTZWMjA4aDE2djEyLjFhNSA1IDAgMSAxLTIgMFYyMTBoLTE2di03Ni4xYTUgNSAwIDEgMSAyIDB6bS01LjktMjEuOWE1IDUgMCAxIDEgMCAySDExNHY0OEg4NS45YTUgNSAwIDEgMSAwLTJIMTEydi00OGgxMi4xem0tNi4yIDEzMGE1IDUgMCAxIDEgMC0ySDE3NnYtNzQuMWE1IDUgMCAxIDEgMiAwVjI0MmgtNjAuMXptLTE2LTY0YTUgNSAwIDEgMSAwLTJIMTE0djQ4aDEwLjFhNSA1IDAgMSAxIDAgMkgxMTJ2LTQ4aC0xMC4xek02NiAyODQuMWE1IDUgMCAxIDEtMiAwVjI3NEg1MHYzMGgtMnYtMzJoMTh2MTIuMXpNMjM2LjEgMTc2YTUgNSAwIDEgMSAwIDJIMjI2djk0aDQ4djMyaC0ydi0zMGgtNDh2LTk4aDEyLjF6bTI1LjgtMzBhNSA1IDAgMSAxIDAtMkgyNzR2NDQuMWE1IDUgMCAxIDEtMiAwVjE0NmgtMTAuMXptLTY0IDk2YTUgNSAwIDEgMSAwLTJIMjA4di04MGgxNnYtMTRoLTQyLjFhNSA1IDAgMSAxIDAtMkgyMjZ2MThoLTE2djgwaC0xMi4xem04Ni4yLTIxMGE1IDUgMCAxIDEgMCAySDI3MlYwaDJ2MzJoMTAuMXpNOTggMTAxLjlWMTQ2SDUzLjlhNSA1IDAgMSAxIDAtMkg5NnYtNDIuMWE1IDUgMCAxIDEgMiAwek01My45IDM0YTUgNSAwIDEgMSAwLTJIODBWMGgydjM0SDUzLjl6bTYwLjEgMy45VjY2SDgydjY0SDY5LjlhNSA1IDAgMSAxIDAtMkg4MFY2NGgzMlYzNy45YTUgNSAwIDEgMSAyIDB6TTEwMS45IDgyYTUgNSAwIDEgMSAwLTJIMTI4VjM3LjlhNSA1IDAgMSAxIDIgMFY4MmgtMjguMXptMTYtNjRhNSA1IDAgMSAxIDAtMkgxNDZ2NDQuMWE1IDUgMCAxIDEtMiAwVjE4aC0yNi4xem0xMDIuMiAyNzBhNSA1IDAgMSAxIDAgMkg5OHYxNGgtMnYtMTZoMTI0LjF6TTI0MiAxNDkuOVYxNjBoMTZ2MzRoLTE2djYyaDQ4djQ4aC0ydi00NmgtNDh2LTY2aDE2di0zMGgtMTZ2LTEyLjFhNSA1IDAgMSAxIDIgMHpNNTMuOSAxOGE1IDUgMCAxIDEgMC0ySDY0VjJINDhWMGgxOHYxOEg1My45em0xMTIgMzJhNSA1IDAgMSAxIDAtMkgxOTJWMGg1MHYyaC00OHY0OGgtMjguMXptLTQ4LTQ4YTUgNSAwIDAgMS05LjgtMmgyLjA3YTMgMyAwIDEgMCA1LjY2IDBIMTc4djM0aC0xOFYyMS45YTUgNSAwIDEgMSAyIDBWMzJoMTRWMmgtNTguMXptMCA5NmE1IDUgMCAxIDEgMC0ySDEzN2wzMi0zMmgzOVYyMS45YTUgNSAwIDEgMSAyIDBWNjZoLTQwLjE3bC0zMiAzMkgxMTcuOXptMjguMSA5MC4xYTUgNSAwIDEgMS0yIDB2LTc2LjUxTDE3NS41OSA4MEgyMjRWMjEuOWE1IDUgMCAxIDEgMiAwVjgyaC00OS41OUwxNDYgMTEyLjQxdjc1LjY5em0xNiAzMmE1IDUgMCAxIDEtMiAwdi05OS41MUwxODQuNTkgOTZIMzAwLjFhNSA1IDAgMCAxIDMuOS0zLjl2Mi4wN2EzIDMgMCAwIDAgMCA1LjY2djIuMDdhNSA1IDAgMCAxLTMuOS0zLjlIMTg1LjQxTDE2MiAxMjEuNDF2OTguNjl6bS0xNDQtNjRhNSA1IDAgMSAxLTIgMHYtMy41MWw0OC00OFY0OGgzMlYwaDJ2NTBINjZ2NTUuNDFsLTQ4IDQ4djIuNjl6TTUwIDUzLjl2NDMuNTFsLTQ4IDQ4VjIwOGgyNi4xYTUgNSAwIDEgMSAwIDJIMHYtNjUuNDFsNDgtNDhWNTMuOWE1IDUgMCAxIDEgMiAwem0tMTYgMTZWODkuNDFsLTM0IDM0di0yLjgybDMyLTMyVjY5LjlhNSA1IDAgMSAxIDIgMHpNMTIuMSAzMmE1IDUgMCAxIDEgMCAySDkuNDFMMCA0My40MVY0MC42TDguNTkgMzJoMy41MXptMjY1LjggMThhNSA1IDAgMSAxIDAtMmgxOC42OWw3LjQxLTcuNDF2Mi44MkwyOTcuNDEgNTBIMjc3Ljl6bS0xNiAxNjBhNSA1IDAgMSAxIDAtMkgyODh2LTcxLjQxbDE2LTE2djIuODJsLTE0IDE0VjIxMGgtMjguMXptLTIwOCAzMmE1IDUgMCAxIDEgMC0ySDY0di0yMi41OUw0MC41OSAxOTRIMjEuOWE1IDUgMCAxIDEgMC0ySDQxLjQxTDY2IDIxNi41OVYyNDJINTMuOXptMTUwLjIgMTRhNSA1IDAgMSAxIDAgMkg5NnYtNTYuNkw1Ni42IDE2MkgzNy45YTUgNSAwIDEgMSAwLTJoMTkuNUw5OCAyMDAuNlYyNTZoMTA2LjF6bS0xNTAuMiAyYTUgNSAwIDEgMSAwLTJIODB2LTQ2LjU5TDQ4LjU5IDE3OEgyMS45YTUgNSAwIDEgMSAwLTJINDkuNDFMODIgMjA4LjU5VjI1OEg1My45ek0zNCAzOS44djEuNjFMOS40MSA2Nkgwdi0yaDguNTlMMzIgNDAuNTlWMGgydjM5Ljh6TTIgMzAwLjFhNSA1IDAgMCAxIDMuOSAzLjlIMy44M0EzIDMgMCAwIDAgMCAzMDIuMTdWMjU2aDE4djQ4aC0ydi00NkgydjQyLjF6TTM0IDI0MXY2M2gtMnYtNjJIMHYtMmgzNHYxek0xNyAxOEgwdi0yaDE2VjBoMnYxOGgtMXptMjczLTJoMTR2MmgtMTZWMGgydjE2em0tMzIgMjczdjE1aC0ydi0xNGgtMTR2MTRoLTJ2LTE2aDE4djF6TTAgOTIuMUE1LjAyIDUuMDIgMCAwIDEgNiA5N2E1IDUgMCAwIDEtNiA0Ljl2LTIuMDdhMyAzIDAgMSAwIDAtNS42NlY5Mi4xek04MCAyNzJoMnYzMmgtMnYtMzJ6bTM3LjkgMzJoLTIuMDdhMyAzIDAgMCAwLTUuNjYgMGgtMi4wN2E1IDUgMCAwIDEgOS44IDB6TTUuOSAwQTUuMDIgNS4wMiAwIDAgMSAwIDUuOVYzLjgzQTMgMyAwIDAgMCAzLjgzIDBINS45em0yOTQuMiAwaDIuMDdBMyAzIDAgMCAwIDMwNCAzLjgzVjUuOWE1IDUgMCAwIDEtMy45LTUuOXptMy45IDMwMC4xdjIuMDdhMyAzIDAgMCAwLTEuODMgMS44M2gtMi4wN2E1IDUgMCAwIDEgMy45LTMuOXpNOTcgMTAwYTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMC0xNmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTE2IDE2YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMTYgMTZhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0wIDE2YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptLTQ4IDMyYTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMTYgMTZhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0zMiA0OGEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bS0xNiAxNmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTMyLTE2YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMC0zMmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTE2IDMyYTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMzIgMTZhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0wLTE2YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptLTE2LTY0YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMTYgMGEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTE2IDk2YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMCAxNmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTE2IDE2YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMTYtMTQ0YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMCAzMmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTE2LTMyYTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMTYtMTZhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0tOTYgMGEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTAgMTZhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0xNi0zMmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTk2IDBhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0tMTYtNjRhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0xNi0xNmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bS0zMiAwYTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMC0xNmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bS0xNiAwYTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptLTE2IDBhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0tMTYgMGEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6TTQ5IDM2YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptLTMyIDBhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0zMiAxNmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6TTMzIDY4YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMTYtNDhhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0wIDI0MGEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTE2IDMyYTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptLTE2LTY0YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMCAxNmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bS0xNi0zMmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTgwLTE3NmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTE2IDBhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0tMTYtMTZhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0zMiA0OGEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTE2LTE2YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMC0zMmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTExMiAxNzZhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0tMTYgMTZhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0wIDE2YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMCAxNmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6TTE3IDE4MGEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6bTAgMTZhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0wLTMyYTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMTYgMGEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6TTE3IDg0YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnptMzIgNjRhMyAzIDAgMSAwIDAtNiAzIDMgMCAwIDAgMCA2em0xNi0xNmEzIDMgMCAxIDAgMC02IDMgMyAwIDAgMCAwIDZ6Ii8+PC9zdmc+

[nakedible-p]

I'm seeing this same problem!

And I think I finally realized why this happens! SVG in CSS URLs needs to have xmlns elements present, and the default optimizers remove that! So this patch fixes the issue for me:

diff --git a/node_modules/gatsby/dist/utils/webpack-utils.js b/node_modules/gatsby/dist/utils/webpack-utils.js
index d29ab17..68d082a 100644
--- a/node_modules/gatsby/dist/utils/webpack-utils.js
+++ b/node_modules/gatsby/dist/utils/webpack-utils.js
@@ -483,7 +483,7 @@ const createWebpackUtils = (stage, program) => {
           full: true,
           plugins: [// potentially destructive plugins removed - see https://github.com/gatsbyjs/gatsby/issues/15629
           // use correct config format and remove plugins requiring specific params - see https://github.com/gatsbyjs/gatsby/issues/31619
-          `removeUselessDefs`, `cleanupAttrs`, `cleanupEnableBackground`, `cleanupIDs`, `cleanupListOfValues`, `cleanupNumericValues`, `collapseGroups`, `convertColors`, `convertPathData`, `convertStyleToAttrs`, `convertTransform`, `inlineStyles`, `mergePaths`, `minifyStyles`, `moveElemsAttrsToGroup`, `moveGroupAttrsToElems`, `prefixIds`, `removeAttrs`, `removeComments`, `removeDesc`, `removeDimensions`, `removeDoctype`, `removeEditorsNSData`, `removeEmptyAttrs`, `removeEmptyContainers`, `removeEmptyText`, `removeHiddenElems`, `removeMetadata`, `removeNonInheritableGroupAttrs`, `removeOffCanvasPaths`, `removeRasterImages`, `removeScriptElement`, `removeStyleElement`, `removeTitle`, `removeUnknownsAndDefaults`, `removeUnusedNS`, `removeUselessStrokeAndFill`, `removeXMLNS`, `removeXMLProcInst`, `reusePaths`, `sortAttrs`]
+          `removeUselessDefs`, `cleanupAttrs`, `cleanupEnableBackground`, `cleanupIDs`, `cleanupListOfValues`, `cleanupNumericValues`, `collapseGroups`, `convertColors`, `convertPathData`, `convertStyleToAttrs`, `convertTransform`, `inlineStyles`, `mergePaths`, `minifyStyles`, `moveElemsAttrsToGroup`, `moveGroupAttrsToElems`, `prefixIds`, `removeAttrs`, `removeComments`, `removeDesc`, `removeDimensions`, `removeDoctype`, `removeEditorsNSData`, `removeEmptyAttrs`, `removeEmptyContainers`, `removeEmptyText`, `removeHiddenElems`, `removeMetadata`, `removeNonInheritableGroupAttrs`, `removeOffCanvasPaths`, `removeRasterImages`, `removeScriptElement`, `removeStyleElement`, `removeTitle`, `removeUnknownsAndDefaults`, `removeUnusedNS`, `removeUselessStrokeAndFill`, `removeXMLProcInst`, `reusePaths`, `sortAttrs`]
         }
       }]
     }

[DavidRouyer]

Edit from LekoArts:

Please note that this issue is fixed in gatsby@3.8.1. Don't use the workaround mentioned below if you can upgrade to that version.

---

A quick workaround: add this to your gatsby-node.js

// TODO: temporary workaround for https://github.com/gatsbyjs/gatsby/issues/31878
exports.onCreateWebpackConfig = ({
  actions,
  plugins,
  stage,
  getConfig
}) => {
  // override config only during production JS & CSS build
  if (stage === 'build-javascript') {
    // get current webpack config
    const config = getConfig()

    const options = {
      minimizerOptions: {
        preset: [
          `default`,
          {
            svgo: {
              full: true,
              plugins: [
                // potentially destructive plugins removed - see https://github.com/gatsbyjs/gatsby/issues/15629
                // use correct config format and remove plugins requiring specific params - see https://github.com/gatsbyjs/gatsby/issues/31619
                `removeUselessDefs`,
                `cleanupAttrs`,
                `cleanupEnableBackground`,
                `cleanupIDs`,
                `cleanupListOfValues`,
                `cleanupNumericValues`,
                `collapseGroups`,
                `convertColors`,
                `convertPathData`,
                `convertStyleToAttrs`,
                `convertTransform`,
                `inlineStyles`,
                `mergePaths`,
                `minifyStyles`,
                `moveElemsAttrsToGroup`,
                `moveGroupAttrsToElems`,
                `prefixIds`,
                `removeAttrs`,
                `removeComments`,
                `removeDesc`,
                `removeDimensions`,
                `removeDoctype`,
                `removeEditorsNSData`,
                `removeEmptyAttrs`,
                `removeEmptyContainers`,
                `removeEmptyText`,
                `removeHiddenElems`,
                `removeMetadata`,
                `removeNonInheritableGroupAttrs`,
                `removeOffCanvasPaths`,
                `removeRasterImages`,
                `removeScriptElement`,
                `removeStyleElement`,
                `removeTitle`,
                `removeUnknownsAndDefaults`,
                `removeUnusedNS`,
                `removeUselessStrokeAndFill`,
                `removeXMLProcInst`,
                `reusePaths`,
                `sortAttrs`,
              ],
            },
          },
        ],
      }
    }
    // find CSS minimizer
    const minifyCssIndex = config.optimization.minimizer.findIndex(
      minimizer => minimizer.constructor.name ===
        'CssMinimizerPlugin'
    )
    // if found, overwrite existing CSS minimizer with the new one
    if (minifyCssIndex > -1) {
      config.optimization.minimizer[minifyCssIndex] =
        plugins.minifyCss(options)
    }
    // replace webpack config with the modified object
    actions.replaceWebpackConfig(config)
  }
};

[nhshz]

Hi all, we've similarly come across an issue with SVG being broken when running gatsby build, after we upgraded from gatsby version 3.6.2 -> 3.7.0. The following is what the compiled SVG code is:

Works (version 3.6):

data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' aria-hidden='true'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23005eb8'%3E%3C/circle%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M12 8v8M8 12h8'%3E%3C/path%3E%3C/svg%3E%0A

Doesn't work (version 3.7):

data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23005eb8'/%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M12 8v8m-4-4h8'/%3E%3C/svg%3E

[thespacemanatee]

Can confirm that I am seeing this issue in gatsby@3 and using the solution provided by @DavidRouyer works for now. Faced this issue with mapbox-gl control icons as they use SVG URLs in CSS.

[motanveer]

I am seeing this issue as well. I have a encoded SVG as a background-image in CSS, which works perfectly in gatsby develop but when I run gatsby build and then gatsby serve the SVG background fails to load.

[LekoArts]

This is fixed in gatsby@3.8.1

[Kolombiken]

Posting here since it seems to be related.
Using gatsby@3.10.1 and discovered that one svg is broken when I build. In develop mode it works like it should.

The difference between the broken build svg and the working develop one is that the working is using explicit width and height (and no viewBox) while the broken one has replaced the width and the height with a viewBox.

To be more explicit.
Working svg: 👇

<svg width="346" height="68"…

Broken svg: 👇

<svg viewBox="0 0 346 68"…

This feels like a bug to me.

[mohatt]

@Kolombiken same issue with gatsby@3.10.2

Working Svg:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="20" height="34"><path d="m 19,3 -2,-2 -16,16 16,16 1,-1 -15,-15 15,-15 z" fill="#FFF"/></svg>

Broken svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 34"><path fill="#FFF" d="m19 3-2-2L1 17l16 16 1-1L3 17 18 2z"/></svg>

[tiagopavan]

@mohatt & @Kolombiken same issue with gatsby@3.11.0

Similar to the #32123 fix that disabled "removeXMLNS", this issue is related to the removeDimensions config:

remove width/height and add viewBox if it's missing (opposite to removeViewBox, disable it first)

which is also disabled by default at https://github.com/svg/svgo#built-in-plugins

[mahmoudmiz]

still broken in build mode

[Kolombiken]

Revisiting this one using gatsby@3.12.0. And I now have the issue with width and height being replaced by a viewBox in both develop and build mode.

Remove removeDimensions from svgo config #32834 seems promising though.
Crossing my finger that it will be fixed soon. But would be really good if you could override any svg config in an easy way in case this or something similar happens again.

[Kolombiken]

Just wanted to report that it's still broken in gatsby@3.12.1.
Would it be possible to open this issue again since it's not fixed?

[Kolombiken]

Just tried this out again with gatsby@3.13.0 and it seems like it's working now. 🥳
At least for my usecase (and I'm guessing @mohatt as well).

[mohatt]

@Kolombiken Yeah looks like it got fixed in 3.13

[mjgwood]

I'm finding that the xmlns attribute is still getting removed from SVGs in develop mode. Build mode is all good though.

Tested on gatsby@3.13.1 and gatsby@3.14.0.

[phun-ky]

Why is this closed? Still not working in v4 #34395

[darkmasta]

I have the same issue with version "^4.7.2"

[webdevtrev]

I'm having this same issue ^4.21.0

[ZorikovPasha]

Still getting error in gatsby 4.0.0 - Error: Can't resolve '../../images/popup-body-decor.svg' in..., come on, guys, what a? People wont use gatsby if they cant import svg in scss - most popular css preprocessor.

[jayantamadhav]

Still not working in Gatsby version: 5.7.0, works fine when using other svgs as images, but breaks when using scss and background-image.

I even checked the base64 before by converting and after (running build), they're not the same.

[collinkrawll]

Not great, but until it's properly fixed, I worked around the issue by doing a find and replace on the build output from Gatsby. I just had one messed up SVG and I couldn't get any of the other workarounds posted here to work. Here's what I did:

First, I created a little shell script that has the good (from dev) and bad (from build) data URI values. It takes those values and does a find and replace on the public directory using find and sed. Here's the script:

fix_31878.sh

echo "Fix for Gatsby Issue #31878"
echo "Replacing bad SVG data URIs with good ones."

BAD="THE_BAD_SVG_DATA_URI"
GOOD="THE_GOOD_SVG_DATA_URI_FROM_DEV"

LC_CTYPE=C
LANG=C
find public/ -type f -exec sed -i '' -e "s|$BAD|$GOOD|g" {} \;

You'll want to update THE_BAD_SVG_DATA_URI and THE_GOOD_SVG_DATA_URI_FROM_DEV in the above...and scale it out if you have multiple SVGs with the problem.

I then updated the build script command in package.json to run the script (by appending && ./fix_31878.sh to the build line):

"build": "gatsby clean && gatsby build --prefix-paths && ./fix_31878.sh",

I'm sure that there are other better workarounds and obviously this isn't a fix, but it should get your site working again if you just have a couple of bad SVGs.

[rynoV]

I am also running into this issue with gatsby 4.3, hope it gets reopened!

In my case the svg was rendering but didn't look right, and this comment fixed the issue after I also removed the removeStyleElement plugin.