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

**URL:** <https://discourse.nodered.org/t/how-to-adjust-the-size-of-a-template-with-svg-elements-in-it/63116>\
**Category:** General\
**Tags:** node-red-dashboard\
**Created:** [26 May 2022 18:45 UTC](https://discourse.nodered.org/t/how-to-adjust-the-size-of-a-template-with-svg-elements-in-it/63116 "2022-05-26T18:45:32Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![thematrixrearwindow](https://avatars.discourse-cdn.com/v4/letter/t/a8b319/32.png) [@thematrixrearwindow](https://discourse.nodered.org/u/thematrixrearwindow)\
**Post date:** [26 May 2022 18:45 UTC](https://discourse.nodered.org/t/how-to-adjust-the-size-of-a-template-with-svg-elements-in-it/63116/1 "2022-05-26T18:45:32Z")

</div>

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!

![Userinterface](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/2/02168f8a4f2b97b8fdb3f782c94b5f443d250167.png)

 ![Template Node](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/7/175a55cf389daf98e15f86cf27dbac05bc390ac5.png)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [27 May 2022 10:24 UTC](https://discourse.nodered.org/t/how-to-adjust-the-size-of-a-template-with-svg-elements-in-it/63116/2 "2022-05-27T10:24:27Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![thematrixrearwindow](https://avatars.discourse-cdn.com/v4/letter/t/a8b319/32.png) [@thematrixrearwindow](https://discourse.nodered.org/u/thematrixrearwindow)\
**Post date:** [27 May 2022 16:40 UTC](https://discourse.nodered.org/t/how-to-adjust-the-size-of-a-template-with-svg-elements-in-it/63116/3 "2022-05-27T16:40:10Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [27 May 2022 17:26 UTC](https://discourse.nodered.org/t/how-to-adjust-the-size-of-a-template-with-svg-elements-in-it/63116/4 "2022-05-27T17:26:24Z")

</div>

There is nice article about the `viewport` and `viewBox` of the svg. [SVG Viewport and viewBox (For Complete Beginners)](https://webdesign.tutsplus.com/tutorials/svg-viewport-and-viewbox-for-beginners--cms-30844)

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.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/f/2fe2474f5d474b0294479f7c72ab5097783ce99e.png)

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"`

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [10 June 2022 17:26 UTC](https://discourse.nodered.org/t/how-to-adjust-the-size-of-a-template-with-svg-elements-in-it/63116/5 "2022-06-10T17:26:48Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.