Adding a svg object

[Anonymous]

Hi everyone,

I want to add a SVG status/progress bar. However when I inser the code, I dont see anything. Any suggestions why? I am working on a german environment. Maybe some syntax issue?

"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100px%22%20height%3D%22100px%22%3E"

&
"%3Cpath%20fill%3D%22none%22%20style%3D%22stroke-width%3A18%3Bstroke%3Argb%28230%2C230%2C230%29%3Bstroke-linecap%3Around%3B%22%20d%3D%22" &
"M%20" &
Text(50-40*Sin(Pi()/4)) & "%20" & Text(50+40*Cos(Pi()/4)) &
"%20A%20" &
"40%2040%200%201%201%20" & Text(50-40*Sin(2*Pi()-Pi()/4)) & "%20" & Text(50+40*Cos(2*Pi()-Pi()/4)) &
"%22%3E" &
"%3C%2Fpath%3E" &
"%3Cpath%20fill%3D%22none%22%20style%3D%22stroke-width%3A18%3Bstroke%3Argb%2869%2C204%2C206%29%3Bstroke-linecap%3Around%3B%22%20d%3D%22" &
"M%20" &
Text(50-40*Sin(Pi()/4)) & "%20" & Text(50+40*Cos(Pi()/4)) &
"%20A%20" &
"40%2040%200%20" & If(Slider1.Value/Slider1.Max>Pi()/(2*(Pi()-Pi()/4));"1";"0") & "%201%20" & Text(50-40*Sin(Pi()/4+2*(Pi()-Pi()/4)*Slider1.Value/Slider1.Max)) & "%20" & Text(50+40*Cos(Pi()/4+2*(Pi()-Pi()/4)*Slider1.Value/Slider1.Max)) &
"%22%3E" &
"%3C%2Fpath%3E" &
"%3C%2Fsvg%3E"

[RandyHayes]

@Anonymous 

Change the : in the first line to ":"

Should be "data:image"

[Anonymous]

Awesome, thanks! The circle is working now. However the original code is still not working. I'll send a screenshot below.

[RandyHayes]

@Anonymous 

Odd!! Looks exactly like mine except for the 2 ;'s 

I don't know if there is some encoding conversion that is throwing it off because of the difference in language. 

Perhaps try this formula:

With({p4:If(Slider2.Value/Slider2.Max>Pi()/(2*(Pi()-Pi()/4));"1";"0"),
      pSin:40*Sin(Pi()/4),
      pCos:40*Cos(Pi()/4),
      sVal:Slider2.Value/Slider2.Max },

"data:image/svg+xml,"&

EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='100px' height='100px'>
    
    <path fill='none' style='stroke-width:18;stroke:rgb(230,230,230);stroke-linecap:round;' d='M " & Text(50-pSin) & " " & Text(50+pCos) & " A 40 40 0 1 1 " & Text(50-40*Sin(2*Pi()-Pi()/4)) & " " & Text(50+40*Cos(2*Pi()-Pi()/4)) & "'>
     </path>
     
    <path fill='none' style='stroke-width:18;stroke:rgb(69,204,206);stroke-linecap:round;' d='M " & Text(50-pSin) & " " & Text(50+pCos) & " A 40 40 0 " & 
     p4 & " 1 " & Text(50-40*Sin(Pi()/4+2*(Pi()-Pi()/4)*sVal)) & " " & Text(50+40*Cos(Pi()/4+2*(Pi()-Pi()/4)*sVal)) & "'>
     </path>

     
</svg>")

)

Note again that if this gets encoded in this post and the data : image changes then change it back to a colon :

[Anonymous]

At least I see something now.. however not as intended:

[RandyHayes]

@Anonymous 

I believe something is going on in the encode on your side.  I can't say why, just seems like those paths are way crazy!

Here is what I would suggest (and this will be somewhat painful)

Put a Label on a screen and make it big.  Set the Text property to the EXACT formula I sent you.

Here comes the pain...compare what you see in that label to what I show (Image for exactness):

I will put it here as well as Text, but I bet the forum editor will somehow dork it up.

data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27100px%27%20height%3D%27100px%27%3E%0D%0A%20%20%20%20%0D%0A%20%20%20%20%3Cpath%20fill%3D%27none%27%20style%3D%27stroke-width%3A18%3Bstroke%3Argb%28230%2C230%2C230%29%3Bstroke-linecap%3Around%3B%27%20d%3D%27M%2021.71572875%2078.28427125%20A%2040%2040%200%201%201%2078.28427125%2078.28427125%27%3E%0D%0A%20%20%20%20%20%3C%2Fpath%3E%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20%3Cpath%20fill%3D%27none%27%20style%3D%27stroke-width%3A18%3Bstroke%3Argb%2869%2C204%2C206%29%3Bstroke-linecap%3Around%3B%27%20d%3D%27M%2021.71572875%2078.28427125%20A%2040%2040%200%200%201%2013.8069179%2032.96882834%27%3E%0D%0A%20%20%20%20%20%3C%2Fpath%3E%0D%0A%0D%0A%20%20%20%20%20%0D%0A%3C%2Fsvg%3E

