CSS shadow on SVG shape only, not entire document

Question

Is it possible to get CSS shadow on the SVG shape only, not entire document? Ie. around the blue arrow at:

a:after {
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, .50);
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(5px 5px 5px #222);
    content:"";
    position: absolute;
    background-image: url(http://www.domblogger.net/buttons/play.svg);
    background-repeat: no-repeat;
    background-position: 0;
    height: 350px;
    width: 350px;
}

<a href="#">Play</a>

Answer 1

If you mean that you want the dropshadow only on the arrow shape, then don't set the background color to white (first line of your a:after stylerule).

a:after {
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(5px 5px 5px #222);
    content:"";
    position: absolute;
    background-image: url(http://www.domblogger.net/buttons/play.svg);
    background-repeat: no-repeat;
    background-position: 0;
    height: 350px;
    width: 350px;
}

<a href="#">Play</a>