LinkedIn
Twitter
Recently I have been using Scalable Vector Graphics (SVG) in my applications, in place of typical raster images or even text in some cases. SVG graphics are defined through code, as per the examples here: https://www.w3schools.com/graphics/svg_examples.asp
As the images are defined with code, you can CONCATENATE() strings of code together while including application variables, to make the images dynamic. In this way, you could have animated images which react to user input.
Another thing to note, is SVG graphics scale/resize losslessly (unlike raster images). So everything will always look crisp! Also, when properly optimized, the file-sizes are often smaller than raster images.
There is a trade-off, in that the device must decode and render the graphics. Older devices/computers may have a hard time rendering poorly optimized or complex SVG code. Also, older browsers do not support some SVG functionality.
Some examples:
Richer looking detail headers, and small filesize gradient backgrounds:
SVG thumbnails, without having to rely on external services like Image Placeholder:
Dynamic progress bars:
Did someone try to use a SVG code for the Launch image?
I donโt get it working.
My goal is to use dynamic SVG Code depending on the USERLOCALE(). Like a logo with some additional text like โWelcomeโ in different languages, depending on the USERLOCALE().
Thanks @Jonathon Iโm using this very simple SVG as the Launch image and the Background image.
data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" version="1.1"> <rect width="200" height="100" stroke="black" stroke-width="6" fill="green"/> </svg>
Both are not working. The show up in the editor, but not in the App. There is also a warning message:
Are you sure BackgroundImage url 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" version="1.1"> <rect width="200" height="100" stroke="black" stroke-width="6" fill="green"/> </svg>' refers to an image?
Are you sure PageBackgroundImage url 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" version="1.1"> <rect width="200" height="100" stroke="black" stroke-width="6" fill="green"/> </svg>' refers to an image?
Here is a nice Video of what you can do with SVG: https://www.youtube.com/watch?v=z8EppLDkgtw
In the Video you can see some examples from codepen.io.
There I found this nice loader: https://codepen.io/ryanallen/pen/OPpbbR
Here is the AppSheet code for the first one. Note: If you want to use it in forms, you should choose column type SHOW and Category IMAGE. Because if you choose column type IMAGE, than you have a gray box around the SVG.
โdata:image/svg+xml;utf8,
<svg xmlns=""http://www.w3.org/2000/svg""
width=""770"" height=""200""
viewBox=""0 0 80 80""
preserveAspectRatio=""xMidYMin meet""
xml:space=""preserve"">
<path
fill=""rgb(63,129,141)""
stroke=""black""
stroke-width=""0.5""
d=""M40,72C22.4,72,8,57.6,8,40C8,22.4,
22.4,8,40,8c17.6,0,32,14.4,32,32c0,1.1-0.9,2-2,2
s-2-0.9-2-2c0-15.4-12.6-28-28-28S12,24.6,12,40s12.6,
28,28,28c1.1,0,2,0.9,2,2S41.1,72,40,72z""
>
<animateTransform
attributeType=""xml""
attributeName=""transform""
type=""rotate""
from=""0 40 40""
to=""360 40 40""
dur=""1.0s""
repeatCount=""indefinite""
/>
</path>
</svg>โ
This will look like:
Note: By using the combination of width=""770"" and preserveAspectRatio=""xMidYMin meet"", the SVG will be always centered. Because 770px seems to be the highest width in AppSheet (in Detail View).
A nice side effect: On mobile, the SVG will be smaller than on big screens.
Color Mixer 
This could be used in USERSETTINGS as well to generate the desired color. Then this RGB could be used all over the App.
Hey Fabian, just did some experimenting with SVG donut charts:
I have included two code snippets at the bottom of this post, โsimpleโ and โcomplexโ, although complex isnโt much more difficult. In any case, let me know if you have any issues - I havenโt actually tested this in my applications 
.
Some background info:
The circles are drawn with radius r="15.915...", which is the radius of a circle with circumference of 100. This will make your math easier in AppSheet as the input parameters can be numeric percentage values out of 100.
The stroke-dasharray parameter is used to make dashed lines. It takes two inputs: the length of the dash segment, and the gap between the next one. We always use a dash gap equal to the circles circumference, so we only see a single dash.
The stroke-dashoffset parameter, as the name implies, offsets the whole stroke along the path. This can be used to shift the donut chart segments so they arenโt overlapping eachother.
Simple
In the simple solution we eliminate the need for stroke-dashoffset by using cumulative percentages and drawing the segments ontop of eachother. The downside here is that the layers may bleed through eachother making the resulting image less โcrispโ (aka potentially less pretty), particularly on lower DPI screens.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42">
<g fill="none" stroke-width="3">
<circle cx="21" cy="21" r="15.91549430918952" stroke="orange" stroke-dasharray="100 100"></circle>
<circle cx="21" cy="21" r="15.91549430918952" stroke="green" stroke-dasharray="95 100"></circle>
<circle cx="21" cy="21" r="15.91549430918952" stroke="red" stroke-dasharray="45 100"></circle>
<circle cx="21" cy="21" r="15.91549430918952" stroke="blue" stroke-dasharray="25 100"></circle>
</g>
</svg>
Complex
The complex solution utilizes the stroke-dashoffset parameter by drawing the segments at their exact percentage value and shifting them around the donut chart accordingly.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42">
<g fill="none" stroke-width="3">
<circle cx="21" cy="21" r="15.91549430918952" stroke="blue" stroke-dasharray="25 100" stroke-dashoffset="0"></circle>
<circle cx="21" cy="21" r="15.91549430918952" stroke="red" stroke-dasharray="20 100" stroke-dashoffset="-25"></circle>
<circle cx="21" cy="21" r="15.91549430918952" stroke="green" stroke-dasharray="50 100" stroke-dashoffset="-45"></circle>
<circle cx="21" cy="21" r="15.91549430918952" stroke="orange" stroke-dasharray="5 100" stroke-dashoffset="-95"></circle>
</g>
</svg>
โdata:image/svg+xml;utf8,<svg width=โโ200"โ height="โ200"โ xmlns="โhttp://www.w3.org/2000/svgโ" xmlns:xlink="โhttp://www.w3.org/1999/xlinkโ"> <path id="โpath1"โ d="โM10,30 H190 M10,60 H190 M10,90 H190 M10,120 H190"โ> <use xlink:href=""#path1"" x="โ0"โ y="โ35"โ stroke="โblueโ" stroke-width="โ1"โ /> <text transform="โtranslate(0,35)โ" fill="โredโ" font-size="โ20"โ> <textPath xlink:href=""#path1"">This is a long long long text โฆ "
Donโt forget to wrap the expression in a CONCATENATE() to accommodate the textโฆ
CONCATENATE(
โdata:image/svg+xml;utf8,
<svg width=โโ200"โ height="โ200"โ xmlns="โhttp://www.w3.org/2000/svgโ" xmlns:xlink="โhttp://www.w3.org/1999/xlinkโ">
<path id="โpath1"โ d="โM10,30 H190 M10,60 H190 M10,90 H190 M10,120 H190"โ>
<use xlink:href=""%23path1"" x="โ0"โ y="โ35"โ stroke="โblueโ" stroke-width="โ1"โ />
<text transform="โtranslate(0,35)โ" fill="โredโ" font-size="โ20"โ> <textPath xlink:href=""%23path1"">",
[Text Field],
"
")
Otherwise - underline seems to work nicely too 
@aforrester and @Jonathon , thanks to both of you for sharing your wealth of information on the topic.
Do you know if there is also currently some way to resolve even using the inline <script> tags in an SVG?. It works fine when just ran directly in a browser, but for some reason, Appsheet will only pick up the explicit SVG data like <line>, <g>, etc. But will seemingly ignore the <script> information. For reference (this is the preformatted version for use directly in browser and expected result):
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<foreignObject x="0" y="0" width="100%" height="100%">
<svg viewBox="0 0 100 100">
<g id="vert-to-center" stroke="black" >
<line id="vtc1" x1="50" y1="0" />
<line id="vtc2" x1="100" y1="100" />
<line id="vtc3" x1="0" y1="100" />
</g>
</svg>
<script>
//<![CDATA[
const svgns = "http://www.w3.org/2000/svg";
const svg = document.querySelector("svg");
//point data
//list of border point values
const bpx1 = 50;
const bpy1 = 0;
const bpx2 = 100;
const bpy2 = 100;
const bpx3 = 0;
const bpy3 = 100;
//list of center point values
const ctrx = (bpx1 + bpx2 + bpx3)/3;
const ctry = (bpy1 + bpy2 + bpy3)/3;
//list of scaling values for internal rules
const s0 = 1.00;
const s1 = 0.75;
const s2 = 0.50;
const s3 = 0.25;
const s5 = 0.00;
//list of values for internal rule points
const ipx1 = bpx1 + (ctrx - bpx1) * s3;
const ipy1 = bpy1 + (ctry - bpy1) * s3;
const ipx2 = bpx2 + (ctrx - bpx2) * s3;
const ipy2 = bpy2 + (ctry - bpy2) * s3;
const ipx3 = bpx3 + (ctrx - bpx3) * s3;
const ipy3 = bpy3 + (ctry - bpy3) * s3;
//list of internal points
const ip1 = ipx1+","+ipy1;
const ip2 = ipx2+","+ipy2;
const ip3 = ipx3+","+ipy3;
//list of border points
const bp1 = bpx1+","+bpy1
const bp2 = bpx2+","+bpy2
const bp3 = bpx3+","+bpy3
//create border
let border = document.createElementNS(svgns, "path");
border.setAttribute("id", "border");
border.setAttribute("stroke", "pink");
border.setAttribute("fill", "#ff00000f");
border.setAttribute("d",
"M"+bp1+
"L"+bp2+
"L"+bp3+
"L"+bp1);
svg.appendChild(border);
//create internal rulers
let intern1 = document.createElementNS(svgns, "path");
intern1.setAttribute("id", "scale3q");
intern1.setAttribute("stroke", "blue");
intern1.setAttribute("stroke-width", .3);
intern1.setAttribute("fill", "#00000000");
intern1.setAttribute("d",
"M"+ip1+
"L"+ip2+
"L"+ip3+
"L"+ip1);
svg.appendChild(intern1);
//debugging point
let devPoint1 = document.createElementNS(svgns, "circle");
devPoint1.setAttribute("id", "point");
devPoint1.setAttribute("stroke", "green");
devPoint1.setAttribute("fill", "#ffffff0f");
devPoint1.setAttribute("cx", ipx1);
devPoint1.setAttribute("cy", ipy1);
devPoint1.setAttribute("r", 3);
let devPoint2 = document.createElementNS(svgns, "circle");
devPoint2.setAttribute("id", "point");
devPoint2.setAttribute("stroke", "green");
devPoint2.setAttribute("fill", "#ffffff0f");
devPoint2.setAttribute("cx", ipx2);
devPoint2.setAttribute("cy", ipy2);
devPoint2.setAttribute("r", 3);
let devPoint3 = document.createElementNS(svgns, "circle");
devPoint3.setAttribute("id", "point");
devPoint3.setAttribute("stroke", "green");
devPoint3.setAttribute("fill", "#ffffff0f");
devPoint3.setAttribute("cx", ipx3);
devPoint3.setAttribute("cy", ipy3);
devPoint3.setAttribute("r", 3);
svg.appendChild(devPoint1);
svg.appendChild(devPoint2);
svg.appendChild(devPoint3);
//create quadrant separation lines
let vtc1 = document.getElementById("vtc1");
let vtc2 = document.getElementById("vtc2");
let vtc3 = document.getElementById("vtc3");
vtc1.setAttribute("x1", bpx1)
vtc1.setAttribute("y1", bpy1)
vtc1.setAttribute("x2", ctrx)
vtc1.setAttribute("y2", ctry)
vtc2.setAttribute("x1", bpx2)
vtc2.setAttribute("y1", bpy2)
vtc2.setAttribute("x2", ctrx)
vtc2.setAttribute("y2", ctry)
vtc3.setAttribute("x1", bpx3)
vtc3.setAttribute("y1", bpy3)
vtc3.setAttribute("x2", ctrx)
vtc3.setAttribute("y2", ctry)
// ]]>
</script>
</foreignObject>
</svg>
This is the formatted SVG code for use in the Appsheet environment and its result:
data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<foreignObject x="0" y="0" width="100%" height="100%">
<svg viewBox="0 0 100 100">
<g id="vert-to-center" stroke="black" >
<line id="vtc1" x1="50" y1="0" />
<line id="vtc2" x1="100" y1="100" />
<line id="vtc3" x1="0" y1="100" />
</g>
</svg>
<script>
//<![CDATA[
const svgns = "http://www.w3.org/2000/svg";
const svg = document.querySelector("svg");
//point data
//list of border point values
const bpx1 = 50;
const bpy1 = 0;
const bpx2 = 100;
const bpy2 = 100;
const bpx3 = 0;
const bpy3 = 100;
//list of center point values
const ctrx = (bpx1 + bpx2 + bpx3)/3;
const ctry = (bpy1 + bpy2 + bpy3)/3;
//list of scaling values for internal rules
const s0 = 1.00;
const s1 = 0.75;
const s2 = 0.50;
const s3 = 0.25;
const s5 = 0.00;
//list of values for internal rule points
const ipx1 = bpx1 + (ctrx - bpx1) * s3;
const ipy1 = bpy1 + (ctry - bpy1) * s3;
const ipx2 = bpx2 + (ctrx - bpx2) * s3;
const ipy2 = bpy2 + (ctry - bpy2) * s3;
const ipx3 = bpx3 + (ctrx - bpx3) * s3;
const ipy3 = bpy3 + (ctry - bpy3) * s3;
//list of internal points
const ip1 = ipx1+","+ipy1;
const ip2 = ipx2+","+ipy2;
const ip3 = ipx3+","+ipy3;
//list of border points
const bp1 = bpx1+","+bpy1
const bp2 = bpx2+","+bpy2
const bp3 = bpx3+","+bpy3
//create border
let border = document.createElementNS(svgns, "path");
border.setAttribute("id", "border");
border.setAttribute("stroke", "pink");
border.setAttribute("fill", "%23ff00000f");
border.setAttribute("d",
"M"+bp1+
"L"+bp2+
"L"+bp3+
"L"+bp1);
svg.appendChild(border);
//create internal rulers
let intern1 = document.createElementNS(svgns, "path");
intern1.setAttribute("id", "scale3q");
intern1.setAttribute("stroke", "blue");
intern1.setAttribute("stroke-width", .3);
intern1.setAttribute("fill", "%2300000000");
intern1.setAttribute("d",
"M"+ip1+
"L"+ip2+
"L"+ip3+
"L"+ip1);
svg.appendChild(intern1);
//debugging point
let devPoint1 = document.createElementNS(svgns, "circle");
devPoint1.setAttribute("id", "point");
devPoint1.setAttribute("stroke", "green");
devPoint1.setAttribute("fill", "%23ffffff0f");
devPoint1.setAttribute("cx", ipx1);
devPoint1.setAttribute("cy", ipy1);
devPoint1.setAttribute("r", 3);
let devPoint2 = document.createElementNS(svgns, "circle");
devPoint2.setAttribute("id", "point");
devPoint2.setAttribute("stroke", "green");
devPoint2.setAttribute("fill", "%23ffffff0f");
devPoint2.setAttribute("cx", ipx2);
devPoint2.setAttribute("cy", ipy2);
devPoint2.setAttribute("r", 3);
let devPoint3 = document.createElementNS(svgns, "circle");
devPoint3.setAttribute("id", "point");
devPoint3.setAttribute("stroke", "green");
devPoint3.setAttribute("fill", "%23ffffff0f");
devPoint3.setAttribute("cx", ipx3);
devPoint3.setAttribute("cy", ipy3);
devPoint3.setAttribute("r", 3);
svg.appendChild(devPoint1);
svg.appendChild(devPoint2);
svg.appendChild(devPoint3);
//create quadrant separation lines
let vtc1 = document.getElementById("vtc1");
let vtc2 = document.getElementById("vtc2");
let vtc3 = document.getElementById("vtc3");
vtc1.setAttribute("x1", bpx1)
vtc1.setAttribute("y1", bpy1)
vtc1.setAttribute("x2", ctrx)
vtc1.setAttribute("y2", ctry)
vtc2.setAttribute("x1", bpx2)
vtc2.setAttribute("y1", bpy2)
vtc2.setAttribute("x2", ctrx)
vtc2.setAttribute("y2", ctry)
vtc3.setAttribute("x1", bpx3)
vtc3.setAttribute("y1", bpy3)
vtc3.setAttribute("x2", ctrx)
vtc3.setAttribute("y2", ctry)
// ]]>
</script>
</foreignObject>
</svg>
Youโll notice that only a few lines at the top are dedicated to explicit SVG (what shows in the second image) whereas most else is supposed to be pulled from the inline JS but just gets omitted.
