✨ (grapher) improve SVG output for manual manipulation

[sophiamersmann]

Resolves #3607

Adds labels to SVG groups and elements for more intuitive manual inspection and manipulation.

Figma displays an element's ID as its title. I researched if there is a way to customize this and show something else as an element's title, e.g. a data-name attribute or so, but I couldn't find anything. Since it's a bit odd to assign IDs to elements like that, I added a makeIdForHumanConsumption function that communicates that these IDs are for human inspection only and are not used in code, thus can be safely deleted.

I also made an effort to groups elements together, e.g. a tick's line and label is rendered into one group element.

PS: I also fixed this annoyance 👇🏻

Figma screenshot