Попробуйте следующее: удалите ширину и высоту элемента svg и используйте это viewBox="427.6 446 225 187". Поскольку вы собираетесь использовать svg внутри документа html, вам не нужно использовать пространства имен.
Чтобы узнать, какой viewBox использовать, я добавил идентификатор к элементу <g>, который оборачивает все формы внутри. Затем в javascript I'm console.log(elSVG.getBBox()) Это возвращает объект SVGRect со следующими свойствами: x, y, width, height. Затем я использую эти свойства для определения нового значения viewBox, например: viewBox="x y width height". Теперь элемент svg примет всю доступную ширину, то есть ширину родительского элемента.
Также я удалил элемент стиля, так как вы можете использовать css вместо
.st0 {
fill: #F9BC60;
}
<svg viewBox="427.6 446 225 187">
<g id="elSVG">
<g>
<polygon class="st0" points="470.04,589.59 456.54,589.59 497.02,490.41 510.52,490.41 " />
<path class="st0" d="M608.83,490.41l-44.35,24.24v13.3v0.02v15.53l30.89,15.16l-30.89,15.28v15.65l44.35-24.24v-13.3v-0.02V536.5
l-30.89-15.16l30.89-15.28V490.41z M607.51,564.56l-41.7,22.8v-12.6l30.16-14.92l2.4-1.19l-2.41-1.18l-30.16-14.8v-12.5
l41.7,22.64L607.51,564.56L607.51,564.56z" />
<path class="st0"
d="M547.92,509.18v15.65l-30.89,15.28l30.89,15.16v15.55l-44.35-24.08v-13.31L547.92,509.18z" />
</g>
<path class="st0"
d="M652.33,633.55H427.67v-187.1h224.65v187.1H652.33z M441.54,619.68h196.92V460.32H441.54V619.68z" />
</g>
</svg>
ОБНОВЛЕНИЕ
OP комментирует;
Я хотел спросить, могу ли я просто отредактировать ширину / высоту, чтобы увеличить или уменьшить размер SVG, если он использовался где-то еще, где требовалось более точное управление? Или мне нужно изменить какие-либо другие значения?
Элемент svg будет принимать всю доступную ширину, то есть ширину родительского элемента.
В качестве альтернативы вы можете добавить ширину в CSS. Избегайте использования ширины и высоты или, по крайней мере, сохраняйте одно и то же соотношение сторон.
Если вам нужно использовать один и тот же значок несколько раз, вы можете создать новый элемент svg с тем же viewBox, и вместо повторения кода вы можете повторно использовать то, что в моем коде <g id="elSVG">
.st0 {fill: #F9BC60;}
svg:nth-of-type(1){width:50px}
svg:nth-of-type(2){width:150px}
<svg viewBox="427.6 446 225 187">
<g id="elSVG">
<g>
<polygon class="st0" points="470.04,589.59 456.54,589.59 497.02,490.41 510.52,490.41 " />
<path class="st0" d="M608.83,490.41l-44.35,24.24v13.3v0.02v15.53l30.89,15.16l-30.89,15.28v15.65l44.35-24.24v-13.3v-0.02V536.5
l-30.89-15.16l30.89-15.28V490.41z M607.51,564.56l-41.7,22.8v-12.6l30.16-14.92l2.4-1.19l-2.41-1.18l-30.16-14.8v-12.5
l41.7,22.64L607.51,564.56L607.51,564.56z" />
<path class="st0"
d="M547.92,509.18v15.65l-30.89,15.28l30.89,15.16v15.55l-44.35-24.08v-13.31L547.92,509.18z" />
</g>
<path class="st0"
d="M652.33,633.55H427.67v-187.1h224.65v187.1H652.33z M441.54,619.68h196.92V460.32H441.54V619.68z" />
</g>
</svg>
<svg viewBox="427.6 446 225 187">
<use xlink:href="#elSVG" />
</svg>