Sketch Masking SVG Exports

A chrome bug causes second use of an SVG on the page to render a black box instead of the SVG icon. Specifically, Chrome is rendering the mask on the second use instead of the icon.

These SVGs are created by exporting 16x16 art boards from Sketch. All that is being exported are black outlines on art boards. How can I export these files without a mask?

Found the problem. As usual, the answer is pretty obvious.

We generally mask icons so we can use color overrides in Sketch. When the mask attribute is selected in Sketch, that attribute carries over to the SVG code.

Here’s what our calendar icon looks like with the mask. Notice the extra code.

<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
    <path d="M13.7272727,2.27272727 L12.1363636,2.27272727 C11.9606367,2.27272727 11.8181818,2.41518213 11.8181818,2.59090909 L11.8181818,4.18181818 C11.8194717,4.50604487 11.5767864,4.77940217 11.2546897,4.81652785 C10.9325929,4.85365353 10.634082,4.64267586 10.5615756,4.32665777 C10.4890692,4.01063968 10.6657528,3.69063458 10.9718182,3.58363636 C11.0978015,3.53808857 11.1817612,3.41850957 11.1818182,3.28454545 L11.1818182,1.31818182 C11.1818182,1.14245485 11.0393633,1 10.8636364,1 C10.6879094,1 10.5454545,1.14245485 10.5454545,1.31818182 L10.5454545,2.27272727 L5.77272727,2.27272727 C5.59700031,2.27272727 5.45454545,2.41518213 5.45454545,2.59090909 L5.45454545,4.18181818 C5.45583529,4.50604487 5.21315,4.77940217 4.89105329,4.81652785 C4.56895658,4.85365353 4.27044562,4.64267586 4.19793924,4.32665777 C4.12543286,4.01063968 4.30211649,3.69063458 4.60818182,3.58363636 C4.7341651,3.53808857 4.81812482,3.41850957 4.81818182,3.28454545 L4.81818182,1.31818182 C4.81818182,1.14245485 4.67572697,1 4.5,1 C4.32427303,1 4.18181818,1.14245485 4.18181818,1.31818182 L4.18181818,2.27272727 L2.27272727,2.27272727 C1.56981941,2.27272727 1,2.84254668 1,3.54545455 L1,13.7272727 C1,14.4301806 1.56981941,15.0000107 2.27272727,15.0000107 L11.3663636,15.0000107 C11.535511,15.0009779 11.698088,14.9345732 11.8181818,14.8154545 L14.8154545,11.8181818 C14.9345732,11.698088 15.0009779,11.535511 15.0000107,11.3663636 L15.0000107,3.54545455 C15.0000107,2.84254668 14.4301806,2.27272727 13.7272727,2.27272727 Z M13.7272727,11.1818182 L12.4545455,11.1818182 C11.7516376,11.1818182 11.1818182,11.7516376 11.1818182,12.4545455 L11.1818182,13.7272727 L2.27272727,13.7272727 L2.27272727,6.09090909 L13.7272727,6.09090909 L13.7272727,11.1818182 Z" id="path-1"></path>
</defs>
<g id="Worksheet" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="calendar" transform="translate(-1.000000, -1.000000)">
        <mask id="mask-2" fill="white">
            <use xlink:href="#path-1"></use>
        </mask>
        <use id="calendar" fill="#000000" fill-rule="nonzero" xlink:href="#path-1"></use>
    </g>
</g>