Hi everyone,
Inside workshop I would need to display a SVG code (and not a png etc)
How can I do that? I have been thinking to embed it into a markdown widget but it does not seem to render?
This is the SVG:
<svg fill="#047F04" style="transform:rotate(-45deg)" viewBox="-30 -30 60 60" xmlns="http://www.w3.org/2000/svg">
<polyline points="-20 4.25 5.75 4.25 -7.5 17.5 2.5 17.5 20 0 2.5 -17.5 -7.5 -17.5 5.75 -4.25 -20 -4.25 -20 4.25" />
</svg>
Thank you!
Tried this out and it renders fine in a Mardown widget as long as you wrap the string in triple backtick to indicate code formatting. So:
<svg fill="#047F04" style="transform:rotate(-45deg)" viewBox="-30 -30 60 60" xmlns="http://www.w3.org/2000/svg">
<polyline points="-20 4.25 5.75 4.25 -7.5 17.5 2.5 17.5 20 0 2.5 -17.5 -7.5 -17.5 5.75 -4.25 -20 -4.25 -20 4.25" />
</svg>
renders to:
If you’re dynamically producing the SVG definition (or any other text that you intend for a user to copy/paste) use a Variable Transform with the String Concatenation to add the wrapper backticks, making note that you’ll also need them to be on their own line.
If it’s not a dynamic svg you want to render, then you should consider saving the SVG as a file. You can then upload it in an accessible project/folder as a raw file. You can then link it within a Media Preview widget. The URL to the file should be formatted as so:
https://<enrollment_url>/blobster/api/salt/ri.blobster.main.image.<RID>
It is indeed a dynamic svg, interestingly though I can probably use this solution as I can have a variable dynamically changing the url depending on a specific KPI value (I need to show either an arrow green going up, an arrow red going down or a yellow arrow stable) and have the media preview display it. Still, I would have liked to have a markdown doing this.
I tried it, but I only see the SVG code inside the markdown and not the desired output (a green arrow going up). I see the same think in your output.
What am I missing? Thank you
The Workshop Markdown widget won’t render HTML (though you can format it as code as in the prior suggestion), but you can use emojis in the Markdown widget which may work for your use case.