SVG <symbol> won't scale like the others

Question

I'm having trouble with a particular icon not scaling. If you go to this plunker you'll see the very first icon (the cup with the pencil, paint brush and ruler) doesn't respond to the space like every other svg element on the page.

I designed them all in Illustrator cc18 using save to generate the svg code.

For that particular icon Illustrator gives me this code.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="illustration_x5F_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 x="0px" y="0px" viewBox="0 0 79 146" style="enable-background:new 0 0 79 146;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;}
</style>
<rect id="cup" x="0.6777539" y="67.352684" class="st0" width="77.6444931" height="77.647316"/>
<path id="ruler_x5F_shape" class="st0" d="M47.0672798,19.394165v45.8275757h1.1456909v-1.1456909h4.5957031v1.1456909h12.6415443
V19.394165H47.0672798z M48.2129707,22.8312378h4.5957031v1.1456909h-4.5957031V22.8312378z M48.2129707,27.4140015h4.5957031
v1.1456909h-4.5957031V27.4140015z M48.2129707,31.9967651h4.5957031v1.1456909h-4.5957031V31.9967651z M48.2129707,36.5795288
h4.5957031v1.1456909h-4.5957031V36.5795288z M48.2129707,41.1622925h4.5957031v1.1456909h-4.5957031V41.1622925z
 M48.2129707,45.7450562h4.5957031v1.1456909h-4.5957031V45.7450562z M48.2129707,50.3278198h4.5957031v1.1456909h-4.5957031
V50.3278198z M48.2129707,54.9105835h4.5957031v1.1456909h-4.5957031V54.9105835z M48.2129707,59.4932861h4.5957031v1.1456909
h-4.5957031V59.4932861z M57.404438,62.9303589h-9.1914673V61.784668h9.1914673V62.9303589z M57.404438,58.3475952h-9.1914673
v-1.1456909h9.1914673V58.3475952z M57.404438,53.7648926h-9.1914673v-1.1456909h9.1914673V53.7648926z M57.404438,49.1821289
h-9.1914673V48.036438h9.1914673V49.1821289z M57.404438,44.5993652h-9.1914673v-1.1456909h9.1914673V44.5993652z
 M57.404438,40.0166016h-9.1914673v-1.1456909h9.1914673V40.0166016z M57.404438,35.4338379h-9.1914673V34.288147h9.1914673
V35.4338379z M57.404438,30.8510742h-9.1914673v-1.1456909h9.1914673V30.8510742z M57.404438,26.2683105h-9.1914673v-1.1456909
h9.1914673V26.2683105z M57.404438,21.6855469h-9.1914673V20.539856h9.1914673V21.6855469z"/>
<g id="paint_x5F_brush">
    <polygon id="paint_x5F_brush_x5F_shaft" class="st0" points="41.6965485,65.2217407 42.4845047,31.4855003 39.8335533,20.8818035 
    34.5317612,20.8818035 31.8808079,31.4855003 32.668766,65.2217407    "/>
    <path id="paint_x5F_brush_x5F_tip" class="st0" d="M40.7088737,19.7361126
    c0.7722778-1.1733189,1.775631-3.1726189,1.775631-5.6534939c0-5.1422243-7.0509987-7.2129793-5.3018494-13.0826187
    c-0.7470016,0.8390205-5.3017902,7.9498148-5.3017902,13.0826187c0,2.8539448,0.819376,4.633482,1.5470791,5.6534939H40.7088737z"
    />
</g>
<g id="pencil">
    <rect id="pencil_x5F_shaft" x="13.5497589" y="38.286869" class="st0" width="13.7482862" height="26.9348717"/>
    <polygon id="pencil_x5F_tip" class="st0" points="22.6059189,25.2016068 18.2418861,25.2016068 13.7645836,37.1411209 
    27.0832214,37.1411209   "/>
    <polygon id="pencil_x5F_lead" class="st0" points="20.4239025,19.3829746 18.456768,24.6287041 22.391037,24.6287041   "/>
</g>
</svg>

I then copy the code and place it in a <symbol> like this

