Icon Filter Example

icon.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="500" height="500" viewBox="0 0 500 500" id="svg1" version="1.1">
    <defs id="defs2206">
        <linearGradient inkscape:collect="always" id="linearGradient2862">
            <stop id="stop2860" offset="0" style="stop-color:#c0c0c0;stop-opacity:1" />
            <stop style="stop-color:#c0c0c0;stop-opacity:1" offset="0.65951186" id="stop2858" />
            <stop id="stop2856" offset="1" style="stop-color:#ffffff;stop-opacity:1" />
        </linearGradient>
        <filter inkscape:collect="always" style="color-interpolation-filters:sRGB" id="filter2005" x="-0.029999999" width="1.0599999" y="-0.029999999" height="1.0599999">
            <feGaussianBlur inkscape:collect="always" stdDeviation="5.025" id="feGaussianBlur2007" />
        </filter>
        <linearGradient inkscape:collect="always" xlink:href="#linearGradient1976" id="linearGradient1978" x1="451" y1="49" x2="451" y2="451" gradientUnits="userSpaceOnUse" />
        <linearGradient inkscape:collect="always" id="linearGradient1976">
            <stop style="stop-color:#5cf87d;stop-opacity:1" offset="0" id="stop1972" />
            <stop style="stop-color:#0eba28;stop-opacity:1" offset="1" id="stop1974" />
        </linearGradient>
        <linearGradient inkscape:collect="always" xlink:href="#linearGradient2059" id="linearGradient2053" x1="95" y1="162" x2="95" y2="338" gradientUnits="userSpaceOnUse" />
        <linearGradient id="linearGradient2059" inkscape:collect="always">
            <stop id="stop2055" offset="0" style="stop-color:#ffffff;stop-opacity:1" />
            <stop style="stop-color:#ffffff;stop-opacity:1" offset="0.32912451" id="stop2061" />
            <stop id="stop2057" offset="1" style="stop-color:#b4b4b4;stop-opacity:1" />
        </linearGradient>
        <filter style="color-interpolation-filters:sRGB" id="filter2840" inkscape:label="Reflection">
            <feMorphology id="feMorphology2842" in="SourceAlpha" radius="6.5" result="result2" />
            <feOffset dx="0" dy="-15" id="feOffset2844" result="result1" />
            <feComposite in2="result1" id="feComposite2846" in="result2" operator="out" />
            <feGaussianBlur stdDeviation="9" id="feGaussianBlur2848" result="result3" />
            <feComposite in2="result3" id="feComposite2850" in="SourceGraphic" operator="out" />
        </filter>
        <linearGradient inkscape:collect="always" xlink:href="#linearGradient2862" id="linearGradient2854" gradientUnits="userSpaceOnUse" x1="95" y1="162" x2="95" y2="338" />
        <filter style="color-interpolation-filters:sRGB" id="filter2867" inkscape:label="Bevel">
            <feGaussianBlur stdDeviation="10" id="feGaussianBlur2869" result="result1" />
            <feComposite in2="result1" id="feComposite2871" in="SourceGraphic" operator="out" />
        </filter>
        <filter style="color-interpolation-filters:sRGB" id="filter2877" inkscape:label="DropShadow">
            <feGaussianBlur stdDeviation="4" id="feGaussianBlur2879" dy="14.699999999999999" />
            <feOffset dx="0" dy="4" id="feOffset2881" result="result1" />
            <feComposite in2="SourceGraphic" id="feComposite2883" in="result1" operator="out" />
        </filter>
    </defs>
    <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="1" inkscape:cx="280" inkscape:cy="242" inkscape:document-units="px" inkscape:current-layer="layer4" showgrid="false" units="px" inkscape:showpageshadow="false" borderlayer="true" inkscape:snap-bbox="true" inkscape:bbox-nodes="true" inkscape:snap-page="true" inkscape:snap-center="true" inkscape:snap-bbox-midpoints="false" inkscape:snap-object-midpoints="true" inkscape:window-width="1920" inkscape:window-height="1030" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" gridtolerance="20">
        <inkscape:grid type="xygrid" id="grid1" empspacing="10" dotted="false" />
        <inkscape:grid type="xygrid" id="grid2" originx="0.5" originy="0.5" empspacing="500000" dotted="true" />
    </sodipodi:namedview>
    <g inkscape:label="BG" inkscape:groupmode="layer" id="layer1" style="display:inline" sodipodi:insensitive="true">
        <rect ry="91" rx="91" y="55" x="49" height="402" width="402" id="rect1995" style="display:inline;opacity:0.23999999;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:100;stroke-opacity:0.99576272;paint-order:normal;filter:url(#filter2005)" />
        <rect style="display:inline;opacity:1;vector-effect:none;fill:url(#linearGradient1978);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:100;stroke-opacity:0.99576272;paint-order:normal" id="rect1964" width="402" height="402" x="49" y="49" rx="91" ry="91" />
    </g>
    <g inkscape:groupmode="layer" id="layer4" inkscape:label="Icon">
        <path d="m 358,180 c 21.38465,-18.3297 32,-2.67554 32,9 v 124 c 0,10.67187 -12.64732,23.93786 -31,8 l -38,-33 c -3.71598,-3.22703 -7,-8.07839 -7,-13 v -49 c 0,-6.11919 4.35397,-12.01769 9,-16 z m -210,-18 h 119 c 21.052,0 38,16.948 38,38 v 100 c 0,21.052 -16.948,38 -38,38 h -119 c -21.052,0 -38,-16.948 -38,-38 v -100 c 0,-21.052 16.948,-38 38,-38 z" style="display:inline;opacity:0.3;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:100;stroke-opacity:0.99576272;paint-order:normal;filter:url(#filter2877)" id="path2873" inkscape:connector-curvature="0" />
        <path d="m 358,180 c 21.38465,-18.3297 32,-2.67554 32,9 v 124 c 0,10.67187 -12.64732,23.93786 -31,8 l -38,-33 c -3.71598,-3.22703 -7,-8.07839 -7,-13 v -49 c 0,-6.11919 4.35397,-12.01769 9,-16 z m -210,-18 h 119 c 21.052,0 38,16.948 38,38 v 100 c 0,21.052 -16.948,38 -38,38 h -119 c -21.052,0 -38,-16.948 -38,-38 v -100 c 0,-21.052 16.948,-38 38,-38 z" style="display:inline;opacity:1;vector-effect:none;fill:url(#linearGradient2053);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:100;stroke-opacity:0.99576272;paint-order:normal;filter:url(#filter2840)" id="path920-0" inkscape:connector-curvature="0" />
        <path inkscape:connector-curvature="0" id="path2852" style="display:inline;opacity:1;vector-effect:none;fill:url(#linearGradient2854);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:100;stroke-opacity:0.99576272;paint-order:normal;filter:url(#filter2867)" d="m 358,180 c 21.38465,-18.3297 32,-2.67554 32,9 v 124 c 0,10.67187 -12.64732,23.93786 -31,8 l -38,-33 c -3.71598,-3.22703 -7,-8.07839 -7,-13 v -49 c 0,-6.11919 4.35397,-12.01769 9,-16 z m -210,-18 h 119 c 21.052,0 38,16.948 38,38 v 100 c 0,21.052 -16.948,38 -38,38 h -119 c -21.052,0 -38,-16.948 -38,-38 v -100 c 0,-21.052 16.948,-38 38,-38 z" />
    </g>
</svg>