Inline SVG not displaying on IE

Question

I've created an inline SVG that's embedded into a page for use as some custom icons. In testing, the icons display fine in Chrome, FF and Safari, but they're not appearing in IE.

Researching the issue it's not due to the page not displaying in standards mode. I tried to also set a width and height directly on the SVG itself as other's have suggested.

I created a codepen: http://codepen.io/anon/pen/wMLqgZ with the sample markup and stylesheet.

   <div style="height: 0; width: 0; position: absolute; visibility: hidden">
              <!-- inject:svg --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h129v129H0z"></path><path id="a" d="M0 0h129v129H0z"></path><path id="a" d="M0 0h129v129H0z"></path><path id="a" d="M0 0h129v129H0z"></path><path id="a" d="M0 0h129v129H0z"></path><path id="a" d="M0 0h129v129H0z"></path><path id="a" d="M0 0h129v129H0z"></path><path id="a" d="M0 0h129v129H0z"></path></defs><symbol id="brick-active" viewBox="0 0 129 129"><clipPath id="b"><use xlink:href="#a" overflow="visible"></use></clipPath><path class="brick-path" clip-path="url(#b)" fill="#fff" d="M66.1 73.8H51.9c-.3 0-.5.2-.5.5v11.6c0 .3.2.5.5.5h24.3c.3 0 .5-.2.5-.5V74.3c0-.3-.2-.5-.5-.5H66.1zM90.4 73.8H80.2c-.3 0-.5.2-.5.5v11.6c0 .3.2.5.5.5h10.1c.3 0 .5-.2.5-.5V74.3c.1-.3-.2-.5-.4-.5M37.8 86.4h10.1c.3 0 .5-.2.5-.5V74.3c0-.3-.2-.5-.5-.5H37.8c-.3 0-.5.2-.5.5v11.6c0 .3.2.5.5.5M51.9 55.2h24.2c.3 0 .5-.2.5-.5V43.1c0-.3-.2-.5-.5-.5H51.9c-.3 0-.5.2-.5.5v11.6c0 .3.3.5.5.5M80.2 55.2h10.1c.3 0 .5-.2.5-.5V43.1c0-.3-.2-.5-.5-.5H80.2c-.3 0-.5.2-.5.5v11.6c0 .3.3.5.5.5M37.8 55.2h10.1c.3 0 .5-.2.5-.5V43.1c0-.3-.2-.5-.5-.5H37.8c-.3 0-.5.2-.5.5v11.6c0 .3.2.5.5.5M90.9 58.7c0-.3-.2-.5-.5-.5H66.1c-.3 0-.5.2-.5.5v11.6c0 .3.2.5.5.5h24.2c.3 0 .5-.2.5-.5V58.7zM37.8 70.8H62c.3 0 .5-.2.5-.5V58.7c0-.3-.2-.5-.5-.5H37.8c-.3 0-.5.2-.5.5v11.6c0 .3.2.5.5.5"></path><path class="brick-path" clip-path="url(#b)" fill="#bf1e2e" d="M64.1 120.7c31.1 0 56.2-25.2 56.2-56.2 0-31.1-25.2-56.2-56.2-56.2S7.8 33.4 7.8 64.5s25.2 56.2 56.3 56.2"></path><path class="brick-path" clip-path="url(#b)" fill="#fff" d="M90.9 58.7v11.6c0 .3-.2.5-.5.5H66.1c-.3 0-.5-.2-.5-.5V58.7c0-.3.2-.5.5-.5h24.2c.3 0 .6.2.6.5M47.9 58.2H62c.3 0 .5.2.5.5v11.6c0 .3-.2.5-.5.5H37.8c-.3 0-.5-.2-.5-.5V58.7c0-.3.2-.5.5-.5h10.1zM37.3 85.9V74.3c0-.3.2-.5.5-.5h10.1c.3 0 .5.2.5.5v11.6c0 .3-.2.5-.5.5H37.8c-.3 0-.5-.2-.5-.5M51.4 85.9V74.3c0-.3.2-.5.5-.5h24.2c.3 0 .5.2.5.5v11.6c0 .3-.2.5-.5.5H51.9c-.2 0-.5-.2-.5-.5M79.7 85.9V74.3c0-.3.2-.5.5-.5h10.1c.3 0 .5.2.5.5v11.6c0 .3-.2.5-.5.5H80.2c-.2 0-.5-.2-.5-.5M90.9 43.1v11.6c0 .3-.2.5-.5.5H80.2c-.3 0-.5-.2-.5-.5V43.1c0-.3.2-.5.5-.5h10.1c.3 0 .6.2.6.5M76.7 54.7c0 .3-.2.5-.5.5H51.9c-.3 0-.5-.2-.5-.5V43.1c0-.3.2-.5.5-.5h24.3c.3 0 .5.2.5.5v11.6zM48.4 54.7c0 .3-.2.5-.5.5H37.8c-.3 0-.5-.2-.5-.5V43.1c0-.3.2-.5.5-.5h10.1c.3 0 .5.2.5.5v11.6z"></path><circle clip-path="url(#b)" fill="none" stroke="#fff" stroke-width="3" stroke-miterlimit="10" cx="64.5" cy="64.5" r="63"></circle></symbol><symbol id="brick" viewBox="0 0 129 129"><clipPath id="b"><use xlink:href="#a" overflow="visible"></use></clipPath><path class="brick-path" clip-path="url(#b)" fill="#231F20" d="M66.1 73.8H51.9c-.3 0-.5.2-.5.5v11.6c0 .3.2.5.5.5h24.3c.3 0 .5-.2.5-.5V74.3c0-.3-.2-.5-.5-.5H66.1zM90.4 73.8H80.2c-.3 0-.5.2-.5.5v11.6c0 .3.2.5.5.5h10.1c.3 0 .5-.2.5-.5V74.3c.1-.3-.2-.5-.4-.5M37.8 86.4h10.1c.3 0 .5-.2.5-.5V74.3c0-.3-.2-.5-.5-.5H37.8c-.3 0-.5.2-.5.5v11.6c0 .3.2.5.5.5M51.9 55.2h24.2c.3 0 .5-.2.5-.5V43.1c0-.3-.2-.5-.5-.5H51.9c-.3 0-.5.2-.5.5v11.6c0 .3.3.5.5.5M80.2 55.2h10.1c.3 0 .5-.2.5-.5V43.1c0-.3-.2-.5-.5-.5H80.2c-.3 0-.5.2-.5.5v11.6c0 .3.3.5.5.5M37.8 55.2h10.1c.3 0 .5-.2.5-.5V43.1c0-.3-.2-.5-.5-.5H37.8c-.3 0-.5.2-.5.5v11.6c0 .3.2.5.5.5M90.9 58.7c0-.3-.2-.5-.5-.5H66.1c-.3 0-.5.2-.5.5v11.6c0 .3.2.5.5.5h24.2c.3 0 .5-.2.5-.5V58.7zM37.8 70.8H62c.3 0 .5-.2.5-.5V58.7c0-.3-.2-.5-.5-.5H37.8c-.3 0-.5.2-.5.5v11.6c0 .3.2.5.5.5"></path><path class="brick-path" clip-path="url(#b)" fill="#FFF" d="M64.1 120.7c31.1 0 56.2-25.2 56.2-56.2 0-31.1-25.2-56.2-56.2-56.2S7.8 33.4 7.8 64.5s25.2 56.2 56.3 56.2"></path><path class="brick-path" clip-path="url(#b)" fill="#231F20" d="M90.9 58.7v11.6c0 .3-.2.5-.5.5H66.1c-.3 0-.5-.2-.5-.5V58.7c0-.3.2-.5.5-.5h24.2c.3 0 .6.2.6.5M47.9 58.2H62c.3 0 .5.2.5.5v11.6c0 .3-.2.5-.5.5H37.8c-.3 0-.5-.2-.5-.5V58.7c0-.3.2-.5.5-.5h10.1zM37.3 85.9V74.3c0-.3.2-.5.5-.5h10.1c.3 0 .5.2.5.5v11.6c0 .3-.2.5-.5.5H37.8c-.3 0-.5-.2-.5-.5M51.4 85.9V74.3c0-.3.2-.5.5-.5h24.2c.3 0 .5.2.5.5v11.6c0 .3-.2.5-.5.5H51.9c-.2 0-.5-.2-.5-.5M79.7 85.9V74.3c0-.3.2-.5.5-.5h10.1c.3 0 .5.2.5.5v11.6c0 .3-.2.5-.5.5H80.2c-.2 0-.5-.2-.5-.5M90.9 43.1v11.6c0 .3-.2.5-.5.5H80.2c-.3 0-.5-.2-.5-.5V43.1c0-.3.2-.5.5-.5h10.1c.3 0 .6.2.6.5M76.7 54.7c0 .3-.2.5-.5.5H51.9c-.3 0-.5-.2-.5-.5V43.1c0-.3.2-.5.5-.5h24.3c.3 0 .5.2.5.5v11.6zM48.4 54.7c0 .3-.2.5-.5.5H37.8c-.3 0-.5-.2-.5-.5V43.1c0-.3.2-.5.5-.5h10.1c.3 0 .5.2.5.5v11.6z"></path><circle clip-path="url(#b)" fill="none" stroke="#FFF" stroke-width="3" stroke-miterlimit="10" cx="64.5" cy="64.5" r="63"></circle></symbol><symbol id="design-active" viewBox="0 0 129 129"><clipPath id="b"><use xlink:href="#a" overflow="visible"></use></clipPath><path clip-path="url(#b)" class="circle-fill" fill="#bf1e2e" d="M64.5 120.7c31.1 0 56.2-25.2 56.2-56.2 0-31.1-25.2-56.2-56.2-56.2-31.1 0-56.2 25.1-56.2 56.2s25.1 56.2 56.2 56.2M48.2 87.9l-2.4-2.4 13.7-13.7 2.4 2.4-13.7 13.7zm-4.5-4.5l-3.1-3.1 13.7-13.7 3.1 3.1-13.7 13.7zm22.5-9.2l-1.1-1.1L64 72l-2.4-2.4-2.1-2.1-3.1-3.1-1.1-1.1-1.1-1.1-4.9-4.9-1.1-1.1-1.1-1.1-3-3-.8-.8 2.6-2.6 1.4 1.4 2.3 2.3 1.1 1.1 1.1 1.1 4.9 4.9 1.1 1.1 1.1 1.1 3.1 3.1 2.1 2.1 2.4 2.4 1.1 1.1 1.1 1.1 13.7 13.7-2.6 2.6-13.6-13.6zm20 11.7l3.5-3.5 3.8 3.8-7.6 7.6-3.8-3.8 3.3-3.3m8-50.3l-3 6.7-3.8-3.8 6.8-2.9zm-9.8 4.2L89 46l-1.8 4-7.7-7.7 4.1-1.7zm-.8 12.8l-2 2-1.1 1.1-1.1 1.1-4.9 4.9-2.3-2.5 4.9-4.9 1.1-1.1 1.1-1.1 2.6-2.6 1.2-1.2 2.4 2.4-1.9 1.9zm1.7 2.5l-.1.2V56l.1-.1zm-13.4-6l1.1-1.1 1.1-1.1L77 44l.6.6L80 47l-.6.6-3.1 3.1-1.1 1.1-1.1 1.2-4.9 4.9-3.1-3.1 5-4.9zm-17.2-3.2l1.1 1.1 1.1 1.1 1.1 1.1 4.9 4.9 1.1 1.1 1.1 1.1 3.1 3.1 2.1 2.1 2.4 2.4 1.1 1.1 1.1 1.1 13.7 13.7-2.8 2.8-14-14-1.1-1.1-1.1-1.1-2.3-2.2-2.1-2.1-3.1-3.1-1.1-1.1-1.1-1.1-4.9-4.9-1.1-1.1-1.1-1.1-1.8-1.8-2-2 2.8-2.8 2.9 2.8zm-5-4.5l-7.1 7.1-1.3-3 5.4-5.4 3 1.3zM43 39.5l-3.8 3.8-2.9-6.8 6.7 3zm-4.5 43l7.6 7.6-3.8 3.8-7.6-7.6 3.8-3.8z"></path><path clip-path="url(#b)" fill="#FFF" d="M84.5 55.9l-.1.1v.1z"></path><path transform="rotate(45 40.432 88.153)" clip-path="url(#b)" class="design-poly" fill="#fff" d="M35.1 85.5h10.7v5.3H35.1z"></path><path clip-path="url(#b)" class="design-poly" fill="#fff" d="M93.4 36.4l-6.8 2.9 3.7 3.8zM89 46l-5.4-5.4-4.1 1.7 7.7 7.7zM74.1 53l1.1-1.1 1.1-1 3.1-3.2.6-.6-2.4-2.4-.6-.7-3.8 3.8-1.1 1.1-1 1-4.9 4.9 3.1 3.1z"></path><path transform="rotate(-135 49.056 75.03)" clip-path="url(#b)" class="design-poly" fill="#fff" d="M46.9 65.3h4.3v19.4h-4.3z"></path><path transform="rotate(135 53.904 79.877)" clip-path="url(#b)" class="design-poly" fill="#fff" d="M44.2 78.2h19.4v3.4H44.2z"></path><path clip-path="url(#b)" class="design-poly" fill="#fff" d="M82.2 49.2L81 50.4 78.4 53l-1.1 1.1-1 1-4.9 4.9 2.4 2.4 4.8-4.9 1.1-1.1 1.1-1 2-2 1.7-1.8z"></path><path transform="rotate(45 87.738 88.152)" clip-path="url(#b)" class="design-poly" fill="#fff" d="M85.1 82.8h5.3v10.7h-5.3z"></path><path clip-path="url(#b)" class="design-poly" fill="#fff" d="M43 39.5l-6.7-3 2.9 6.8zM41.8 49.2l7.1-7-3-1.4-5.4 5.4zM64.1 72.1l1 1 1.1 1.1 13.7 13.7 2.7-2.6-13.8-13.7-1-1.1-1.1-1.1-2.4-2.3-2.1-2.1-3.1-3.1-1-1.1-1.1-1-4.9-4.9-1-1.1-1.1-1-2.3-2.4-1.4-1.4-2.7 2.6.8.8 3 3 1.1 1 1 1.1 4.9 4.9 1 1 1.1 1.1 3.1 3.1 2.1 2.1zM50.3 48.8l1.8 1.8 1.1 1.1 1.1 1.1 4.8 4.8 1.1 1.1 1.1 1.1 3 3 2.2 2.2 2.3 2.3 1.1 1.1 1 1 13.8 13.8 2.8-2.8-13.7-13.8-1.1-1-1-1.1-2.4-2.4-2.1-2.1-3.1-3.1-1.1-1-1-1.1-4.9-4.9-1.1-1-1-1.1-1.1-1.1-2.7-2.7-2.8 2.9z"></path><circle class="design-circle" clip-path="url(#b)" fill="none" stroke="#FFF" stroke-width="3" stroke-miterlimit="10" cx="64.5" cy="64.5" r="63"></circle></symbol><symbol id="design" viewBox="0 0 129 129"><clipPath id="b"><use xlink:href="#a" overflow="visible"></use></clipPath><path clip-path="url(#b)" class="circle-fill" fill="#FFF" d="M64.5 120.7c31.1 0 56.2-25.2 56.2-56.2 0-31.1-25.2-56.2-56.2-56.2-31.1 0-56.2 25.1-56.2 56.2s25.1 56.2 56.2 56.2M48.2 87.9l-2.4-2.4 13.7-13.7 2.4 2.4-13.7 13.7zm-4.5-4.5l-3.1-3.1 13.7-13.7 3.1 3.1-13.7 13.7zm22.5-9.2l-1.1-1.1L64 72l-2.4-2.4-2.1-2.1-3.1-3.1-1.1-1.1-1.1-1.1-4.9-4.9-1.1-1.1-1.1-1.1-3-3-.8-.8 2.6-2.6 1.4 1.4 2.3 2.3 1.1 1.1 1.1 1.1 4.9 4.9 1.1 1.1 1.1 1.1 3.1 3.1 2.1 2.1 2.4 2.4 1.1 1.1 1.1 1.1 13.7 13.7-2.6 2.6-13.6-13.6zm20 11.7l3.5-3.5 3.8 3.8-7.6 7.6-3.8-3.8 3.3-3.3m8-50.3l-3 6.7-3.8-3.8 6.8-2.9zm-9.8 4.2L89 46l-1.8 4-7.7-7.7 4.1-1.7zm-.8 12.8l-2 2-1.1 1.1-1.1 1.1-4.9 4.9-2.3-2.5 4.9-4.9 1.1-1.1 1.1-1.1 2.6-2.6 1.2-1.2 2.4 2.4-1.9 1.9zm1.7 2.5l-.1.2V56l.1-.1zm-13.4-6l1.1-1.1 1.1-1.1L77 44l.6.6L80 47l-.6.6-3.1 3.1-1.1 1.1-1.1 1.2-4.9 4.9-3.1-3.1 5-4.9zm-17.2-3.2l1.1 1.1 1.1 1.1 1.1 1.1 4.9 4.9 1.1 1.1 1.1 1.1 3.1 3.1 2.1 2.1 2.4 2.4 1.1 1.1 1.1 1.1 13.7 13.7-2.8 2.8-14-14-1.1-1.1-1.1-1.1-2.3-2.2-2.1-2.1-3.1-3.1-1.1-1.1-1.1-1.1-4.9-4.9-1.1-1.1-1.1-1.1-1.8-1.8-2-2 2.8-2.8 2.9 2.8zm-5-4.5l-7.1 7.1-1.3-3 5.4-5.4 3 1.3zM43 39.5l-3.8 3.8-2.9-6.8 6.7 3zm-4.5 43l7.6 7.6-3.8 3.8-7.6-7.6 3.8-3.8z"></path><path clip-path="url(#b)" fill="#FFF" d="M84.5 55.9l-.1.1v.1z"></path><path transform="rotate(45 40.432 88.153)" clip-path="url(#b)" class="design-poly" fill="#231F20" d="M35.1 85.5h10.7v5.3H35.1z"></path><path clip-path="url(#b)" class="design-poly" fill="#231F20" d="M93.4 36.4l-6.8 2.9 3.7 3.8zM89 46l-5.4-5.4-4.1 1.7 7.7 7.7zM74.1 53l1.1-1.1 1.1-1 3.1-3.2.6-.6-2.4-2.4-.6-.7-3.8 3.8-1.1 1.1-1 1-4.9 4.9 3.1 3.1z"></path><path transform="rotate(-135 49.056 75.03)" clip-path="url(#b)" class="design-poly" fill="#231F20" d="M46.9 65.3h4.3v19.4h-4.3z"></path><path transform="rotate(135 53.904 79.877)" clip-path="url(#b)" class="design-poly" fill="#231F20" d="M44.2 78.2h19.4v3.4H44.2z"></path><path clip-path="url(#b)" class="design-poly" fill="#231F20" d="M82.2 49.2L81 50.4 78.4 53l-1.1 1.1-1 1-4.9 4.9 2.4 2.4 4.8-4.9 1.1-1.1 1.1-1 2-2 1.7-1.8z"></path><path transform="rotate(45 87.738 88.152)" clip-path="url(#b)" class="design-poly" fill="#231F20" d="M85.1 82.8h5.3v10.7h-5.3z"></path><path clip-path="url(#b)" class="design-poly" fill="#231F20" d="M43 39.5l-6.7-3 2.9 6.8zM41.8 49.2l7.1-7-3-1.4-5.4 5.4zM64.1 72.1l1 1 1.1 1.1 13.7 13.7 2.7-2.6-13.8-13.7-1-1.1-1.1-1.1-2.4-2.3-2.1-2.1-3.1-3.1-1-1.1-1.1-1-4.9-4.9-1-1.1-1.1-1-2.3-2.4-1.4-1.4-2.7 2.6.8.8 3 3 1.1 1 1 1.1 4.9 4.9 1 1 1.1 1.1 3.1 3.1 2.1 2.1zM50.3 48.8l1.8 1.8 1.1 1.1 1.1 1.1 4.8 4.8 1.1 1.1 1.1 1.1 3 3 2.2 2.2 2.3 2.3 1.1 1.1 1 1 13.8 13.8 2.8-2.8-13.7-13.8-1.1-1-1-1.1-2.4-2.4-2.1-2.1-3.1-3.1-1.1-1-1-1.1-4.9-4.9-1.1-1-1-1.1-1.1-1.1-2.7-2.7-2.8 2.9z"></path><circle class="design-circle" clip-path="url(#b)" fill="none" stroke="#FFF" stroke-width="3" stroke-miterlimit="10" cx="64.5" cy="64.5" r="63"></circle></symbol><symbol id="house-active" viewBox="0 0 129 129"><path fill="#bf1e2e" d="M43.1 45.1l5.2-2.7v-4.5H43v7.2zM43 92.3h13.5V78.2h17.2v14.1h13.5V56.5H43v35.8zm27.7-27.8h10v10h-10v-10zm-21.2 0h10v10h-10v-10zM90.2 50.7l-1.5-.8-1.5-.8-1.8-1-2.8-1.5-2.9-1.5-15.1-7.9-13.3 7-1.5.8-.3.1-1.2.7-1.6.8-2.9 1.5-.8.5-1.5.8-1.5.8-6.3 3.3h61.8z"></path><path fill="#bf1e2e" d="M52.5 67.5h4v4h-4zM73.7 67.5h4v4h-4zM59.5 81.2h11.2v11.1H59.5z"></path><clipPath id="b"><use xlink:href="#a" overflow="visible"></use></clipPath><path clip-path="url(#b)" fill="#bf1e2e" d="M64.6 8.3c-31 0-56.2 25.1-56.2 56.2s25.2 56.2 56.2 56.2 56.2-25.2 56.2-56.2c.1-31.1-25.1-56.2-56.2-56.2"></path><path clip-path="url(#b)" fill="#fff" d="M90.2 53.5H33.7l6.3-3.3 1.5-.8 1.5-.8.8-.5 2.9-1.5 1.6-.8 1.2-.7.3-.1 1.5-.8 13.3-7 15.1 7.9 2.9 1.5 2.8 1.5 1.8 1 1.5.8 1.5.8 5.3 2.8zM59.5 81.2h11.2v11.1H59.5zM43 37.9h5.3v4.5l-5.2 2.7H43z"></path><circle clip-path="url(#b)" fill="none" stroke="#fff" stroke-width="3" stroke-miterlimit="10" cx="64.5" cy="64.5" r="63"></circle><path clip-path="url(#b)" fill="#fff" d="M73.7 67.5h4v4h-4zM52.5 67.5h4v4h-4z"></path><path clip-path="url(#b)" fill="#fff" d="M43 56.5v35.8h13.5V78.2h17.2v14.1h13.5V56.5H43zm16.5 18h-10v-10h10v10zm21.1 0h-10v-10h10v10z"></path></symbol><symbol id="house" viewBox="0 0 129 129"><path fill="#FFF" d="M43.1 45.1l5.2-2.7v-4.5H43v7.2zM43 92.3h13.5V78.2h17.2v14.1h13.5V56.5H43v35.8zm27.7-27.8h10v10h-10v-10zm-21.2 0h10v10h-10v-10zM90.2 50.7l-1.5-.8-1.5-.8-1.8-1-2.8-1.5-2.9-1.5-15.1-7.9-13.3 7-1.5.8-.3.1-1.2.7-1.6.8-2.9 1.5-.8.5-1.5.8-1.5.8-6.3 3.3h61.8z"></path><path fill="#FFF" d="M52.5 67.5h4v4h-4zM73.7 67.5h4v4h-4zM59.5 81.2h11.2v11.1H59.5z"></path><clipPath id="b"><use xlink:href="#a" overflow="visible"></use></clipPath><path clip-path="url(#b)" fill="#FFF" d="M64.6 8.3c-31 0-56.2 25.1-56.2 56.2s25.2 56.2 56.2 56.2 56.2-25.2 56.2-56.2c.1-31.1-25.1-56.2-56.2-56.2"></path><path clip-path="url(#b)" fill="#231F20" d="M90.2 53.5H33.7l6.3-3.3 1.5-.8 1.5-.8.8-.5 2.9-1.5 1.6-.8 1.2-.7.3-.1 1.5-.8 13.3-7 15.1 7.9 2.9 1.5 2.8 1.5 1.8 1 1.5.8 1.5.8 5.3 2.8zM59.5 81.2h11.2v11.1H59.5zM43 37.9h5.3v4.5l-5.2 2.7H43z"></path><circle clip-path="url(#b)" fill="none" stroke="#FFF" stroke-width="3" stroke-miterlimit="10" cx="64.5" cy="64.5" r="63"></circle><path clip-path="url(#b)" fill="#231F20" d="M73.7 67.5h4v4h-4zM52.5 67.5h4v4h-4z"></path><path clip-path="url(#b)" fill="#231F20" d="M43 56.5v35.8h13.5V78.2h17.2v14.1h13.5V56.5H43zm16.5 18h-10v-10h10v10zm21.1 0h-10v-10h10v10z"></path></symbol><symbol id="machine-active" viewBox="0 0 129 129"><clipPath id="b"><use xlink:href="#a" overflow="visible"></use></clipPath><path clip-path="url(#b)" fill="#bf1e2e" d="M64.1 8.3C33 8.3 7.8 33.4 7.8 64.5S33 120.7 64 120.7c31.1 0 56.2-25.2 56.2-56.2S95.1 8.3 64.1 8.3m35.1 79.2h-28c-.6.1-1.1 0-1.7 0H36.4c-5.1 0-9.2-4-9.2-9.1 0-2 .7-3.8 1.8-5.4V59.5h9.8c.8 0 1.2-.7 1.2-1.5V41.5h19l7 20c.2.6.8 1 1.4 1H75v8.7c.5.4 1 .9 1.4 1.4l7.2-5.6c.5-.3 1.1-.4 1.6-.2s.8.8.8 1.3.4 13.5 13.5 16.4c.7.2 1.3.9 1.2 1.6s-.7 1.4-1.5 1.4"></path><path clip-path="url(#b)" fill="#bf1e2e" d="M83.4 71L78 75.2c.4 1 .6 2.1.6 3.3 0 2.3-.9 4.4-2.3 6h15.4c-5.7-3.9-7.6-10-8.3-13.5M75.1 76c0-.1 0-.1-.1-.2-.2-.5-.6-1-.9-1.4-1.1-1.3-2.8-2-4.6-2H36.4c-3.4 0-6.2 2.7-6.2 6.1 0 .7.1 1.3.3 1.9.8 2.4 3.1 4 5.8 4H70c-.2 0-.5.1-.7.2h.1c.5 0 1-.1 1.4-.2h.1c2.7-.7 4.6-3.1 4.6-6 0-.5-.1-1-.2-1.5 0-.3-.1-.6-.2-.9m-36.3 4.5c-.5.3-1 .6-1.6.6-.6 0-1.2-.2-1.6-.6-.7-.5-1.1-1.3-1.1-2.2 0-1.5 1.2-2.8 2.8-2.8s2.8 1.2 2.8 2.8c-.1.9-.6 1.7-1.3 2.2m10.3 0c-.5.3-1 .6-1.6.6s-1.2-.2-1.6-.6c-.7-.5-1.1-1.3-1.1-2.2 0-1.5 1.2-2.8 2.8-2.8s2.8 1.2 2.8 2.8c-.2.9-.7 1.7-1.3 2.2m10.2 0c-.5.3-1 .6-1.6.6s-1.2-.2-1.6-.6c-.7-.5-1.1-1.3-1.1-2.2 0-1.5 1.2-2.8 2.8-2.8s2.8 1.2 2.8 2.8c-.2.9-.6 1.7-1.3 2.2m10.2 0c-.5.3-1 .6-1.6.6-.6 0-1.2-.2-1.6-.6-.7-.5-1.1-1.3-1.1-2.2 0-1.5 1.2-2.8 2.8-2.8 1.5 0 2.8 1.2 2.8 2.8-.2.9-.6 1.7-1.3 2.2m4.1-5.1c0 .3.1.7.3 1-.2-.3-.3-.6-.3-1M49 48.5h9v8h-9z"></path><path clip-path="url(#b)" fill="#fff" d="M36.4 87.5h33.1c.6 0 1.2.1 1.7 0h28.1c.8 0 1.4-.6 1.5-1.3.1-.8-.4-1.5-1.2-1.6-13.1-2.9-13.5-15.8-13.5-16.4 0-.6-.3-1.1-.8-1.3-.5-.2-1.1-.2-1.6.2l-7.2 5.6c-.4-.5-.9-1-1.4-1.4v-8.7h-7.5c-.6 0-1.2-.4-1.4-1l-7-20H40V58c0 .8-.4 1.5-1.2 1.5H29v13.6c-1.1 1.5-1.8 3.3-1.8 5.4 0 5 4.1 9 9.2 9m-6.2-8.9c0-3.4 2.8-6.1 6.2-6.1h33.1c1.9 0 3.5.7 4.6 2 .4.4.7.9.9 1.4 0 .1.1.1.1.2.1.3.3.6.3 1 .1.5.2 1 .2 1.5 0 2.9-2 5.3-4.6 6h-.1c-.5.1-.9 0-1.4 0H36.4c-2.7 0-5-1.6-5.8-4-.3-.7-.4-1.3-.4-2M83.4 71c.7 3.5 2.6 9.6 8.4 13.5H76.4c1.4-1.6 2.3-3.7 2.3-6 0-1.2-.2-2.3-.6-3.3l5.3-4.2zM49 48.5h9v8h-9v-8z"></path><path clip-path="url(#b)" fill="#fff" d="M35.5 80.5c.5.3 1 .6 1.6.6s1.2-.2 1.6-.6c.7-.5 1.1-1.3 1.1-2.2 0-1.5-1.2-2.8-2.8-2.8s-2.8 1.2-2.8 2.8c.2.9.7 1.7 1.3 2.2M45.8 80.5c.5.3 1 .6 1.6.6s1.2-.2 1.6-.6c.7-.5 1.1-1.3 1.1-2.2 0-1.5-1.2-2.8-2.8-2.8s-2.8 1.2-2.8 2.8c.1.9.6 1.7 1.3 2.2M56 80.5c.5.3 1 .6 1.6.6s1.2-.2 1.6-.6c.7-.5 1.1-1.3 1.1-2.2 0-1.5-1.2-2.8-2.8-2.8s-2.8 1.2-2.8 2.8c.2.9.6 1.7 1.3 2.2M66.2 80.5c.5.3 1 .6 1.6.6.6 0 1.2-.2 1.6-.6.7-.5 1.1-1.3 1.1-2.2 0-1.5-1.2-2.8-2.8-2.8s-2.8 1.2-2.8 2.8c.2.9.6 1.7 1.3 2.2"></path><circle clip-path="url(#b)" fill="none" stroke="#fff" stroke-width="3" stroke-miterlimit="10" cx="64.5" cy="64.5" r="63"></circle></symbol><symbol id="machine" viewBox="0 0 129 129"><clipPath id="b"><use xlink:href="#a" overflow="visible"></use></clipPath><path clip-path="url(#b)" fill="#FFF" d="M64.1 8.3C33 8.3 7.8 33.4 7.8 64.5S33 120.7 64 120.7c31.1 0 56.2-25.2 56.2-56.2S95.1 8.3 64.1 8.3m35.1 79.2h-28c-.6.1-1.1 0-1.7 0H36.4c-5.1 0-9.2-4-9.2-9.1 0-2 .7-3.8 1.8-5.4V59.5h9.8c.8 0 1.2-.7 1.2-1.5V41.5h19l7 20c.2.6.8 1 1.4 1H75v8.7c.5.4 1 .9 1.4 1.4l7.2-5.6c.5-.3 1.1-.4 1.6-.2s.8.8.8 1.3.4 13.5 13.5 16.4c.7.2 1.3.9 1.2 1.6s-.7 1.4-1.5 1.4"></path><path clip-path="url(#b)" fill="#FFF" d="M83.4 71L78 75.2c.4 1 .6 2.1.6 3.3 0 2.3-.9 4.4-2.3 6h15.4c-5.7-3.9-7.6-10-8.3-13.5M75.1 76c0-.1 0-.1-.1-.2-.2-.5-.6-1-.9-1.4-1.1-1.3-2.8-2-4.6-2H36.4c-3.4 0-6.2 2.7-6.2 6.1 0 .7.1 1.3.3 1.9.8 2.4 3.1 4 5.8 4H70c-.2 0-.5.1-.7.2h.1c.5 0 1-.1 1.4-.2h.1c2.7-.7 4.6-3.1 4.6-6 0-.5-.1-1-.2-1.5 0-.3-.1-.6-.2-.9m-36.3 4.5c-.5.3-1 .6-1.6.6-.6 0-1.2-.2-1.6-.6-.7-.5-1.1-1.3-1.1-2.2 0-1.5 1.2-2.8 2.8-2.8s2.8 1.2 2.8 2.8c-.1.9-.6 1.7-1.3 2.2m10.3 0c-.5.3-1 .6-1.6.6s-1.2-.2-1.6-.6c-.7-.5-1.1-1.3-1.1-2.2 0-1.5 1.2-2.8 2.8-2.8s2.8 1.2 2.8 2.8c-.2.9-.7 1.7-1.3 2.2m10.2 0c-.5.3-1 .6-1.6.6s-1.2-.2-1.6-.6c-.7-.5-1.1-1.3-1.1-2.2 0-1.5 1.2-2.8 2.8-2.8s2.8 1.2 2.8 2.8c-.2.9-.6 1.7-1.3 2.2m10.2 0c-.5.3-1 .6-1.6.6-.6 0-1.2-.2-1.6-.6-.7-.5-1.1-1.3-1.1-2.2 0-1.5 1.2-2.8 2.8-2.8 1.5 0 2.8 1.2 2.8 2.8-.2.9-.6 1.7-1.3 2.2m4.1-5.1c0 .3.1.7.3 1-.2-.3-.3-.6-.3-1M49 48.5h9v8h-9z"></path><path clip-path="url(#b)" d="M36.4 87.5h33.1c.6 0 1.2.1 1.7 0h28.1c.8 0 1.4-.6 1.5-1.3.1-.8-.4-1.5-1.2-1.6-13.1-2.9-13.5-15.8-13.5-16.4 0-.6-.3-1.1-.8-1.3-.5-.2-1.1-.2-1.6.2l-7.2 5.6c-.4-.5-.9-1-1.4-1.4v-8.7h-7.5c-.6 0-1.2-.4-1.4-1l-7-20H40V58c0 .8-.4 1.5-1.2 1.5H29v13.6c-1.1 1.5-1.8 3.3-1.8 5.4 0 5 4.1 9 9.2 9m-6.2-8.9c0-3.4 2.8-6.1 6.2-6.1h33.1c1.9 0 3.5.7 4.6 2 .4.4.7.9.9 1.4 0 .1.1.1.1.2.1.3.3.6.3 1 .1.5.2 1 .2 1.5 0 2.9-2 5.3-4.6 6h-.1c-.5.1-.9 0-1.4 0H36.4c-2.7 0-5-1.6-5.8-4-.3-.7-.4-1.3-.4-2M83.4 71c.7 3.5 2.6 9.6 8.4 13.5H76.4c1.4-1.6 2.3-3.7 2.3-6 0-1.2-.2-2.3-.6-3.3l5.3-4.2zM49 48.5h9v8h-9v-8z"></path><path clip-path="url(#b)" d="M35.5 80.5c.5.3 1 .6 1.6.6s1.2-.2 1.6-.6c.7-.5 1.1-1.3 1.1-2.2 0-1.5-1.2-2.8-2.8-2.8s-2.8 1.2-2.8 2.8c.2.9.7 1.7 1.3 2.2M45.8 80.5c.5.3 1 .6 1.6.6s1.2-.2 1.6-.6c.7-.5 1.1-1.3 1.1-2.2 0-1.5-1.2-2.8-2.8-2.8s-2.8 1.2-2.8 2.8c.1.9.6 1.7 1.3 2.2M56 80.5c.5.3 1 .6 1.6.6s1.2-.2 1.6-.6c.7-.5 1.1-1.3 1.1-2.2 0-1.5-1.2-2.8-2.8-2.8s-2.8 1.2-2.8 2.8c.2.9.6 1.7 1.3 2.2M66.2 80.5c.5.3 1 .6 1.6.6.6 0 1.2-.2 1.6-.6.7-.5 1.1-1.3 1.1-2.2 0-1.5-1.2-2.8-2.8-2.8s-2.8 1.2-2.8 2.8c.2.9.6 1.7 1.3 2.2"></path><circle clip-path="url(#b)" fill="none" stroke="#FFF" stroke-width="3" stroke-miterlimit="10" cx="64.5" cy="64.5" r="63"></circle></symbol></svg>
            <!-- endinject -->
            </div>

    <section id="services">
      <div class="callout-container container">
        <div class="row">


          <div class="services-container">
            <a class="service-link" href="">
              <div class="design">
                <svg version="1.1" viewBox="0 0 100 100" role="presentation">
                            <use class="default" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#design"></use>
                            <use class="active" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#design-active"></use>
                        </svg>
                <h2>Design</h2>
              </div>
            </a>
            <a class="service-link" href="">
              <div class="production">
                <svg version="1.1" viewBox="0 0 100 100" role="presentation">
                            <use class="default" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#machine"></use>
                            <use class="active" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#machine-active"></use>
                        </svg>
                <h2>Production</h2>
              </div>
            </a>
            <a class="service-link" href="">
              <div class="construction">
                <svg version="1.1" viewBox="0 0 100 100" role="presentation">
                            <use class="default" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#brick"></use>
                            <use class="active" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#brick-active"></use>
                        </svg>
                <h2>Construction</h2>
              </div>
            </a>
            <a class="service-link" href="">
              <div class="completion">
                <svg version="1.1" viewBox="0 0 100 100" role="presentation">
                            <use class="default" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#house"></use>
                            <use class="active" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#house-active"></use>
                        </svg>
                <h2>Completion</h2>
              </div>
            </a>
          </div>
        </div>
      </div>
    </section>

And the CSS is below:

svg {
  visibility: visible;
}

.service-link .active {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 0s, opacity .25s linear;
  -o-transition: visibility 0s, opacity .25s linear;
  transition: visibility 0s, opacity .25s linear;
}

.service-link:hover .active {
  visibility: visible;
  opacity: 1;
}

.service-link:hover .default {
  visibility: hidden;
  opacity: 0;
}

I've been working on this problem for a little while, but I'm at a wall. My next step maybe to re-render the SVGs from the source Illustrator file.

Any insights would be greatly appreciated.

UPDATE: I managed to re-render the SVGs and fixed some of the issues. The CodePen works in IE10, just not the site:

The icons are not fitting the container and the visibility/opacity effects aren't being applied.

Answer 1

Ultimately, what I discovered is that you don't need to specify height or width values, but it's important to specify viewbox values.

Also, I had to ensure that in addition to unique IDs, the SVG elements required unique classnames if they had any.