0

There is this super awesome plugin for postcss called postcss-inline-svg. I use it all the time to load svg icons in different styles from only one source.

If you haven't heard of it, make sure to check it out on Github: https://github.com/TrySound/postcss-inline-svg

If you are already familiar with the plug in, you probably know that you are able to change fills of svg image when loading via svg-load().

I would like to know, if its possible to define linear gradients to load them into the fill of a svg image.

Something like:

<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="greenish">
            <stop  offset="0" style="stop-color:#A4C660"/>
            <stop  offset="1" style="stop-color:#45995B"/>
        </linearGradient>
    </defs>
    <symbol id="test" viewBox="0 0 102.0469 102.0479" width="102" height="102" fill="url(#greenish)">
        <path d="M98.4473,0H0V102.0479H102.0469V0Zm-2.835,95.6123H6.4346V6.4346H95.6123Z"/>
        <circle cx="33.4389" cy="38.1854" r="6.8354"/>
        <path d="M17.3242,76.1865H64.6587A13.4873,13.4873,0,1,0,84.7568,61.3074V24.0762A2.5505,2.5505,0,0,0,82.1855,21.5H17.3242a2.5421,2.5421,0,0,0-2.5713,2.5757v49.539A2.5459,2.5459,0,0,0,17.3242,76.1865ZM85.96,63.8018a1.6524,1.6524,0,0,1,.6816,2.2382L78.1689,81.9551a1.647,1.647,0,0,1-1.2646.8633,1.4522,1.4522,0,0,1-.1943.0117,1.6552,1.6552,0,0,1-1.2373-.5537l-8.0616-9.0977a1.6533,1.6533,0,0,1,2.4746-2.1933L76.3682,78.3l7.3564-13.8144A1.6537,1.6537,0,0,1,85.96,63.8018Zm-66.6368-37.73H80.1875V59.5352c.0257.0048.056.0142.0823.02a13.3865,13.3865,0,0,0-7.662.7542L65.9131,49.64,56.2324,34.2148,46.5586,49.64l-2.64,4.2056-4.0724-6.3544-5.6382,8.7969-5.64,8.7969H51.1221l-.0131-.02h15.55a13.4211,13.4211,0,0,0-2.4459,7.7343c0,.1351.0162.266.02.4-.0123-.1452-.02-.2815-.02-.4,0-.3984.0205-.792.0547-1.1816H19.3232Z"/>
    </symbol>
</svg>

This is how I load it in my HTML File:

<svg role="img" class="test-svg">
            <use xlink:href="assets/images/svg/test.svg#test"/>
        </svg>

Download the test file here: File

Marten Zander
  • 2,385
  • 3
  • 17
  • 32
  • 1
    have you tried `svg-load(demo.svg, fill="url(#myGradient)");` (not sure if you need the quotes) – Simon Hänisch Jul 05 '16 at 09:12
  • @simonHänisch nice hint, this works, but only in firefox, in chrome somehow my svg stays blank – Marten Zander Jul 05 '16 at 09:59
  • ok maybe you need to wrap your gradient definition in a `` block? – Simon Hänisch Jul 05 '16 at 10:02
  • @SimonHänisch yh, I already did that, I update my SVG code, take a look above – Marten Zander Jul 05 '16 at 10:04
  • does this work in chrome: http://www.w3schools.com/svg/svg_grad_linear.asp ? – Simon Hänisch Jul 05 '16 at 10:06
  • I actually dont' use the postcss plug in right now – Marten Zander Jul 05 '16 at 10:06
  • @SimonHänisch yes that works – Marten Zander Jul 05 '16 at 10:07
  • if you specify a symbol, you need to use it with `` (https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol) – Simon Hänisch Jul 05 '16 at 10:14
  • @SimonHänisch look above, that's actually how I do – Marten Zander Jul 05 '16 at 10:42
  • Can you post or link the generated SVG that appears blank in Chrome? Also make sure that you don't have more than one gradient with the same `id`. – Paul LeBeau Jul 05 '16 at 11:24
  • sure, you can download the file here: https://drive.google.com/file/d/0B89oIuOBdiu0MGxELVdkekRRZU0/view?usp=sharing – Marten Zander Jul 05 '16 at 11:29
  • @MartenZander if you do this: ``, then it works for me... (https://jsfiddle.net/bpnubt39/1/) can you explain, what you want to achieve with your `xlink:href`? – Simon Hänisch Jul 05 '16 at 12:23
  • @SimonHänisch what browser are you using? And where di you put your use-tag ? In my Project-Environment I have to set the target like so: – Marten Zander Jul 05 '16 at 12:28
  • ahh I see, you actually put the whole svg inline... What I want to do is load the svg with a use tag and not have to put it inline – Marten Zander Jul 05 '16 at 12:30
  • then you can't change the fill color (http://stackoverflow.com/a/22253046/2897426) ... if I get it right that is exactly what the postcss-inline-svg plugin is for (loading the image and then inlining it so it can be manipulated). don't know why it doesn't work with the gradient in chrome. you can open an issue on github, actually there is one about single/double quotes in chrome dev tools (https://github.com/TrySound/postcss-inline-svg/issues/20). there is also a solution using jquery to inline the svg: http://stackoverflow.com/a/24933495/2897426 ... – Simon Hänisch Jul 05 '16 at 13:21

0 Answers0