Remove one-stop gradients

[hlg]

Inkscape uses one-stop gradients by default instead of solid fills when creating swatches. It would be nice to have them replaced with solid fills.

[strarsis]

@hlg: Providing some sample SVGs with such an one-stop gradient (e.g. from Inkscape)
would be helpful for writing a plugin.

[hlg]

Hier is a minimal example with two squares of the same solid color, for one defined as one-stop-gradient and for the other defined as simple fill: onestopgradient.svg. I do not find any information about "openswatchbook" and whether there is a simpler way to define solid fill swatches. The osb-information makes the color show up in inkscapes palette.

[nazsolti]

I know this is an old issue, but there's actually a compatibility issue with swatches. I found that Internet Explorer and iPhone's Safari renders some of the elements which's colors have been assigned with swatches as either black or completely transparent (not showing at all). This enhancement would completely solve this.

Swatches work like so:

A linearGradient element is defined with an ID and with the attribute osb:paint='solid'. The gradient will only have one stop with a color. This will essentially be your 'swatch.'

Later, fill colors on elements are assigned by having the fill attribute set to url(#), like this:

It would be a huge size optimization if the stop color was just copied into the fill attribute, and the linear gradient definition removed. It would also completely solve the compatibility issue with some browsers.

[SethFalco]

I've just submitted a PR for this here:

• feat: convert one stop gradients plugin #1790

If you're willing to test and confirm if this addresses your use-case, that'd be appreciated!

You can install my branch with the following:

git clone https://github.com/SethFalco/svgo.git -b feat/issue-568
cd svgo
yarn install
npm i -g .

Then define the following config to try the plugin:

svgo.config.js

module.exports = {
  plugins: [
    'preset-default',
    'convertOneStopGradients'
  ]
};