How to adjust the size of a template with svg elements in it?

[thematrixrearwindow]

Hi,

i have a problem with the view of a template which has svg elements in it.
The svg circles are displayed not in the (vertical) middle of the element, respectively the
size of the template node doesn't fit for the svg circles (see attachment #2), even if i set it to 5x1 size.

Can anybody help me please, i can't get that problem solved.

If further informations are needed, just let me know.
Thanks in advance!

[hotNipi]

SVG is tricky.
A workaround here would be to use cy="50%" but even if it may fix your problem it is wrong way of doing it.
You should define the viewBox attribute for the svg element. If you then give correct sizes to viewBox, then the svg's internal coordination system works for you as intended and you don't have any surprises.

[thematrixrearwindow]

Thanks! Set the cy="50%" solves the problem.
But yes, i would like to do it the correct way, could you tell me how to handle that in my case with the viewBox attribute?

[hotNipi]

There is nice article about the viewport and viewBox of the svg. SVG Viewport and viewBox (For Complete Beginners)

Anyway, it takes to know how big is the container where the svg is placed.
For that let's inspect that element with the browser developer tools.

The width and height - 264px and 48px.
(those numbers may be different if you have different size for widget and group)

In ideal world that would be enough, but here in ui_template the class .nr-dashboard-template adds also padding. This padding steals the size from the content so for svg what remains is :
264 - padding-left - padding-right
and
48 - padding-top - padding-bottom

So define the svg with viewBox using those numbers
<svg viewBox="0 0 252 42">
Now as we know that total height of the svg is 42 (no zooming thus the vewport is default), the vertically centered circle should be cy="21"