See if there is some difference and that might lead to the issue.

[Anonymous]

No pain.. no gain . I did the comparison and below is what the differences are. However I did not find out what the reason could be:

[RandyHayes · Accepted solution]

@Anonymous 

I see the issue...your Text function is converting the text into your language format - periods are replaced by commas.  This will not work for the SVG.

Change your two paths in your image formula to the following formula (note: this is not a complete formula as I got tired of fussing with the colon on the data image part in previous posts - this is just the two Path objects):

    <path fill='none' style='stroke-width:18;stroke:rgb(230,230,230);stroke-linecap:round;' d='M " & Text(50-pSin, "#.0########", "en-US") & " " & Text(50+pCos, "#.0#######", "en-US") & " A 40 40 0 1 1 " & Text(50-40*Sin(2*Pi()-Pi()/4), "#.0########", "en-US") & " " & Text(50+40*Cos(2*Pi()-Pi()/4), "#.0########", "en-US") & "'>
     </path>
     
    <path fill='none' style='stroke-width:18;stroke:rgb(69,204,206);stroke-linecap:round;' d='M " & Text(50-pSin, "#.0########", "en-US") & " " & Text(50+pCos, "#.0########", "en-US") & " A 40 40 0 " & 
     p4 & " 1 " & Text(50-40*Sin(Pi()/4+2*(Pi()-Pi()/4)*sVal), "#.0########", "en-US") & " " & Text(50+40*Cos(Pi()/4+2*(Pi()-Pi()/4)*sVal), "#.0########", "en-US") & "'>
     </path>

Let's see where that gets you.

[CarlosFigueira · Accepted solution]

That is it - the Text function by default in German uses ',' as the decimal separator, and the SVG specification requires '.' as the decimal separator. If you replace your original expression with the one below, it should work. The second parameter to the Text function ("[$-de-DE]0,000") determines the format (whole part, followed by three decimals, in German), and the third parameter ("en-US") instructs the function to use the English format when converting the number to text

"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100px%22%20height%3D%22100px%22%3E"

&
"%3Cpath%20fill%3D%22none%22%20style%3D%22stroke-width%3A18%3Bstroke%3Argb%28230%2C230%2C230%29%3Bstroke-linecap%3Around%3B%22%20d%3D%22" &
"M%20" &
Text(50-40*Sin(Pi()/4);"[$-de-DE]0,000";"en-US") & "%20" & Text(50+40*Cos(Pi()/4);"[$-de-DE]0,000";"en-US") &
"%20A%20" &
"40%2040%200%201%201%20" & Text(50-40*Sin(2*Pi()-Pi()/4);"[$-de-DE]0,000";"en-US") & "%20" & Text(50+40*Cos(2*Pi()-Pi()/4);"[$-de-DE]0,000";"en-US") &
"%22%3E" &
"%3C%2Fpath%3E" &
"%3Cpath%20fill%3D%22none%22%20style%3D%22stroke-width%3A18%3Bstroke%3Argb%2869%2C204%2C206%29%3Bstroke-linecap%3Around%3B%22%20d%3D%22" &
"M%20" &
Text(50-40*Sin(Pi()/4);"[$-de-DE]0,000";"en-US") & "%20" & Text(50+40*Cos(Pi()/4);"[$-de-DE]0,000";"en-US") &
"%20A%20" &
"40%2040%200%20" & If(Slider1.Value/Slider1.Max>Pi()/(2*(Pi()-Pi()/4));"1";"0") & "%201%20" & Text(50-40*Sin(Pi()/4+2*(Pi()-Pi()/4)*Slider1.Value/Slider1.Max);"[$-de-DE]0,000";"en-US") & "%20" & Text(50+40*Cos(Pi()/4+2*(Pi()-Pi()/4)*Slider1.Value/Slider1.Max)) &
"%22%3E" &
"%3C%2Fpath%3E" &
"%3C%2Fsvg%3E"

(somehow the code editor keeps changing 'data:image/svg..." to 'data:image/svg...' - you'll need to replace the ':' with ':' for this to work)

 Hope this helps!

[Anonymous]

Woow thanks! This was it. Finally, it works. You all area great. Thanks again!