Colors end up more bland

[sindresorhus]

Before and after running a SVG through svgcleaner:

Here are the before and after SVGs: svg.zip

---

❯ svgcleaner --version
svgcleaner 0.9.5

[RazrFalcon]

This is because of:

<use fill="url(#btc-c)" style="mix-blend-mode:soft-light" xlink:href="#btc-b"/>

mix-blend-mode is an CSS extension. It's not part of the SVG spec. So it will work only in browsers.

I'm not sure what can be done here.

[sindresorhus]

SVGO (v1.0.5 default preset) doesn't ruin it though: after-svgo.svg.zip

[RazrFalcon]

svgo and svgcleaner are working a bit different. Basically, svgcleaner doesn't support non-SVG properties. So it can't be simply fixed, it should be rewritten a lot.

I'll keep this open and maybe one day it can be fixed.

[JoKalliauer]

What about --remove-nonsvg-attributes no --join-style-attributes all

creates: (works in Inkspace)

<svg height="32" style="" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs style="">
  <linearGradient id="a" style="" x1="50%" x2="50%" y1="0%" y2="100%">
   <stop offset="0" style="stop-color:#fff;stop-opacity:.5"/>
   <stop offset="1" style="stop-opacity:.5"/>
  </linearGradient>
  <circle id="b" cx="16" cy="15" r="15" style=""/>
  <filter id="c" height="111.7%" style="" width="111.7%" x="-5.8%" y="-4.2%">
   <feOffset dy=".5" in="SourceAlpha" result="shadowOffsetOuter1" style=""/>
   <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation=".5" style=""/>
   <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1" style=""/>
   <feColorMatrix in="shadowBlurOuter1" style="" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.199473505 0"/>
  </filter>
 </defs>
 <g style="fill:none;fill-rule:evenodd">
  <use style="fill:#000;filter:url(#c)" xlink:href="#b"/>
  <use style="fill:#f7931a" xlink:href="#b"/>
  <use style="fill:url(#a)" xlink:href="#b" mix-blend-mode="soft-light"/>
 </g>
</svg>

---

but this one would also work in Crome,Firefox,Inkscape with:

<svg height="32" style="" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs style="">
  <linearGradient id="a" style="" x1="50%" x2="50%" y1="0%" y2="100%">
   <stop offset="0" style="stop-color:#fff;stop-opacity:.5"/>
   <stop offset="1" style="stop-opacity:.5"/>
  </linearGradient>
  <circle id="b" cx="16" cy="15" r="15" style=""/>
  <filter id="c" height="111.7%" style="" width="111.7%" x="-5.8%" y="-4.2%">
   <feOffset dy=".5" in="SourceAlpha" result="shadowOffsetOuter1" style=""/>
   <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation=".5" style=""/>
   <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1" style=""/>
   <feColorMatrix in="shadowBlurOuter1" style="" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.199473505 0"/>
  </filter>
 </defs>
 <g style="fill:none;fill-rule:evenodd">
  <use style="fill:#000;filter:url(#c)" xlink:href="#b"/>
  <use style="fill:#f7931a" xlink:href="#b"/>
  <use style="fill:url(#a);mix-blend-mode:soft-light" xlink:href="#b"/>
 </g>
</svg>

So in my opinion it is just missing, that the combination of --remove-nonsvg-attributes no and --join-style-attributes all should work, so that mix-blend-mode="soft-light" would be changed to style="fill:url(#a);mix-blend-mode:soft-light"

[RazrFalcon]

What about --remove-nonsvg-attributes no --join-style-attributes all

join-style-attributes joins SVG style attributes, not any attributes. svgcleaner doesn't know anything about CSS.

[JoKalliauer]

--remove-nonsvg-attributes no is in my opinion an improvement because Inkspace renders the file after svgcleaner identically as before.

@RazrFalcon I meant that svgcleaner puts all unknown attributes (independent if they are CSS or just completely invalid) to style in join-all-style, this might causes other problems with nonsvg-Attributes, but since --join-style-attributes some aswell as--remove-nonsvg-attributes yes are default I don't see a problem, because you explicitly have to declare both a the same time. (for cases like this)

(I don't know how svgcleaner works, maybe it is not reasonable durable.)

[RazrFalcon]

The problem is that join-style-attributes joins SVG style attributes. You can't put everything in the style attribute. This bug can not be fixed at the moment in any way. It's a design flaw.

The problem is that remove-nonsvg-attributes and remove-nonsvg-elements must not be optional. At the moment, even if you disable them - nothing really changes. Non-SVG elements and attributes are ignored in most cases/algorithms.

So they will be removed in the next release, whenever it will be.