Adding drop shadows to SVG symbols

Question

I'm building a website that is very heavy on icons, so I'm working with SVG symbols to reduce duplication. In some cases the design calls for the symbols to have a drop shadow, and not in others. I'm struggling to figure out how I can add a drop shadow.

Example of my SVG:

<svg id="icons-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
...
<symbol id="icon-communications" viewBox="1400 0 200 200">
    <title>Communications</title>
    <rect style="fill: currentColor" x="1447.3" y="95.3" width="105.3" height="5.3"/>
    <rect style="fill: currentColor" x="1447.3" y="78" width="105.3" height="5.3"/>
    <polygon style="fill: currentColor" points="1463.2,127.9 1468,130.1 1475.7,113.6 1470.9,111.4   "/>
    ...
</symbol>
...
</svg>

I then include the icon on page using the standard:

<svg class="icon-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <use xlink:href="#icon-communications"/>
</svg>

I can then set the color of the icon like this:

.icon-svg use {
    color: blue;
}
.error .icon-svg use {
    color: red;
}

But I can't figure out how to add a drop shadow. I've tried CSS box-shadow, and also filter: drop-shadow(), but neither seem to do anything. e.g.

.someClass .icon-svg use {
    color: #fff;
    -webkit-filter: drop-shadow( 0 0 20px #000 );
    filter: drop-shadow( 0 0 20px #000 );
}

Any help would be appreciated.

Yeah...I don't *think* you can do that with a `` only an inline SVG. - http://stackoverflow.com/questions/6088409/svg-drop-shadow-using-css3?rq=1 — Paulie_D, Jul 19 '16 at 15:39
Alternatively would it be possible to include it with the SVG and the switch it off using CSS, or would that have exactly the same limitation? — chrism, Jul 19 '16 at 15:42
I think it would have the same issues. I'm just assuming from my reading here. Reaching *into* a `` and applying CSS to (effectively) *parts' is difficult if not impossible. I'd wait for some SVG experts to come along. If @RobertLongson comments..take it as gospel. — Paulie_D, Jul 19 '16 at 15:45
My experience has been the SVG renders OK, without objectionable time delays, with as many as 5000 separate clones rather than of an element. It allows much more access for dynamic customization of an element. — Francis Hemsher, Jul 19 '16 at 16:22
I have a solution, but doesn't work in IE. If I modify the style attribute on the original symbol SVG to include 'filter:var(--filter-name)' I can then set the filter name referencing an SVG filter in my CSS e.g. '--filter-name: url(#dropshadow);'. — chrism, Jul 19 '16 at 16:42

score 0 · Answer 1 · answered Jul 20 '16 at 00:24

Use an SVG Filter:

.icon-svg use {
    color: blue;
}
.error .icon-svg use {
    color: red;
}

.icon-svg {
  -webkit-filter: url(#dropshadowy);
}

<svg id="icons-svg" >
  <defs>
<filter id="dropshadowy">
  <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
  <feMerge>
    <feMergeNode/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>
    
<symbol id="icon-communications" viewBox="1400 0 200 200">
    <title>Communications</title>

    <rect style="fill: currentColor" x="1447.3" y="95.3" width="105.3" height="5.3"/>
    <rect style="fill: currentColor" x="1447.3" y="78" width="105.3" height="5.3"/>
    <polygon style="fill: currentColor" points="1463.2,127.9 1468,130.1 1475.7,113.6 1470.9,111.4   "/>

</symbol>
  </defs>

</svg>


<svg class="icon-svg" >
 
    <use xlink:href="#icon-communications"/>

</svg>

Doesn't work for me in FF 47.0.1 or Edge 14.14393. Yes in Chrome. I can't figure out why your original code doesn't work - I did the same thing on my web site [http://potoococha.net/][1] and it works in all browsers. I would suggest closing all your tags, use, rect and polygon may not be "self-closing". And you shouldn't need to use the use element name in your css - just the class names are enough. [1]: http://potoococha.net/ — Mark, Jul 20 '16 at 01:47

Adding drop shadows to SVG symbols

1 Answers1