SVG problem on Mozilla Firefox

[markbowhill]

Hi everyone.

Im learning about the SVGs image, is so greate and look fabulouse, but, when i try on Firefox, that SVG don't show.

On Chrome Version 124.0.6367.208 (Build oficial) (64 bits):

On Mozilla Firefox Version 126.0 (64-bit):

There is a explanation or solution to this?

[Joseph_Seddik]

What is your svg code please?

[markbowhill]

Sorry for delay Joseph.

Here's my SVG code:

CONCATENATE(
'data&colon;image/svg+xml;utf8,<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
  <line x1="10%" y1="50%" x2="90%" y2="50%" stroke="DodgerBlue" stroke-width="2" />

  <circle cx="10%" cy="50%" r="20" fill="DodgerBlue" stroke="DodgerBlue" stroke-width="2" />
  <text x="10%" y="53%" font-size="20" text-anchor="middle" fill="White">1</text>

  <circle cx="30%" cy="50%" r="20" fill="',IF([id_estado]>1,'DodgerBlue','White'),'" stroke="DodgerBlue" stroke-width="2" />
  <text x="30%" y="53%" font-size="20" text-anchor="middle" fill="',IF([id_estado]>1,'White','DodgerBlue'),'">2</text>

  <circle cx="50%" cy="50%" r="20" fill="',IF([id_estado]>2,'DodgerBlue','White'),'" stroke="DodgerBlue" stroke-width="2" />
  <text x="50%" y="53%" font-size="20" text-anchor="middle" fill="',IF([id_estado]>2,'White','DodgerBlue'),'">3</text>

  <circle cx="70%" cy="50%" r="20" fill="',IF([id_estado]>3,'DodgerBlue','White'),'" stroke="DodgerBlue" stroke-width="2" />
  <text x="70%" y="53%" font-size="20" text-anchor="middle" fill="',IF([id_estado]>3,'White','DodgerBlue'),'">4</text>

  <circle cx="90%" cy="50%" r="20" fill="',IF([id_estado]>4,'DodgerBlue','White'),'" stroke="DodgerBlue" stroke-width="2" />
  <text x="90%" y="53%" font-size="20" text-anchor="middle" fill="',IF([id_estado]>4,'White','DodgerBlue'),'">5</text>
</svg>'
)

[markbowhill]

Colors in exagesimal produce errors in Mozilla Firefox, so, that's why I use colors with names.

[Joseph_Seddik]

Your SVG code looks correct. Sometimes svg generators like Adobe Illustrator generate extra mask lines that are not always understood by Firefox engine, which is neither your case; your code is just simple.

I'm sorry I don't know why it is not showing in your case, maybe others here can help you better, or you might want to contact AppSheet support for this.

[markbowhill]

Do you mean... maybe becouse it's installed Adobe Illustrator, the SVG generation on Mozilla Firefox fails?

Don't worry, it's a weird error, thanks for response anyway.

[Kabuliño]

I think the problem may be between the double and single quotes. Try using triple double quotes in the Fill fields, example:

fill=""",IF([state_id]>3,'DodgerBlue','White'),"""

You can also use RGB colors to expand the number of color options.

[markbowhill]

I tested with RGB format but... same result.

On Chrome:

On Mozilla Firefox:

[Tenente_Ramon]

Hi,

I've the same problem here with Firefox.

On Chrome (127.0.6533.99 64 bits):

On Firefox (129.0 64-bits)

My SVG code is:

CONCATENATE("data&colon;image/svg+xml;utf8, <svg xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 160 70""> 

<defs>
    <linearGradient id=""grad1"" x1=""0%"" y1=""0%"" x2=""100%"" y2=""0%"">
      <stop offset=""0%"" style=""stop-color:%2300CD15;stop-opacity:1"" />
      <stop offset=""100%"" style=""stop-color:%2399C39E;stop-opacity:1"" />
    </linearGradient>
  </defs>
<rect x=""5"" y=""10"" rx=""12"" ry=""13"" width=""150"" height=""50"" stroke=""black"" fill=""%23686463""  />


 <rect x=""5"" y=""",
if(and(or(13>5,12>5), [E]<decimal(.30)), 10+((7-(7*([E]/decimal(.30))))/2), 10),""" rx=""12"" ry=""13"" width=""",[E]*150,"""  

height=""",

if(and(12>5,[E]<decimal(.30)), (50-(12-if(or(12>19, 13>19),-7,5)))+((12-if(or(12>19, 13>19),-7,5))*([E]/decimal(.30))), 50)

,""" 
stroke=""black"" fill=""url(%23grad1)"" stroke-opacity="".5""  />

<rect x=""5"" y=""10"" rx=""12"" ry=""13"" width=""150"" height=""50"" stroke=""black"" stroke-width = ""2"" fill=""none""  />

<text font-family=""Roboto,Arial,sans-serif"" font-size=""30px"" font-weight=""300"" stroke-width=""5"" text-anchor=""middle"" fill=""%23FFFFFF"" x=""50%"" y=""45"">",[E]*100,"%</text>
</svg>")

Any solution?

---