SVGO strips styles

[ossinkine]

svgs.zip

Before.svg contains styles for shapes but after SVGO processing it does not contain them anymore and also shapes do not contain according attributes.

[popbee]

You can turn off the inline styles option to keep them. Worked with your example.
This tool does not work well with more complex CSS selectors when inlining styles.
Also I see the styles being stripped off (empty <style> block) only when both minify and inline are used together.

    <style>
      .svg_tournament.cls-1 {
        isolation: isolate;
      }

      .svg_tournament .cls-2 {
        opacity: 0.75;
        mix-blend-mode: multiply;
      }

      .svg_tournament .cls-3,
      .svg_tournament .svg_color {
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.8px;
      }

      .svg_tournament .cls-3 {
        stroke: #000;
      }

      .svg_tournament .svg_color {
        stroke: #e8ce3a;
      }
    </style>

[strarsis]

@ossinkine, @popbee: Disabling the onlyMatchedOnce option seems to be a workaround around this issue.
Hm, the onlyMatchedOnce apparently has a bug that causes loss of styles,
the cls-3 class in your example input SVG matches multiple time, hence it is affected.

[cneeson]

Neither of these approaches worked for me unfortunately. I am using svgo in combination with rollup-plugin-react-svg to export React component library SVGs. No matter what I try, the styles property always resolves as an empty object. (apologies, had to upload each of them as txt files as js and svg weren't supported)

Test case:
before.txt
after.txt
rollup.config.txt

[strarsis]

@cneeson: It is probable that the svgo options you set in webpack aren't passed to svgo.
Have you tried to disable some plugins or set some options and check whether this changes the output?

[cneeson]

@strarsis thanks for getting back. Think I have confirmed that the options aren't being passed to svgo, there are illustrator comments throughout the test SVG that are removed by svgo, even when I set the removeComments option to false.

[strarsis]

@cneeson: So you have to find out what part of your webpack setup doesn't pass the options to svgo.

[strarsis]

@ossinkine, @cneeson: Were you able to fix the issue?

[ossinkine]

@strarsis No, we just slightly modified the svgs so that svgo processes them correctly.

[alexeychikk]

I've disabled inlineStyles and removeStyleElement but style element still gets stripped.

[strarsis]

@alexeychikk: Are you sure that those plugins are really disabled?

[strarsis]

Stripped down SVG for reproducing the issue:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.49 35.68">
  <defs>
    <style>
      .wrapper.cls-1 {
        isolation: isolate;
      }

      .wrapper .some-stroke {
        stroke: #e8ce3a;
      }
    </style>
  </defs>
  <g class="wrapper cls-1">
    <polyline class="some-stroke" points="22.75 22.2 8.43 7.18 13.4 1.9 32.09 1.9 37.06 7.18 22.75 22.2 17.9 10.27 17.96 7.18"/>
    <polyline class="some-stroke" points="22.75 22.2 27.38 10.27 27.38 7.18"/>
  </g>
</svg>

It only happens with classes that are used more than once, hence the issue with onlyMatchedOnce turned on,
with a wrapper element being selected in the SVG styles.

Edit: So the reason for this is that when a selector is inlined, the element class is also stripped, if configured to do so.
However, the element class can be important in other selectors that hadn't been inlined because they don't match more than once (which is the default). To mitigate this issue, for each element from which the classes should be stripped, all the left-over rules must be checked for traversing that element, and only when they don't traverse that element, the class can be safely stripped.
For now, I would try to use a loop that builds each selector rule, selector by selector and performs a match check on the element.

[SethFalco]

Thanks for reporting the issue, and thanks to strarsis for investigating it.
This has been resolved. The fix will be released in v3.0.4.