How to lower the opacity of the alpha layer in an svg filter?

Question

I'm trying to create a logo as an SVG. I exported the file from Illustrator. The logo has a drop shadow on it. I was looking through the XML and I found the filter node

<filter  filterUnits="objectBoundingBox" width="200%" height="160%" x="-15%" y="-15%" id="AI_Shadow_2"> <feGaussianBlur  stdDeviation="2" result="blur" in="SourceAlpha"></feGaussianBlur> <feOffset  result="offsetBlurredAlpha" in="blur" dy="0" dx="0"></feOffset> <feMerge>     <feMergeNode  in="offsetBlurredAlpha"></feMergeNode>     <feMergeNode  in="SourceGraphic"></feMergeNode> </feMerge> 

Is there a way to change the alpha of the offsetBlurredAlpha generated? I don't want it to start at pure black I want it to start at 50% black so that the shadow effect is light enough around the object.

Answer 1

One way is to add a feComponentTransfer filter primitive, like this:

<filter id="dropshadow">   <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>    <feOffset dx="2" dy="2"/>   <feComponentTransfer>     <feFuncA type="linear" slope="0.2"/>   </feComponentTransfer>   <feMerge>      <feMergeNode/>     <feMergeNode in="SourceGraphic"/>    </feMerge> </filter> 

A live example can be seen here.

Answer 2

One way is to simply use opacity: 0.5. To do this, instead of creating a filter that merges the dropshadow with the original source on top, create a filter for only the dropshadow, and apply it to a <use> tag that references the source shape.

There are other advantages to this approach. For example, now you can apply separate styling to just the shadow.

#arrow-shadow {  	opacity:0.5;  }  g:hover #arrow-shadow {  	opacity:0.7;  }

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-50 -50 200 200" width="400px">  	<defs>  		<filter id="dropshadow" height="130%">  			<feGaussianBlur in="SourceAlpha" stdDeviation="3" />   			<feOffset dx="2" dy="2" result="offsetblur" />  		</filter>  	</defs>  	<g fill="#EEE">  		<use id="arrow-shadow" xlink:href="#polygon" filter="url(#dropshadow)"></use>  		<polygon id="polygon"  				points="58.263,0.056 100,41.85 58.263,83.641 30.662,83.641 62.438,51.866 0,51.866 0,31.611 62.213,31.611 30.605,0 58.263,0.056"/>  		  	</g>  </svg>