Shadow in svg-CSS

I need to apply the "external glow" effect of photoshop on an SVG logo. the logo is being referenced by the image tag: 

<img src="imagens/logos/erp.svg"/>

And I couldn't apply the text-shadow effect through the page CSS.

How can I apply this effect to the logo?

Author: hugocsl, 2018-07-09
Source

1 answers

Vc can use CSS's filter:drop-shadow to do this. So you can put the filter in a imagem.svg or directly in the tag <svg>

See how it looks in the example below.

OBS1: notice that this particular SVG is leaked and the red that appears inside the icon is the color of box-shadow itself, so if your icons are leaked, you need to correct this by putting a path there with the White fill for example.

body {
    margin: 20px;
}
#minhaimg {
    width: 100px;
    height: 100px;
    filter:drop-shadow(0 0 10px red);
}
#meusvg {
    width: 100px;
    height: 100px;
    filter:drop-shadow(0 0 10px red);
}
<img id="minhaimg" src="https://image.flaticon.com/icons/svg/149/149657.svg" alt="">

<svg id="meusvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 85 85">
    <path d="M30,0C13.458,0,0,13.458,0,30s13.458,30,30,30s30-13.458,30-30S46.542,0,30,0z M22,29c0,1.488-0.548,2.848-1.448,3.898
	l12.716,9.325C34.028,39.78,36.31,38,39,38c3.309,0,6,2.691,6,6s-2.691,6-6,6c-3.131,0-5.705-2.411-5.973-5.474L18.961,34.212
	C18.086,34.711,17.077,35,16,35c-3.309,0-6-2.691-6-6s2.691-6,6-6c1.077,0,2.086,0.289,2.961,0.788l14.065-10.314
	C33.295,10.411,35.869,8,39,8c3.309,0,6,2.691,6,6s-2.691,6-6,6c-2.69,0-4.972-1.78-5.731-4.223l-12.716,9.325
	C21.452,26.152,22,27.512,22,29z"/>
</svg>
 3
Author: hugocsl, 2018-07-09 13:40:48