Svgo: Remove fill and stroke unless "none"

[ccorcos]

when I'm styling my SVG's with CSS its nice to strip all the inline colors so I can style them myself. This challenging when colors are set with inline styles. So I strip them out:

  {
    removeAttrs: {attrs: '(stroke|fill)'},
  }

But then there are circles that are filled in when they shouldnt be. So it would be aweosme if you could strip all the stroke and fill attributes so long are they're not none. Unless you've found a better way of dealing with this...

[ccorcos]

{ removeAttrs: {attrs: '(stroke|fill)'} }, is also removing stroke-width

[GreLI]

Sorry, I don't understand your first statement.

{ removeAttrs: {attrs: '(stroke|fill)'} }, is also removing stroke-width

It's likely that removeUselessStrokeAndFill removes stroke-width since there is no stroke. Just disable it.

[ccorcos]

Ah. I'll try that.

Let me reiterate my first statement:

When using these svg's inline an styling with CSS, its nice to be able to set the stroke and fill colors. Thus, I want to remove the stroke and fill colors. However I want to preserve all styles where fill is set to none -- that is, I want to preserve hallow regions. Stripping all fill attributes will cause icons to look wrong.

[GreLI]

Well, removeAttrs takes only style attributes names. You can extend it if you want, but this is not main svgo purpose.

[ccorcos]

ok. I see. SVG's are kind of a pain.... :/

[KingScooty]

This is actually a valid use case. I've just come across it myself. It'd be nice to strip out all color and fill refs if they aren't set to "none". We need to keep "none" as it preserves some important styling.

SVGO is an optimizer, and optimizing for the web should be a valid use case.

Being able to set the colour of SVGs using CSS is a huge plus, and this can't be done if there's stray fills or colours in the file.

[ekfuhrmann]

I agree that there is a valid use case for this.

Lets say you have an icon library with a consistent container size, such as 24 x 24 px, you'll sometimes have icons within that container that are smaller than it for visual continuity -- so maybe an 18 x 18 px icon within the 24 x 24 px container.

This normally wouldn't be an issue so long as you can leave the container path to fill="none", but since it's being stripped out, it makes such a system obsolete.

While I know I can prevent fill from being stripped, it's nice to have so that you can control the icon color via CSS.

A proposed solution would be something along the lines of attrs: ['stroke.*', 'fill.*!none'] which would remove all fill attributes from the SVG aside for those that have a value of none.

[ailet37]

is there a way today to remove all fill except none value ?

[ekfuhrmann]

@ailet37 I still haven't been able to figure out a solution to removing all fill except none. I've for the most part removed this part from my build process and now just manually clean the fills whenever I need a fill: none preserved.

It's not great and I wish the owner would reconsider adding this functionality since it has numerous valid implementations.

[Herman-Freund]

@GreLI @ccorcos @KingScooty @ekfuhrmann @ailet37

I've opened pull request #977 that addresses this issue.

Proposed solution:

{
  removeAttrs: {
    attrs: '*:(stroke|fill):((?!^none$).)*'
  }
}

[Herman-Freund]

This has now been resolved and merged via #977

[GreLI]

Should work in SVGO v1.2.0.