svg shadow - CSS

Asked

Viewed 687 times

2

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

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

And I couldn’t apply the effect text-shadow by the CSS of the page.

How can I apply this effect on the logo?

html5 css3 svg css-hover

1 answer

3


You can use the filter:drop-shadow CSS to do this. So it’s possible to put Filter in a imagem.svg or directly in the tag <svg>

See how it looks in the example below.

OBS1: note that this particular SVG is leaked and the red that appears inside the icon is the color of the icon itself box-shadow, so if your icons are leaked, you need to fix this by putting a path there with the fill white 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>

Browser other questions tagged html5 css3 svg css-hover

You are not signed in. Login or sign up in order to post.