- #1. Сохраняете в файл с расширением *.svg
fill="none" stroke="black"
Чтобы был только бордер и не мешала закраска.
<svg width="99" height="99" viewBox="0 0 36 36">
<path
id="rect135"
d="M 17.097472,5.7761733 H 30.190131 V 14.17088 H 17.097472 Z"
fill="none" stroke="black" />
</svg>
- #2. В векторном редакторе добавляете направляющие

- #3. На пересечении направляющих в каждом углу добавляете два дополнительных узла
Для этого нужно дважды щёлкнуть по месту

- #4. Удаляете узлы в углах фигуры
См. рисунок ниже.
- Удаляете узлы
- Преобразовываете оставшиеся два узла в автоматически сглаженные и рычагами управления добиваетесь нужной формы. Их нужно просто совместить с направляющими

- #4. Повторяете действия для остальных узлов и сохраняете снова файл *.svg

- #5. При необходимости оптимизируете файл с помощью SVGOMG
Готовая фигура SVG
.container {
width:100vw;
height:100vh;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" version="1.1" id="svg3" >
<path id="rect135" d="M18.5 5.8h10.2c.7 0 1.5.8 1.5 1.5v5.4c0 .7-.9 1.5-1.6 1.5h-10c-.7 0-1.5-.8-1.5-1.4V7.3c0-.7.7-1.5 1.4-1.5z" fill="gold" />
</svg>
</div>
UPDATE
Такая техника рисования в векторном редакторе оправдана, когда нужно нарисовать фигуру со сложными контурами, но когда нужно закруглить простые фигуры, то проще сделать это с CSS
Ниже тот же прямоугольник, где углы закругляются с помощью border-radius
.rect {
width:198px;
height:99px;
background-color:red;
border-radius:20px;
}
<div class="rect"></div>