SVG-sprite, can't set

I try set two defferent svg logo to other background's divs, but something wrong

I have svg:

<?xml version="1.0" encoding="utf-8"?>
<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>


    <symbol id="facebook-logo-button" viewBox="0 0 49.652 49.652">
        <path d="M24.826 0C11.137 0 0 11.137 0 24.826c0 13.688 11.137 24.826 24.826 24.826 13.688 0 24.826-11.138 24.826-24.826C49.652 11.137 38.516 0 24.826 0zM31 25.7h-4.039v14.396h-5.985V25.7h-2.845v-5.088h2.845v-3.291c0-2.357 1.12-6.04 6.04-6.04l4.435.017v4.939h-3.219c-.524 0-1.269.262-1.269 1.386v2.99h4.56L31 25.7z" fill="#D80027"/>
    </symbol>
    <symbol id="facebook-logo" viewBox="0 0 90 90">
        <path d="M90 15.001C90 7.119 82.884 0 75 0H15C7.116 0 0 7.119 0 15.001v59.998C0 82.881 7.116 90 15.001 90H45V56H34V41h11v-5.844C45 25.077 52.568 16 61.875 16H74v15H61.875C60.548 31 59 32.611 59 35.024V41h15v15H59v34h16c7.884 0 15-7.119 15-15.001V15.001z" fill="#FFDA44"/>
    </symbol>

    <use xlink:href="#facebook-logo-button"/>
    <use xlink:href="#facebook-logo"/>

</svg>

I set Style for it:

.svg-ei-archive {
  width: 100px;
  height: 100px;
  background: url('../img/sprite.svg#facebook-logo-butto');
}

.svg-ei-archive2 {
  width: 100px;
  height: 100px;
  background: url('../img/sprite.svg#facebook-logo');
}

HTML :

<div class="svg-ei-archive"></div>
<div class="svg-ei-archive2"></div>

but I see these two logos together. What do i wrong? help please