Skip to content
This repository has been archived by the owner on Aug 10, 2024. It is now read-only.

Question about svg node not respecing dimensions / proportions #123

Open
vongomben opened this issue Jun 27, 2023 · 4 comments
Open

Question about svg node not respecing dimensions / proportions #123

vongomben opened this issue Jun 27, 2023 · 4 comments

Comments

@vongomben
Copy link

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.

image

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
Copy link
Owner

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
Copy link
Author

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
Copy link
Author

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

image

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

@bartbutenaers
Copy link
Owner

@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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@vongomben @bartbutenaers