SVG not displaying properly

[ADRN]

Hello, 

I want to display SVG shapes but it does not work properly. Someone can point out, what can I do better?

Goal: for ex. insert white, horizontal, automatically adjustable line / divider. 

Issues: 
a. Even though I tried using percentage values, it does not want to fit to the changing screen.

b. The SVG code is put into an virtual column of type Image. It displays the result, but always gives this additional space, which enlarges the view for no reason:

Is it possible to control this space? 

Thank you in advance!

[WillowMobileSys]

Can you post the SVG code you are using?

[ADRN]

Sure: 

"<svg viewBox=""0 5 100% 5""  xmlns=""http://www.w3.org/2000/svg"">
  <line x1=""0"" y1=""50%"" x2=""100%"" y2=""50%"" stroke=""#FFFFFF"" stroke-width=""5"" />
</svg>"

[WillowMobileSys]

I am not sure how you got that code to work.  Here is what I needed to do.  NOTE: This is HTML and needs to be encoded.  You can't have "#" or "%" directly in this code.  I reverted the sample code to straight numeric values

Sample Code:

"data&colon;image/svg+xml;utf8, <svg viewBox=""0 0 500 2"" xmlns=""http://www.w3.org/2000/svg"">
<line x1=""0"" y1=""0"" x2=""500"" y2=""0"" stroke=""%23000000"" stroke-width=""2"" />
</svg>"

I placed this sample code into 2 columns

• a Virtual Column of type Image 
• A Virtual Column of type Show with the Content Type set as Image

Below are the visual results. 

The Top line is the Show column.  Notice is has less height BUT has buffer on sides though it will fill the screen the rest of the view.

Bottom line is the Image column.  It seems to carry a minimum height larger than the shown Column.  It does NOT fill the view but instead seems  to have set boundaries to which the view is constrained by.

I am not sure what you goal is but hopefully one of these will work.

Tablet View

Mobile View

[ADRN]

Similar to you I used additional columns to convert this into SVG format. 
Purpose of the whole structure of the table is to have an in-app place to put different shapes and be able to summon them quickly, rather than using space in cloud. 

So I created "Image_bucket" table. Its main columns are: 
- Image_svg - where I put SVG code generated normally anywhere (for ex. using some tools online)
- Image_link - if for some reason I would like to paste URL with the image
- Image_from_SVG - virtual column converting SVG to be usable in Appsheet. With the formula: 

This way I can just copy-paste SVG code and not modify it manually. 

My goal with this particular SVG code is to have a dividing line automatically adjustable to the size of the screen. But those generated images has a lot of space above and under it. 

SO the Top Line you made is close to what I want to achieve. Still...is there a way to reduce the height even further?

Also, what do you put inside the App Formula? I cannot put there anything besides your code, and my result is like this:

[WillowMobileSys · Accepted solution]

---

@ADRN wrote:

SO the Top Line you made is close to what I want to achieve. Still...is there a way to reduce the height even further?

---

Unfortunately, no.  The best you could do is use hyphens in a Text column and then set the Display name to a space.  While this reduces the height, the resulting line (it is a solid line) will be left justified and will not adjust based on screen size - although you could set different lengths of the test based on Device using the CONTEXT() function to get you most of the way there.

Another option is to use a Show column and take advantage of the space to specify a Section Header instead of a divider - i.e. something to describe the section below it.

[ADRN]

Ah, what a shame. I will check all the options and try to use best of it. The problem is I don't know what type of devices will my final users choose to use, whether tablet, mobile or desktop. 

Can you just tell me what formula did you put in this virtual column, that it showed the SVG? I've got this blank/error icon. 

[WillowMobileSys]

---

@ADRN wrote:

Can you just tell me what formula did you put in this virtual column, that it showed the SVG?

---

The "Sample Code" I posted previously is the expression I used.