Just about everything the Xara Desktop Application (XDA) ought to be: https://boxy-svg.com/.

I have just started the 15-trial and can immediately see how powerful it is.
Definitely worth $10(+VAT)/yr for the power it brings to the XDA.

To be clear, you need to place the <svg> tags into a Placeholder code (body) or Xara will render all as a group of objects. A mouthful, but for simple objects, it is Copy & Paste.
Embedding SVGs also reduces the number of HTML calls so your websites could be slicker.

With an SVG, you can manipulate any part of it with JS and CSS for clicks and rollovers or even splash effects.

Oh, it has a user interface that does not get in the way.
The good thing is most of the UI is very familiar.
Manipulate shapes through Geometry and Elements...

Acorn
This is a torus:

<!doctype html>
<svg viewBox="48.655 51.207 312.914 313.022" width="312.914" height="313.022">
<defs>
<radialGradient gradientUnits="userSpaceOnUse" cx="-205.112" cy="-207.718" r="165.448" id="gradient-0">
<stop offset="0" style="stop-color: rgba(252, 50, 35, 1)"></stop>
<stop offset="0.707" style="stop-color: rgb(18, 210, 15);"></stop>
<stop offset="1" style="stop-color: rgba(183, 15, 2, 1)"></stop>
</radialGradient>
</defs>
<path d="M -205.112 -207.718 m -156.457 0 a 156.457 156.457 0 1 0 312.914 0 a 156.457 156.457 0 1 0 -312.914 0 Z M -205.112 -207.718 m -76.492 0 a 76.492 76.492 0 0 1 152.984 0 a 76.492 76.492 0 0 1 -152.984 0 Z" data-bx-shape="ring -205.112 -207.718 76.492 76.492 156.457 156.457 1@02aeb255" style="fill-opacity: 0.71; fill: url(#gradient-0);" transform="matrix(-1, 0, 0, -1, 0, 0)"></path>
</svg>