Error building SVG

[James_McFarlane]

Hi guys,

I am trying to build a dynamic SVG with a concatenate, this works:

But this does not:

CONCATENATE("data&colon;image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 420'><rect x='10' y='10' width='220' height='20' stroke='white' stroke-width='1' fill='none'/></svg>")

[Steve]

Huh?

[James_McFarlane]

Opps, pasted the same image twice. The columns used to build the svg have app formulas, could that be the culprit?

[SkrOYC]

Can you paste here the code from the expression that's not working?

[James_McFarlane]

Here is the code:

CONCATENATE("data&colon;image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 420'><rect x='",[etiqueta_x],"' y='",[etiqueta_y],"' width='220' height='20' stroke='white' stroke-width='1' fill='none'/></svg>")

And this is the error message:
Expression 'CONCATENATE("data&colon;image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 420'><rect x='",[etiqueta_x],"' y='",[etiqueta_y],"' width='220' height='20' stroke='white' stroke-width='1' fill='none'/></svg>")' was unable to be parsed: The given key was not present in the dictionary.. 

[SkrOYC]

Apparently, there is no problem with your syntax.

CONCATENATE(
 "data&colon;image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 420'><rect x='",
 [etiqueta_x],
 "' y='",
 [etiqueta_y],
 "' width='220' height='20' stroke='white' stroke-width='1' fill='none'/></svg>"
)

Try contacting support

[Steve]

I suspect the problem is with the double-quoted strings that begin with a single quote. The parser library doesn't like that combination, as I recall. It may also not like those that end with a dangling single quote. Notice how those single quotes have been removed in the error text.

[SkrOYC · Accepted solution]

Ahh!! You are right! I remember this but when dealing with a Webhook JSON body, that's why I didn't make the relation to it. 

Try adding a space after the apostrophe:

CONCATENATE(
 "data&colon;image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 420'><rect x=' ",
 [etiqueta_x],
 "' y=' ",
 [etiqueta_y],
 "' width='220' height='20' stroke='white' stroke-width='1' fill='none'/></svg>"
)

[James_McFarlane]

Hi @SkrOYC that did remove the error message. But the svg will not render because of the space. This is how finally got it to work:

substitute(CONCATENATE("data:image/svg+xml;utf8,
<svg xmlns='http://www.w3.org/2000/svg' viewBox='-226 0 752 180' 
font-family='sans-serif' text-anchor='middle'>
<rect x='@",[etiqueta_x],"@' y='@",[etiqueta_y],"@' 
width= '@",[etiqueta_width],"@' height= '@",[etiqueta_height],"@' 
stroke='black' stroke-width='1' fill='none' />","<rect x='@",
[pregunta_x],"@' y='@",[pregunta_y],"@' width= '@",
[pregunta_width],"@' height= '@",[pregunta_height],"@' 
stroke='black' stroke-width='1' fill='none' />",
" </svg> ")
,"@","")