<style> discarded

[odub]

I just used svgr to convert a bunch of SVGs with CSS declarations in a <style> tag in <defs>. eg.

<style>
.foo {
  fill: #fff;
}
</style>

By default these get discarded so my componentized result looks very different – lots of black text on black background and other general nasties…

Running a external pass of svgo first with this config, the <style> tag converts into inline versions and the problems go away:
{ "plugins": [ { "inlineStyles": { "onlyMatchedOnce": false } } ] }

So now I wonder if this should be the default behaviour of svgr and maybe the above should merge into the svgo config this project uses. Or alternatively, I wonder if svgr should preserve <style> tags without changing the SVG structure – perhaps the current discard behaviour is just a bug?

[gregberge]

This is not a bug, SVG as React Component are inlined in the page and <style> tags are dangerous for inlined SVG because the style applies in all the page.

<svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <style>
    /* <![CDATA[ */
    circle {
      fill: orange;
      stroke: black;
      stroke-width: 10px;
    }
    /* ]]> */
  </style>

  <circle cx="50" cy="50" r="40" />
</svg>
<svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" />
</svg>

The previous example will display two orange circles in the page. The first SVG leaks on the second one. This is why SVGR remove all <style> tags. I encourage you to use inline style instead.

[odub]

Hi @neoziro! Thanks for conjuring up that example – it seems like it makes a lot of sense to call <style> out as an anti-pattern. What do you think to the idea of using the svgo inlineStyles plugin in svgr to mend leaky style declarations of this kind?

[gregberge]

Yeah why not, it could be a good solution 👍

[strarsis]

Also note that there is the svgo prefixIds plugin which prefixes styles as a kind of polyfill for scoped CSS.

[txcyy]

This is not a bug, SVG as React Component are inlined in the page and <style> tags are dangerous for inlined SVG because the style applies in all the page.

<svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <style>
    /* <![CDATA[ */
   .light circle {
      fill: orange;
      stroke: black;
      stroke-width: 10px;
    }
    /* ]]> */
  </style>

  <circle cx="50" cy="50" r="40" />
</svg>
<svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" />
</svg>

The previous example will display two orange circles in the page. The first SVG leaks on the second one. This is why SVGR remove all <style> tags. I encourage you to use inline style instead.

@gregberge but how to fix dynamic inlinestyle? eg.

<svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <style>
    /* <![CDATA[ */
    .light circle {
      fill: orange;
      stroke: black;
      stroke-width: 10px;
    }
    .dark circle {
       fill: blue;
       stroke: black;
       stroke-width: 10px;
     }
    /* ]]> */
  </style>

  <circle cx="50" cy="50" r="40" />
</svg>
<svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" />
</svg>

I think it can provide a configuration, remove style element by default, but keep it when needed.