Из вопроса непонятно, какую ширину вы хотите уменьшить:
Уменьшить ширину самой фигуры, но насколько уменьшить не ясно.
Уменьшить ширину места, которое занимает svg внутри HTML?
Если первый вариант, то необходимо в векторном редакторе перерисовать фигуру нужной ширины и длины. Для этого откройте векторный редактор, установите размер документа близкий по размерам нужной вам фигуры и в границах этого документа нарисуйте нужную фигуру, стараясь оставлять минимальные отступы от границ документа. Фигура очень простая и это будет вам не трудно.
Если это второй вариант,- вы не хотите перерисовывать фигуру, но вам надо уменьшить слишком большие отступы от фигуры до краев SVG, то можно воспользоваться следующей техникой:
Вот ваш SVG, красная рамка показывает границы svg документа.
Она добавлена стилями: style="border:1px solid red;"
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1620 376" style="border:1px solid red;">
<style type="text/css">
.green{fill:green;enable-background:new;}
</style>
<polygon id="life" class="green" points="951.3,104.5 930.5,140.5 333,140.5 333,53.5 1515,53.5 1485.5,104.5 "/>
</svg>
Видно, что присутствуют очень большие отступы от фигуры до краев svg документа. Какого размера красная рамка, столько места svg займет в HTML. И никакие ухищрения в CSS не помогут уменьшить эти отступы. Уменьшать эти отступы нужно прямо в SVG. Для этого добавим viewport
это width
height
в шапке svg файла. Если вам нужно адаптивное изображение, то ширину и высоту необходимо указывать в процентах.
Для уменьшения отступов меняем соотношение сторон,- делаем высоту в 8 раз меньше
376 /8 = 47px
Точно такая же пропорция должна быть
у viewport
,- width="100"
height="12.5%"
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="12.5%" viewBox="0 0 1620 47" style="border:1px solid red;">
<style type="text/css">
.green{fill:green;enable-background:new;}
</style>
<g transform="translate(-300 -74)">
<polygon id="life" class="green" points="951.3,104.5 930.5,140.5 333,140.5 333,53.5 1515,53.5 1485.5,104.5 "/>
</g>
</svg>
<g transform="translate(-300 -74)">
используется для более тонкой настройки положения фигуры.
В частности, если хотите сделать более узкий полигон поднимите его этой командой вверх.
<g transform="translate(-300 -80)">