Как изменить размер SVG и как активировать оповещение при достижении лимита - angular

Question

Как сделать его больше?

<div class="example">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 50 42" aria-hidden="true" fill="url(#color)">
    <defs>
        <linearGradient id="color" x1="0%" y1="100%" x2="0%" y2="0%">
        <stop offset="67%" stop-color="rgb(132, 219, 255)" />
        <stop offset="94%" stop-color="rgb(255, 0, 0)" />
        <stop offset="97%" stop-color="#e3e3e3" />
        <stop offset="100%" stop-color="#e3e3e3" />
        </linearGradient>
        <!-- <style type="text/css">
            < ![CDATA[ svg {
                fill: url(#colr) rgb(255, 115, 92);
            }
            ]]>
        </style> -->
    </defs>

    <path stroke="#000" d="M15 6 
       Q 15 6, 25 18
       A 12.8 12.8 0 1 1 5 18
       Q 15 6 15 6z" />
</svg>

также, когда есть предел, когда он достигает лимита 67%, он должен вызвать предупреждение о достижении 67%.

проблема в том, как сделать его больше или как изменить размер svg? также, как вызвать предупреждающее сообщение, когда оно достигнет 67%