<symbol viewbox="0 0 79 146" id="illustration_icon">
        <rect id="cup" x="0.6777539" y="67.352684" class="st0" width="77.6444931" height="77.647316"/>
        <path id="ruler_x5F_shape" class="st0" d="M47.0672798,19.394165v45.8275757h1.1456909v-1.1456909h4.5957031v1.1456909h12.6415443
            V19.394165H47.0672798z M48.2129707,22.8312378h4.5957031v1.1456909h-4.5957031V22.8312378z M48.2129707,27.4140015h4.5957031
            v1.1456909h-4.5957031V27.4140015z M48.2129707,31.9967651h4.5957031v1.1456909h-4.5957031V31.9967651z M48.2129707,36.5795288
            h4.5957031v1.1456909h-4.5957031V36.5795288z M48.2129707,41.1622925h4.5957031v1.1456909h-4.5957031V41.1622925z
             M48.2129707,45.7450562h4.5957031v1.1456909h-4.5957031V45.7450562z M48.2129707,50.3278198h4.5957031v1.1456909h-4.5957031
            V50.3278198z M48.2129707,54.9105835h4.5957031v1.1456909h-4.5957031V54.9105835z M48.2129707,59.4932861h4.5957031v1.1456909
            h-4.5957031V59.4932861z M57.404438,62.9303589h-9.1914673V61.784668h9.1914673V62.9303589z M57.404438,58.3475952h-9.1914673
            v-1.1456909h9.1914673V58.3475952z M57.404438,53.7648926h-9.1914673v-1.1456909h9.1914673V53.7648926z M57.404438,49.1821289
            h-9.1914673V48.036438h9.1914673V49.1821289z M57.404438,44.5993652h-9.1914673v-1.1456909h9.1914673V44.5993652z
             M57.404438,40.0166016h-9.1914673v-1.1456909h9.1914673V40.0166016z M57.404438,35.4338379h-9.1914673V34.288147h9.1914673
            V35.4338379z M57.404438,30.8510742h-9.1914673v-1.1456909h9.1914673V30.8510742z M57.404438,26.2683105h-9.1914673v-1.1456909
            h9.1914673V26.2683105z M57.404438,21.6855469h-9.1914673V20.539856h9.1914673V21.6855469z"/>
        <g id="paint_x5F_brush">
            <polygon id="paint_x5F_brush_x5F_shaft" class="st0" points="41.6965485,65.2217407 42.4845047,31.4855003 39.8335533,20.8818035 
                34.5317612,20.8818035 31.8808079,31.4855003 32.668766,65.2217407    "/>
            <path id="paint_x5F_brush_x5F_tip" class="st0" d="M40.7088737,19.7361126
                c0.7722778-1.1733189,1.775631-3.1726189,1.775631-5.6534939c0-5.1422243-7.0509987-7.2129793-5.3018494-13.0826187
                c-0.7470016,0.8390205-5.3017902,7.9498148-5.3017902,13.0826187c0,2.8539448,0.819376,4.633482,1.5470791,5.6534939H40.7088737z"
                />
        </g>
        <g id="pencil">
            <rect id="pencil_x5F_shaft" x="13.5497589" y="38.286869" class="st0" width="13.7482862" height="26.9348717"/>
            <polygon id="pencil_x5F_tip" class="st0" points="22.6059189,25.2016068 18.2418861,25.2016068 13.7645836,37.1411209 
                27.0832214,37.1411209   "/>
            <polygon id="pencil_x5F_lead" class="st0" points="20.4239025,19.3829746 18.456768,24.6287041 22.391037,24.6287041   "/>
        </g>
    </symbol>

the way I'm using it in the HTML is the same for every icon which is like this

<div style="display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-auto-rows: 20vh;">

    <div style="grid-area:1/1/2/2;">
        <svg class="graphicA">
            <use xlink:href="assets/symbol_sprite.svg#illustration_icon" />
        </svg>
    </div>

    <div style="grid-area:1/2/2/3;">
        <svg class="graphicA">
            <use xlink:href="assets/symbol_sprite.svg#......" />
        </svg>
    </div>

    <div style="grid-area:1/3/2/4;">
        <svg class="graphicA">
            <use xlink:href="assets/symbol_sprite.svg#......" />
        </svg>
    </div>

    <!-- etc. etc. -->

</div>

You can refer to the plunker for the full code. Does anybody readily see what might be stopping this icon from scaling like the others?

Answer 1

There is a typo in the code, regarding viewBox.

<symbol viewbox="0 0 79 146" id="illustration_icon">

should be:

<symbol viewBox="0 0 79 146" id="illustration_icon">

Working version