Help with SVG code

AppSheet AppSheet Q&A
, ,
1

Hi!

I’ve a virtual column type Image with next SVG code:

"data:image/svg+xml;utf8,
<svg id='Capa_1' data-name='Capa 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 393.75 192.93'>
<defs><style>.cls-1{fill:lightgray;}.cls-2{fill:green;}</style></defs><g id='Modo_de_aislamiento' data-name='Modo de aislamiento'><path class='cls-1' d='M384.49,43.66A16.19,16.19,0,0,1,368.94,31.9H309.79a16.15,16.15,0,0,1-31.09,0H219.55a16.16,16.16,0,0,1-31.1,0H129.3a16.15,16.15,0,0,1-31.09,0H39.06a16.16,16.16,0,1,1,0-8.8H98.21a16.15,16.15,0,0,1,31.09,0h59.15a16.16,16.16,0,0,1,31.1,0H278.7a16.15,16.15,0,0,1,31.09,0h59.15a16.16,16.16,0,1,1,15.55,20.56Z' transform='translate(-6.91 -11.32)'/>
<circle class='cls-2' cx='16.39' cy='16.39' r='16.39'/></g></svg>"

The problem is that I can’t remove white space under the status bar

2.jpg
2.jpg674×616 18.9 KB

any help?

Thanks!

2

I don’t think you can change the size of an image column in the detail view. You can place it to the center by changing the viewBox to something like "viewBox='0 -20 393.75 52.93.

If you are OK to set the image as the main image of the view then it looks closer to your liking with the same viewBox setting.

TeeSee1_0-1700979250460.png
TeeSee1_0-1700979250460.png333×353 9.16 KB

I am no SVG expert. You may receive better advice from other members.

3

Thanks for try to help @TeeSee1
Unfortunately there isn’t much collaboration on this forum.

I solved it by adding the variables width=‘1200’ height=‘200’
Then I changed type of column for Thumbnail

"data&colon;image/svg+xml;utf8,
<svg id='Capa_1' data-name='Capa 1' xmlns='http://www.w3.org/2000/svg' width='1200' height='200' viewBox='0 0 400 55'><defs><style>.cls-1{fill:lightgrey;}.cls-2{fill:%23b9271b;}.cls-3{fill:white;}</style>
</defs><g id='Modo_de_aislamiento' data-name='Modo de aislamiento'><path class='cls-1' d='M377.2,32.82a16.19,16.19,0,0,1-15.58-11.76H302.5a16.15,16.15,0,0,1-31.09,0H212.26a16.16,16.16,0,0,1-31.1,0H122a16.15,16.15,0,0,1-31.09,0H31.77a16.16,16.16,0,1,1,0-8.8H90.92a16.15,16.15,0,0,1,31.09,0h59.15a16.16,16.16,0,0,1,31.1,0h59.15a16.15,16.15,0,0,1,31.09,0h59.12a16.16,16.16,0,1,1,15.55,20.56Z' transform='translate(0 0)'/><circle class='cls-2' cx='17.01' cy='17.01' r='17.01'/></g><path class='cls-3' d='M17,7.32A9.69,9.69,0,1,0,26.7,17,9.68,9.68,0,0,0,17,7.32Zm3.62,12.23h0l-.79,1a.63.63,0,0,1-.88.1h0l-2.61-1.95a1.52,1.52,0,0,1-.59-1.22V11.38a.62.62,0,0,1,.62-.62h1.26a.62.62,0,0,1,.62.62V17l2.27,1.66a.63.63,0,0,1,.1.88Z' transform='translate(0 0)'/></svg>
1 Like
4

Glad you were able to solve this!

Thumbnail. – I would never have guessed this!