Summary
4D introduced SVG with V11, which was in 2007. Long ago. Still SVG didn’t get a stronghold in the 4D community. Partly it’s really confusing, what SVG actually is, besides an XML-tree to represent a drawing. The confusion gets even worse concerning 4Ds mixing and matching techniques to work with SVG. I’ve described that already. Here the answer to a current question of yours.
No german version available yet.
In this case I need to insert the vertical bar chart into a nicely designed surrounding.
Looks like lot of work. I did take a shortcut, creating the chart-style is not my business, and used the designers concept-drawing and saved that as SVG. Opened that SVG with BBEdit and replaced the upper end-coordinates (height) with 4D-tags. You see that here: 12 heights calculated depending on monthly results.
Processing 4D tags fills the current content of variable height1 .. height12 into that text-file. This is a valid XML-text, drawing a SVG-chart if displayed properly. I don’t want to display yet, but to export that XML-text into the variable svgGraphFilialen as text.
That bar-chart needs to be placed at a specific spot inside the complete SVG. I use the group-element <g> and add transform-translate to it to move to an upper-left-corner which is not 0/0. As you know the variable svgGraphFilialen contains a valid SVG as text. Processing 4D tags (4DHTML in this instance) will add that SVG to the container SVG.
In now have an valid XML-file that draws an SVG as shown in the first picture.
Your alternative is to draw all the elements yourself. Either by using XML-commands or use the 4D SVG-component instead, which encapsulates those XML-commands for your sanity. I prefer being even more lazy, as shown.
You should get yourself a good SVG-editor. There is none in Open Source, really none. By far the best is Sketch. Sketch is even a reason to buy a Mac.