Firefox и IE не рендерит SVG

Question

У меня есть набор изображений SVG, которые прекрасно отображаются в Chrome и Opera, но не отображаются в FF, IE11 и Edge. Вот один такой источник SVG:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="17px" viewBox="0 0 16 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->
    <title>bin</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="add-to-cart" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M1.77777778,4.44355556 L1.77777778,15.1102222 C1.77777778,16.0897778 2.57511111,16.888 3.55555556,16.888 L12.4444444,16.888 C13.4248889,16.888 14.2222222,16.0897778 14.2222222,15.1102222 L14.2222222,4.44355556 L1.77777778,4.44355556 Z M7.11111111,13.3333333 L5.33333333,13.3333333 L5.33333333,8 L7.11111111,8 L7.11111111,13.3333333 Z M10.6666667,13.3333333 L8.88888889,13.3333333 L8.88888889,8 L10.6666667,8 L10.6666667,13.3333333 Z M10.6666667,1.77688889 L16,1.77688889 L16,3.55466667 L0,3.55466667 L0,1.77688889 L5.33333333,1.77688889 L5.33333333,0 L10.6666667,0 L10.6666667,1.77688889 Z" id="bin" fill="#00cc66" fill-rule="nonzero"></path>
    </g>
</svg>

SVG отображается в HTML примерно так:

<div id="tools">
    <div id="clearbutton" class="button" title="Clear Drawings">
        <svg>
            <image href="image/bin.svg" />
        </svg>
    </div>
</div>

CSS:

svg {
    width: 28px;
    height: 28px;
    padding: 8px 6px 6px 6px;
}

svg image {
    width: 16px;
    height: 100%;
}

Я пытался изменить и отключить явные свойства ширины / высоты в CSS, но безрезультатно. Размер тега svg изменяется до любого большого размера, однако тег изображения остается 0 x 0.

В Chrome и Opera изображение отображается правильно. В других браузерах я вижу, что размер установлен на 0 x 0. Когда я открываю изображение отдельно в FF, оно отображается нормально. На вкладке FF network я вижу изображение в поле «response», оно также говорит «Size: 16 x 17» в поле «response». То же самое в краю. В IE11 поле «response» показывает изображение, но говорит «Size: 0 x 0».

Я заметил, что IE жалуется, что я должен использовать явный закрывающий тег для тега "image". Firefox автоматически добавляет это:

<image href="image/bin.svg"></image>

Однако, даже если я добавлю закрывающие теги, он все равно не будет работать.

Я думаю, что-то не так с этим SVG или с тем, как я его отображаю. К сожалению, я не могу дать вам публичную ссылку на сайт, он находится в стадии разработки и будет доступен только зарегистрированным пользователям позже.