Node Icon cannot be scaled and always fills the entire area

Developing Nodes
1

Hello guys,
I am triying to use an .svg in the icons directory of my custom node. Nodered finds and displays the svg correctly but the icon always seems to fill the entire area. the file being an .svg isnt affected by scaling and always fills the entire area. is there a workaround for this. I want to be able to scale the icon ?

image

one solution that i can think of is to use a png or jpg which i do not want to do. :slight_smile:

also

  1. the docs still say i can use a function to specify an icon file. I followed a previous thread where it was mentioned otherwise. This thread wasnt that old too... so i am not still sure if we can.
    Link: Change node icon based on config - #2 by knolleary
2

Without seeing the code for your node, it will be hard to help you out.
Have you read the documentation about icons: Node appearance : Node-RED

3

Hi @Kib

The icon should have an aspect ratio of 2:3 to ensure it scales properly in the node. You should include padding in the svg itself. Have a look at any of the core icons to see what I mean.

1 Like
4

Thanks for the help. :slight_smile:

5

Hi @knolleary. This is a followup to the previous question. I have padded the icons via changing the svg itself. but i found some inconsistencies.

image

The icon scales correctly in the node pallet but the node workspace has a different scaling behaviour. Is this intended?

6

None of the core nodes have that issue with their SVG icons.

Have you compared your icon to any of the core ones to see if there are any obvious differences in their size etc.

7

Yes, you are correct, i have different sizes of icons when i compare it to core nodes but that shouldnt make a difference with svgs, I assumed.
But shouldnt the behavious be the same at both places?

I am unclear. I will check with the core nodes and then post back.

8

Well, we have only tested using the svgs we have. So we know what size svg works. If you have a different size of SVG you have two options:

  1. change it to match the core icons which we know to work
  2. share your icon with us so we can investigate why they are different.
9

Yes. I will share the icon in this post, just so you know, placing the same icon as png works, but partially too.
image

anyways, This is the same icon resized as the core nodes.. - Scales incorrectly.

<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg" class="svg-inline--fa fa-function fa-w-20">
 <g>
  <title>Layer 1</title>
  <g stroke="null" class="fa-group" id="svg_1">
   <path stroke="null" class="fa-secondary" fill="currentColor" d="m20.69081,25.23032l-1.16902,-0.97143c-0.33144,-0.27755 -0.84421,-0.23546 -1.10699,0.10316a14.55759,14.22263 0 0 0 0,17.19336c0.26325,0.33861 0.77556,0.37839 1.10699,0.10316l1.16902,-0.97143c0.31202,-0.25951 0.34611,-0.70313 0.1018,-1.02416a11.49608,11.23156 0 0 1 0,-13.40987c0.24479,-0.31965 0.2107,-0.76373 -0.1018,-1.02278zm11.50034,-0.86735c-0.26325,-0.33861 -0.77556,-0.37839 -1.10699,-0.10316l-1.16902,0.97143c-0.31202,0.25951 -0.34611,0.70313 -0.1018,1.02416a11.49702,11.23249 0 0 1 0,13.41034c-0.24479,0.32103 -0.2107,0.76512 0.1018,1.02416l1.16902,0.97143c0.33144,0.27524 0.84421,0.23546 1.10699,-0.10316a14.55854,14.22356 0 0 0 0,-17.19382l0,-0.00139l0,0z" opacity="0.4" id="svg_2"/>
   <path stroke="null" class="fa-primary" fill="currentColor" d="m27.44547,32.95965l2.18085,-2.13067a0.75757,0.74014 0 0 0 0,-1.04683l-1.07101,-1.04637a0.75757,0.74014 0 0 0 -1.07148,0l-2.18085,2.13067l-2.18085,-2.13067a0.75757,0.74014 0 0 0 -1.07148,0l-1.07101,1.04637a0.75757,0.74014 0 0 0 0,1.04683l2.18085,2.13067l-2.18085,2.13067a0.75757,0.74014 0 0 0 0,1.04683l1.07101,1.04637a0.75757,0.74014 0 0 0 1.07148,0l2.18085,-2.13067l2.18085,2.13067a0.75757,0.74014 0 0 0 1.07148,0l1.07101,-1.04637a0.75757,0.74014 0 0 0 0,-1.04683l-2.18085,-2.13067zm-12.74843,-14.80272l-2.2727,0a4.92418,4.81088 0 0 0 -4.92418,4.81088l0,2.96054l-1.89392,0a0.75757,0.74014 0 0 0 -0.75757,0.74014l0,2.22041a0.75757,0.74014 0 0 0 0.75757,0.74014l1.89392,0l0,5.92109a1.13966,1.11344 0 0 1 -1.13635,1.1102l-0.75757,0a0.75757,0.74014 0 0 0 -0.75757,0.74014l0,2.22041a0.75757,0.74014 0 0 0 0.75757,0.74014l0.75757,0a4.92418,4.81088 0 0 0 4.92418,-4.81088l0,-5.92109l1.89392,0a0.75757,0.74014 0 0 0 0.75757,-0.74014l0,-2.22041a0.75757,0.74014 0 0 0 -0.75757,-0.74014l-1.89392,0l0,-2.96054a1.13966,1.11344 0 0 1 1.13635,-1.1102l2.2727,0a0.75757,0.74014 0 0 0 0.75757,-0.74014l0,-2.22041a0.75757,0.74014 0 0 0 -0.75757,-0.74014z" id="svg_3"/>
  </g>
 </g>

