1

I have been trying to figure out if it is at all possible in order to take an SVG asset. Go to its file path. Access its color or fill and use that specific colour as a SASS variable.

I have been looking at this stackoveflow article as well as this one as well. But they seem to be targeting a specific SVG and not actually using it in the way I was hoping. Unless there is something I am missing.

So basically I want to go:

background: url(../../../asset/button.svg/#gradient);

or be able to go and store it in a SASS variable like: 

$myGradient: url(../../../asset/button.svg/#gradient);

Is something like this possible?

Community
  • 1
  • 1
factordog
  • 599
  • 5
  • 24
  • 1
    Basically...no, you can't. – Paulie_D Nov 02 '16 at 12:28
  • This is saddening. Thanks for the input – factordog Nov 02 '16 at 12:54
  • You would have to parse it as a text file, find the fill attribute and then output that to a file and then import that file with SASS. No idea how you would actually do that though. – R Reveley Nov 02 '16 at 14:16
  • I'm not sure to get what you are after, but if you want to use an [SVGGradient](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients) as a background-image for some HTML element, you'll have to place in your svg document a rect filled with this gradient, in CSS point to your whole svg document (`url(yourfile.svg)`) and then adjust your background-size. If you want to use some gradient defined in an svg document as the fill rule for an svg element in your current document, you will have to change your url to `url(yourFile.svg#theIdOfYourGradient)`. – Kaiido Nov 02 '16 at 14:33
  • Yea it looks like ill be heading in that route! – factordog Nov 02 '16 at 14:54
  • maybe related https://graphicdesign.stackexchange.com/questions/107264/convert-svg-linear-gradient-to-css-linear-gradient-adobe-xd , @josephus-paye – alo Malbarez Apr 02 '19 at 18:39

0 Answers0