SVG Long Shadow - html

Question

So I've got this svg of a code symbol on my website and I want to add a long shadow to the svg. I've tried using filter: drop-shadow() but that only allows for one offset, I'm looking for the same feature as box-shadow where I can add multiple offsets to make a long shadow.
I'm using Sass for my styling and have made a function that makes long shadows for boxes and then is called with a mixin but unfortunately I can't find how to do the same with svg.
Anyone got any work arounds?

Answer 1

Not entirely sure what you mean by a long shadow - but I'm assuming that you're looking for an extrusion? You can do that by doing multiple offsets and in a SVG filter - and then referencing that filter from CSS.
.icon {
width: 50px;
height: 50px;
filter: url(#long-shadow);
}
<img class="icon" src="https://material.io/tools/icons/static/ic_icons_192px_light.svg">
<svg width="0px" height="0px">
<defs>
<filter id="long-shadow" x="0%" width="130%" y="0%" height="130%">
<feOffset dx="1" dy="1" result="layer1" in="SourceAlpha"/>
<feOffset dx="1" dy="1" result="layer2" />
<feOffset dx="1" dy="1" result="layer3" />
<feOffset dx="1" dy="1" result="layer4" />
<feOffset dx="1" dy="1" result="layer5" />
<feOffset dx="1" dy="1" result="layer6" />
<feOffset dx="1" dy="1" result="layer7" />
<feMerge>
<feMergeNode in="layer1"/>
<feMergeNode in="layer2"/>
<feMergeNode in="layer3"/>
<feMergeNode in="layer4"/>
<feMergeNode in="layer5"/>
<feMergeNode in="layer6"/>
<feMergeNode in="layer7"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
</svg>