</svg>

This is the icon i used in the first followup post.

<svg width="640" height="512" xmlns="http://www.w3.org/2000/svg" class="svg-inline--fa fa-function fa-w-20">

 <g>
  <title>Layer 1</title>
  <g stroke="null" id="svg_1" class="fa-group">
   <path stroke="null" id="svg_2" opacity="0.4" d="m329.8373,194.35253l-16.64701,-12.55558c-4.71969,-3.58731 -12.02171,-3.04323 -15.76375,1.33328a207.30209,183.82563 0 0 0 0,222.22179c3.74878,4.37652 11.04407,4.8907 15.76375,1.33328l16.64701,-12.55558c4.44325,-3.35413 4.9287,-9.08785 1.44962,-13.23717a163.70568,145.16641 0 0 1 0,-173.3208c3.48583,-4.13138 3.00037,-9.87108 -1.44962,-13.21923zm163.76636,-11.21034c-3.74878,-4.37652 -11.04407,-4.8907 -15.76375,-1.33328l-16.64701,12.55558c-4.44325,3.35413 -4.9287,9.08785 -1.44962,13.23717a163.71916,145.17837 0 0 1 0,173.32678c-3.48583,4.14932 -3.00037,9.88901 1.44962,13.23717l16.64701,12.55558c4.71969,3.55741 12.02171,3.04323 15.76375,-1.33328a207.31558,183.83759 0 0 0 0,-222.22777l0,-0.01794z" fill="currentColor" class="fa-secondary"/>
   <path stroke="null" id="svg_3" d="m426.0245,294.25308l31.05553,-27.53857a10.78785,9.56616 0 0 0 0,-13.53013l-15.25133,-13.52415a10.78785,9.56616 0 0 0 -15.25807,0l-31.05553,27.53857l-31.05553,-27.53857a10.78785,9.56616 0 0 0 -15.25807,0l-15.25133,13.52415a10.78785,9.56616 0 0 0 0,13.53013l31.05553,27.53857l-31.05553,27.53857a10.78785,9.56616 0 0 0 0,13.53013l15.25133,13.52415a10.78785,9.56616 0 0 0 15.25807,0l31.05553,-27.53857l31.05553,27.53857a10.78785,9.56616 0 0 0 15.25807,0l15.25133,-13.52415a10.78785,9.56616 0 0 0 0,-13.53013l-31.05553,-27.53857zm-181.53935,-191.32311l-32.36356,0a70.12105,62.18001 0 0 0 -70.12105,62.18001l0,38.26462l-26.96963,0a10.78785,9.56616 0 0 0 -10.78785,9.56616l0,28.69847a10.78785,9.56616 0 0 0 10.78785,9.56616l26.96963,0l0,76.52924a16.22898,14.39108 0 0 1 -16.18178,14.34923l-10.78785,0a10.78785,9.56616 0 0 0 -10.78785,9.56616l0,28.69847a10.78785,9.56616 0 0 0 10.78785,9.56616l10.78785,0a70.12105,62.18001 0 0 0 70.12105,-62.18001l0,-76.52924l26.96963,0a10.78785,9.56616 0 0 0 10.78785,-9.56616l0,-28.69847a10.78785,9.56616 0 0 0 -10.78785,-9.56616l-26.96963,0l0,-38.26462a16.22898,14.39108 0 0 1 16.18178,-14.34923l32.36356,0a10.78785,9.56616 0 0 0 10.78785,-9.56616l0,-28.69847a10.78785,9.56616 0 0 0 -10.78785,-9.56616z" fill="currentColor" class="fa-primary"/>
  </g>
 </g>
</svg>
10

@knolleary found the issue, accroding to this answer https://graphicdesign.stackexchange.com/a/71574 , svg is resolution agnostic and also the size of it doesnt matter, without the viewBox. But just specifiying the viewbox apparently allows infinite scaling, so i tried adding viewBox="0, 0, 40, 60" and also setting the size to width="40" height="60" and the scaling works consistently across the palette and the workspace. Thanks for the assistance.

image

11

Great - I always forget about viewbox. We should capture that in the docs to help others in the future.

12

@knolleary Yes. That and it would also be nice in the docs if it mentioned that we can not use functions for icons while specifiying the node properties, i had to learn that from a previous answer you gave to a post i linked in the question... I could create a ticket to update if it is okay, or if there are tickets for such small issues. :slight_smile:

13

A pull request direct to the docs would be even better :slight_smile:

14

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