svg {
margin: 20px;
}
<svg viewBox="0 0 100 100"
width="350px"
height="70px"
preserveAspectRatio="none"
transform="scale(1,-1)">
<path d="M 0,0
L 20,90
L 40 10
L 70 10"
fill="none"
stroke-linecap="round"
stroke="#886ce6"
stroke-width="5px"/>
</svg>
как мне сделать край линии прямоугольным? Так же линии имеют разную ширину. Может это и очевидно, но как этого избежать? svg для меня пока еще слабо знаком просто
Смотри, у тебя вьюбокс базовый - 100 на 100 пикселей, а ты его растянул 350 на 70, поэтому и линии могут быть разные.
Кроме того странное transform="scale(1,-1) - это для чего?
stroke-linecap - отвечает за углы, возможные значения: butt, round, square. у тебя - round, это их и круглит. Или удалить или поменять на square например.
Сборка персонального компьютера от Artline: умный выбор для современных пользователей