Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove one-stop gradients #568

Closed
hlg opened this issue Jul 22, 2016 · 4 comments · Fixed by #1790
Closed

Remove one-stop gradients #568

hlg opened this issue Jul 22, 2016 · 4 comments · Fixed by #1790
Assignees

Comments

@hlg
Copy link

hlg commented Jul 22, 2016

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
Copy link
Contributor

strarsis commented Apr 9, 2017

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

@hlg
Copy link
Author

hlg commented Aug 6, 2017

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
Copy link

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.'

image

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

image

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
Copy link
Member

I've just submitted a PR for this here:

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'
  ]
};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants