Question about svg node not respecing dimensions / proportions

vongomben commented 1 year ago

The Svg node is the most interesting one I've been playing so far for creating custom visualizations (which is super requested and cool). In this case, I'm trying to visualize the weight of people using a smart sole.

I created the svg in inkscape, and successfully uploaded in the svg dashboard node. I'm uploading you just the dashabord nodes, and repeat here the code.

The problem is, that I'm totally unable to show the sole as central and zoomed in in the dashabord group. If I put proportioned dimensions, the sole is rendered not correctly (super tiny).

Any help?

<svg svg x="0" y="0" height="800" viewBox="0 0 800 400" width="2000" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Add here your SVG shapes (circles, rectangles, ...) -->
<!-- Or remove everything, if you want to paste an entire drawing (<svg...>...</svg>).-->

  <g
     inkscape:label="sole"
     inkscape:groupmode="layer"
     id="layer1"
     style="display:inline">
    <path
       style="fill:#0c0d0e;stroke:none;stroke-width:0.0504726"
       d="m 190.22034,30.969275 c -1.40668,-0.583807 -2.71406,-1.438577 -4.12556,-2.040308 -4.16489,-1.775369 -8.63521,-2.839018 -13.15766,-3.052247 -7.95545,-0.375281 -15.60455,2.113607 -23.31639,3.641136 -7.26381,1.438948 -14.75386,1.815142 -22.14339,1.609437 C 118.3084,30.872274 109.19537,29.472602 100.24266,27.523706 92.237979,25.781093 84.289771,23.713527 76.21598,22.30058 64.803301,20.303228 53.004716,19.421372 41.506743,21.245956 34.544772,22.351088 27.70327,24.71994 21.721231,28.484277 c -1.270759,0.799695 -2.539837,1.602681 -3.745467,2.500011 -0.481497,0.358432 -1.126397,0.705868 -1.512284,1.166709 -1.103422,1.317674 -1.807149,3.189574 -2.438989,4.769601 -0.494176,1.235821 -0.794092,2.533083 -1.017979,3.841605 -1.811739,10.592659 7.091301,19.192958 15.062221,24.553782 1.511814,1.016803 3.0646,2.047932 4.666027,2.921223 10.685659,5.82493 22.33553,10.181297 34.344077,12.387287 10.387677,1.90835 20.897136,2.2097 31.433586,2.18568 12.255457,-0.0276 24.505097,-0.67801 36.737867,-1.34869 l 22.57435,-1.24547 c 8.26633,-0.45288 16.5491,-1.09373 24.61405,-3.062256 6.82154,-1.665218 14.09776,-4.825606 18.1485,-10.850426 4.61132,-6.858455 4.67831,-16.361374 1.14626,-23.679486 -1.5144,-3.137925 -3.73976,-5.863094 -6.39289,-8.106783 -1.23825,-1.047172 -2.55013,-2.030397 -3.95455,-2.841242 -0.38597,-0.222834 -0.7571,-0.536989 -1.16567,-0.706547 m -1.54664,-0.551367 c 1.40581,0.604534 2.7611,1.568108 4.02406,2.418012 2.60108,1.750391 4.9726,3.943788 6.79118,6.508434 3.97891,5.611384 5.38597,12.942745 3.8719,19.64339 -0.54564,2.412813 -1.45296,4.863555 -2.84078,6.92715 -4.2258,6.284624 -11.52198,9.355392 -18.6379,11.092395 -8.274,2.019706 -16.81401,2.556966 -25.28999,3.021686 l -21.84793,1.19863 c -11.19893,0.61424 -22.40108,1.16541 -33.61819,1.29533 -9.350292,0.10855 -18.761664,0.0443 -28.044869,-1.19083 -8.483912,-1.1286 -16.793212,-3.32782 -24.819916,-6.271892 -4.57743,-1.67882 -9.131328,-3.618555 -13.408112,-5.949632 -1.515891,-0.826826 -3.111352,-1.664621 -4.543876,-2.628077 -7.09869,-4.773317 -14.535875,-10.369753 -16.763266,-19.114505 -0.305062,-1.197213 -0.432899,-2.422643 -0.474009,-3.653951 -0.05243,-1.564228 0.177709,-3.119748 0.554305,-4.633839 0.448227,-1.802019 1.180184,-3.587679 2.107619,-5.194042 0.307377,-0.532394 0.577596,-1.191154 1.015337,-1.628465 0.738714,-0.737954 1.725879,-1.292831 2.574043,-1.894155 2.703893,-1.917099 5.651649,-3.553532 8.681313,-4.895569 4.32692,-1.916611 8.920679,-3.219335 13.589653,-3.969842 12.607279,-2.02687 25.499757,-0.69413 37.953518,1.693958 8.759041,1.679678 17.365054,4.093803 26.13778,5.705365 8.2168,1.509461 16.4586,2.423484 24.81547,2.544614 6.86856,0.09962 13.86684,-0.517021 20.58807,-1.943905 7.25914,-1.540896 14.48698,-3.718051 21.99086,-3.364132 3.78485,0.178502 7.52483,1.012128 11.0771,2.315224 1.55155,0.56912 3.00532,1.318714 4.51663,1.968648"
       id="path980"
       sodipodi:nodetypes="cccccccccccsccccccccccssccscccscccccccccssccccccccscc" />
  </g>
  <g
     inkscape:groupmode="layer"
     id="layer2"
     inkscape:label="points"
     style="display:inline">
    <circle
       style="fill:none;stroke:#000000;stroke-width:0.381525;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000"
       id="path1168"
       cx="29.362072"
       cy="43.384052"
       r="8.3297596" />
    <circle
       style="fill:none;stroke:#000000;stroke-width:0.381525;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000"
       id="circle1294"
       cx="52.16975"
       cy="33.170181"
       r="8.3297596" />
    <circle
       style="fill:none;stroke:#000000;stroke-width:0.381525;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000"
       id="circle1296"
       cx="56.830452"
       cy="52.308788"
       r="8.3297596" />
    <circle
       style="fill:none;stroke:#000000;stroke-width:0.381525;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000"
       id="circle1298"
       cx="73.688293"
       cy="70.455765"
       r="8.3297596" />
    <circle
       style="fill:none;stroke:#000000;stroke-width:0.381525;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000"
       id="circle1300"
       cx="98.975067"
       cy="73.083611"
       r="8.3297596" />
    <circle
       style="fill:none;stroke:#000000;stroke-width:0.381525;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000"
       id="circle1302"
       cx="163.32742"
       cy="41.857029"
       r="8.3297596" />
    <circle
       style="fill:none;stroke:#000000;stroke-width:0.381525;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000"
       id="circle1304"
       cx="170.76471"
       cy="63.970554"
       r="8.3297596" />
    <circle
       style="fill:none;stroke:#000000;stroke-width:0.381525;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000"
       id="circle1306"
       cx="183.90393"
       cy="51.277584"
       r="8.3297596" />
  </g>
  <g
     inkscape:groupmode="layer"
     id="g13559"
     inkscape:label="points-fill">
    <circle
       style="fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:0.381525;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000"
       id="circle13543"
       cx="29.362072"
       cy="43.384052"
       r="8.3297596" />
    <circle
       style="fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:0.381525;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000"
       id="circle13545"
       cx="52.16975"
       cy="33.170181"
       r="8.3297596" />
    <circle
       style="fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:0.381525;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000"
       id="circle13547"
       cx="56.830452"
       cy="52.308788"
       r="8.3297596" />
    <circle
       style="fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:0.381525;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000"
       id="circle13549"
       cx="73.688293"
       cy="70.455765"
       r="8.3297596" />
    <circle
       style="fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:0.381525;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000"
       id="circle13551"
       cx="98.975067"
       cy="73.083611"
       r="8.3297596" />
    <circle
       style="fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:0.381525;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000"
       id="circle13553"
       cx="163.32742"
       cy="41.857029"
       r="8.3297596" />
    <circle
       style="fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:0.381525;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000"
       id="circle13555"
       cx="170.76471"
       cy="63.970554"
       r="8.3297596" />
    <circle
       style="fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:0.381525;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000"
       id="circle13557"
       cx="183.90393"
       cy="51.277584"
       r="8.3297596" />
  </g>
  <g
     inkscape:groupmode="layer"
     id="layer3"
     inkscape:label="num"
     style="display:inline">
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:6.72968px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.0504726"
       x="182.88426"
       y="53.691425"
       id="text1597"><tspan
         sodipodi:role="line"
         id="tspan1595"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.72968px;font-family:'Roboto Slab';-inkscape-font-specification:'Roboto Slab';stroke-width:0.0504726"
         x="182.88426"
         y="53.691425">1</tspan></text>
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:6.72968px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.0504726"
       x="169.14087"
       y="66.383041"
       id="text2949"><tspan
         sodipodi:role="line"
         id="tspan2947"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.72968px;font-family:'Roboto Slab';-inkscape-font-specification:'Roboto Slab';stroke-width:0.0504726"
         x="169.14087"
         y="66.383041">2</tspan></text>
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:6.72968px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.0504726"
       x="161.42773"
       y="44.19025"
       id="text6967"><tspan
         sodipodi:role="line"
         id="tspan6965"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.72968px;font-family:'Roboto Slab';-inkscape-font-specification:'Roboto Slab';stroke-width:0.0504726"
         x="161.42773"
         y="44.19025">3</tspan></text>
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:6.72968px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.0504726"
       x="96.971275"
       y="75.426849"
       id="text9379"><tspan
         sodipodi:role="line"
         id="tspan9377"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.72968px;font-family:'Roboto Slab';-inkscape-font-specification:'Roboto Slab';stroke-width:0.0504726"
         x="96.971275"
         y="75.426849">4</tspan></text>
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:6.72968px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.0504726"
       x="71.783661"
       y="72.650269"
       id="text10493"><tspan
         sodipodi:role="line"
         id="tspan10491"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.72968px;font-family:'Roboto Slab';-inkscape-font-specification:'Roboto Slab';stroke-width:0.0504726"
         x="71.783661"
         y="72.650269">5</tspan></text>
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:6.72968px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.0504726"
       x="54.727486"
       y="54.602451"
       id="text11115"><tspan
         sodipodi:role="line"
         id="tspan11113"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.72968px;font-family:'Roboto Slab';-inkscape-font-specification:'Roboto Slab';stroke-width:0.0504726"
         x="54.727486"
         y="54.602451">6</tspan></text>
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:6.72968px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.0504726"
       x="50.165955"
       y="35.364681"
       id="text12757"><tspan
         sodipodi:role="line"
         id="tspan12755"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.72968px;font-family:'Roboto Slab';-inkscape-font-specification:'Roboto Slab';stroke-width:0.0504726"
         x="50.165955"
         y="35.364681">7</tspan></text>
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:6.72968px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.0504726"
       x="27.556604"
       y="45.38023"
       id="text13331"><tspan
         sodipodi:role="line"
         id="tspan13329"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.72968px;font-family:'Roboto Slab';-inkscape-font-specification:'Roboto Slab';stroke-width:0.0504726"
         x="27.556604"
         y="45.38023">8</tspan></text>
  </g>
</svg>

Copy of svg here

bartbutenaers commented 1 year ago

Hi @vongomben,

Due to a lack of free time, I cannot rework your example. But I think you should have a look at the viewbox. You have a drawing size of 800x2000, but your viewbox is "0 0 800 400", which means you only view a part of your drawing (i.e. 800x400 at location (0,0)).

Bart

vongomben commented 1 year ago

Thanks for the help. I will try different proportions, but of I put the correct one the drawing becomes super tiny. Will try to post here a picture, away from keyboard at the moment. Thanks for now!

vongomben commented 1 year ago

Ok. I've made some tests: Thanks for the link.

I've solved it like this svg x="0" y="0" width="400" height="750" viewBox="0 0 400 800"

but the vidth / height value [1] from the documentation doesn't behave as expected

I was able to reach this solution witch suits me

[1] A width/height value of "100" means "100px"

bartbutenaers commented 1 year ago

@vongomben, Thanks for sharing your solution!

[1] A width/height value of "100" means "100px"

Ah yes, unitless numbers for SVG presentation attributes (like width, height, ...) are treated as px. I see in this StackOverflow discussion that they use 100% instead of 100.

bartbutenaers / node-red-contrib-ui-svg

Question about svg node not respecing dimensions / proportions #123