SVG Parameters don't work

Question

SVG Parameters don't work

Opened this issue 7 years ago · 6 comments

I have the following SVG Sprite (created and optimized with gulp-svg-sprites):

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" style="position:absolute">
  <symbol id="minus" viewBox="0 0 48 48">
    <path stroke="var(--color,#144a81)" stroke-width="var(--strokewidth,2px)" d="M0 24h48"></path>
  </symbol>

  <symbol id="plus" viewBox="0 0 48 48">
    <g stroke="var(--color,#144a81)" stroke-width="var(--strokewidth,2px)"><path d="M0 24h48M24 0v48"></path></g>
  </symbol>
</svg>

Stylesheet:

li::before {
  position: absolute;
  top: 3px;
  left: -33px;
  width: 22px;
  height: 22px;
  content: '';
  background: url("symbols.svg#plus" param(--color red) param(--strokewidth 3px)) no-repeat;
  background-size: contain;
  background-position: center;
}

Result:
SVG has only the default color and the passed parameters not rendered

  background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 24h48M24 0v48' stroke='var%28--color%2C%23144a81%29' stroke-width='var%28--strokewidth%2C2px%29'/%3E%3C/svg%3E") no-repeat;

Answer 1 · 2017-11-06T22:22:08.000Z

@Dotmagic, have you tried using the style attribute? I think that would be the only valid way to use it.

<g style="stroke: var(--color, #144a81); stroke-width: var(--strokewidth, 2px);">

Answer 2 · 2017-11-06T22:23:04.000Z

By the way, if using attributes results in a smaller file, the built-in svgo will do so.

Answer 3 · 2017-11-07T15:45:05.000Z

Indeed, var() needs to be used within CSS.

Test added: https://github.com/jonathantneal/postcss-tests/tree/master/postcss-svg-00

Answer 4 · 2017-11-07T18:41:16.000Z

Thanks for take a look into it. There was a undocumented option for gulp-svg-sprites to tweak svgo. With the following setting I was able to disable the style -> attributes conversion:

cleanconfig: {
  plugins: [
    {convertStyleToAttrs: false}
  ]
}

Answer 5 · 2017-11-07T20:49:02.000Z

You can do the same. See:

Example:

require('postcss-svg')({
  svgo: {
    plugins: [
      {
        convertStyleToAttrs: false
      }
    ]
  }
})

Answer 6 · 2017-11-08T19:25:43.000Z

@jonathantneal I know, but postcss-svg can't create SVG-Sprites. For that reason I still need something to build my sprites. Sadly gulp-svg-sprites use already SVGO with all fancy plugins enabled by default. I wasn't aware about it and the options for svgo aren't documented. See shakyShane/gulp-svg-sprites#18

However, your postcss plugin works really well. I'm very excited about it because it allows me to use SVG in a new creative way 👍