Add shadow to an SVG icon

Question

i try to create two svg-icons

• one with a shadow
• and one with an inset-shadow

I tried many solutions but the shadow from my icon looks the hole time "wrong". I dont get it. Can somebody help me please.

I create a preview with photoshop, so u can better understand what i need.

FIDDLE HERE http://jsfiddle.net/7dghx0tr/

svg

<defs>


    <radialGradient id="rgrad" cx="50%" cy="50%" r="75%"   >
    <stop offset="0%" style="stop-color:#87e0fd;stop-opacity:1" />
    <stop offset="100%" style="stop-color:#05abe0;stop-opacity:1" />
    </radialGradient> 


 <filter id="drop-shadow">
  <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
  <feOffset dx="5" dy="5" result="offsetblur"/>
  <feFlood flood-color="#000000"/>
  <feComposite in2="offsetblur" operator="in"/>
  <feMerge>
    <feMergeNode/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>



    <style type="text/css" >
    <![CDATA[
        * {  stroke: #006584;  
                stroke-width: 0.3;  
                fill:url(#rgrad);}

            path {  stroke: #666666;  
            stroke-width: 0.1;  
            filter:url(#drop-shadow);}

    ]]>
    </style>

</defs>


<g>
    <path d="M33.437,13.872C30.938,9.97,41.322,4.599,34.753,0.46c-1.508-0.944-3.168,1.32-1.572,2.322
        c3.627,2.279-5.914,6.629-1.999,12.745C32.181,17.08,34.434,15.431,33.437,13.872z"/>
    <path d="M40.748,13.872c-2.507-3.914,7.894-9.268,1.314-13.412c-0.802-0.504-1.909-0.041-2.162,0.841
        c-0.652,2.274,3.575,0.756-0.135,5.835c-1.995,2.729-3.094,5.551-1.275,8.392C39.503,17.089,41.732,15.412,40.748,13.872z"/>
    <path d="M26.086,13.872C23.578,9.955,33.99,4.608,27.401,0.46c-1.503-0.946-3.17,1.319-1.572,2.322
        c3.601,2.263-5.892,6.665-1.999,12.745C24.833,17.08,27.08,15.434,26.086,13.872z"/>
    <path d="M31.563,33.913c15.729,0,24.001-4.011,24.001-7.331c0-3.832-10.432-7.489-23.49-7.322
        c-13.082-0.168-23.489,3.5-23.489,7.322C8.585,30.123,17.818,33.913,31.563,33.913z M31.87,21.226c0.048,0,0.096,0,0.145,0.002
        v0.001c0.02,0,0.04-0.001,0.06-0.001c0.021,0,0.04,0.001,0.06,0.001v-0.001c0.049-0.001,0.097-0.002,0.145-0.002
        c9.891,0,19.903,1.744,19.903,5.075c0,4.3-15.53,5.176-20.048,5.074v-0.001c0,0-0.118,0-0.119,0v0.001
        c-4.641,0.106-20.046-0.805-20.046-5.074C11.969,22.969,21.979,21.226,31.87,21.226z"/>
    <path d="M17.636,28.765l0.08-4.949c-2.973,0.763-4.62,1.697-4.62,2.484C13.096,27.081,14.714,28.006,17.636,28.765z"/>
    <path d="M24.491,22.697c-1.673,0.164-3.178,0.376-4.511,0.625l-0.094,5.941c1.332,0.251,2.84,0.468,4.516,0.634L24.491,22.697z"/>
    <path d="M31.258,22.361c-1.595,0.012-3.098,0.067-4.51,0.157l-0.094,7.561c1.41,0.092,2.914,0.148,4.509,0.162L31.258,22.361z"/>
    <path d="M56.106,28.697c-0.004-0.068-0.022-0.134-0.03-0.202c-3.37,5.298-17.273,6.637-23.942,6.539v-0.002c0,0-0.117,0-0.119,0
        v0.002c-8.507,0.125-20.9-1.76-23.941-6.539c-0.009,0.068-0.027,0.134-0.03,0.202c-2.588,0.566-3.726,1.76-3.654,3.796
        c0.061,1.724,2.262,3.215,5.128,4.063c1.798,4.475,5.129,8.107,9.418,10.506l-6.173,14.399c-0.369,0.857,0.029,1.854,0.889,2.221
        c0.216,0.092,0.442,0.137,0.665,0.137c0.656,0,1.28-0.384,1.555-1.024l6.126-14.29c5.895,2.286,13.754,2.481,20.156,0l6.126,14.29
        c0.274,0.641,0.898,1.024,1.555,1.024c0.223,0,0.449-0.045,0.665-0.137c0.86-0.367,1.259-1.363,0.89-2.221l-6.174-14.399
        c4.289-2.398,7.619-6.031,9.419-10.506c2.865-0.848,5.065-2.339,5.128-4.063C59.831,30.457,58.694,29.263,56.106,28.697z
         M7.219,32.812c-0.049-0.926,0.094-1.466,0.917-1.815c0.115,1.139,0.338,2.233,0.625,3.297C7.835,33.934,7.25,33.442,7.219,32.812z
         M55.388,34.294c0.288-1.064,0.511-2.159,0.626-3.297c0.821,0.349,0.965,0.889,0.916,1.815
        C56.898,33.442,56.313,33.934,55.388,34.294z"/>
    <path d="M51.054,26.3c0-0.787-1.647-1.722-4.62-2.484l0.079,4.949C49.435,28.006,51.054,27.081,51.054,26.3z"/>
    <path d="M44.262,29.262l-0.093-5.941c-1.334-0.248-2.839-0.461-4.511-0.625l0.089,7.199C41.423,29.73,42.93,29.514,44.262,29.262z"
        />
    <path d="M37.496,30.079l-0.095-7.561c-1.412-0.09-2.915-0.145-4.51-0.157l0.096,7.879C34.582,30.227,36.085,30.171,37.496,30.079z"
        />
</g>
</svg>

Answer 1

Well for a start, you are applying the filter to every path element in the file. You only want to apply it to the parent <g>.

Move the filter from <path> and apply it only to the <g>.

path {
    stroke: #666666;  
    stroke-width: 0.1;  
}

g {
    filter:url(#drop-shadow);
}

I think you will begin to make progress then.