Okay, you did ask...

Rather than use MatLab to create your bar charts, you could do something like this.

Here I am assuming you don't want standalone images that others can steal but you do want maximal SVG coolness.

Move the origin with viewBox voodoo witchcraft to 0,0.

Add a stylesheet in your HTML just for your SVG wizardry.

Create some CSS properties scoped to SVG for your colours, for example svg { --claude-code: red; --cursor: orange; --github-copilot: yellow; } and so on.

Put them in the stylesheet, and add some styles, for example claude-code line { stroke: var(--claude-code); } and so on.

Rather than use paths in groups with clip paths and whatnot, just use a series of lines, made nice and fat. Lines have two points, and, since the viewBox is zeroed out to the origin, you only need to specify the y2 value, with y1, x1 and x2 taking the defaults of zero. The y2 value could be whatever suits, the actual value divided by 1000, 10000 or something.

Put each line in a group with the group having a class, for example claude-code.

Add the label to the group with its own transform to rotate the text 45 degrees.

Add a transform to the group to move the fat line and its label along the y axis using a translate.

Rinse and repeat for all entries on the graph.

Now do some labels for the other axis.

As for the title of the graph, move that out of the SVG file. Put the SVG file in a figure element and put the title in a figcaption element. Add CSS for the figcaptions.

With SVG in HTML there is no need to do xlink and version things, just keep it simple, with just the viewBox and no width/height. Scale your figures in CSS with the SVG set to fill the space of the figure, so we are going full width.

You can also use some title elements for mouseovers, so, hover over a bar and you get the actual data number.

Why do it this way?

Say you don't like the colours or you want to implement dark mode. You can do the usual prefers media query stuff and set your colours accordingly, for all the graphs, so they are all consistent.

Same goes with the fonts, you want all that in the stylesheet rather than baked into every SVG, so you can update them all with one master change.

As for the last graph with lots of squares, those squares are 'rect' not path, for maximum readability. The rectangles can be put in a defs container as symbols, so you have veryLightBlueSquare, lightBlueSquare, BlueSquare and so on. Then, with your text you can put each value in a group that contains a text node and a use tag to pull through the relevant colour square.