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

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)
  }
};

Why is this closed? Still not working in v4 https://github.com/gatsbyjs/gatsby/issues/34395

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?

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.

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.

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.

@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>