2

Preciso aplicar o efeito "brilho externo" do photoshop em uma logo SVG. a logo está sendo referenciada pela tag image:

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

E não consegui aplicar o efeito text-shadow pelo CSS da página.

Como posso aplicar esse efeito na logo?

1 Resposta 1

3

Vc pode usar o filter:drop-shadow do CSS para fazer isso. Assim é possível colocar o filtre em uma imagem.svg ou direto na tag <svg>

Veja como fica no exemplo abaixo.

OBS1: repare que esse SVG em particular é vazado e o vermelho que aparece no interior do ícone é a cor do próprio box-shadow, então se os seus ícones forem vazados, vc precisa corrigir isso colocando um path ali com o fill branco por exemplo.

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .