Clojurians Log v2

Is there a simple way to escape html? I seem to be overlooking something in Rum I think

I'd like to use an svg

<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">}}]])
<circle cx="32.5" cy="32.5" r="31" transform="translate(16)" stroke="#BF9C8C" stroke-width="3"/>
<circle cx="32.5" cy="32.5" r="31" transform="translate(16 31)" stroke="#BF9C8C" stroke-width="3"/>
<circle cx="32.5" cy="32.5" r="31" transform="translate(0 15)" stroke="#BF9C8C" stroke-width="3"/>
<circle cx="32.5" cy="32.5" r="31" transform="translate(31 15)" stroke="#BF9C8C" stroke-width="3"/>
</svg>

is that code in a variable somewhere?

like, as a string?

you can do [:div {:dangerouslySetInnerHTML {:__html my-svg}}]

this is more of a react thing

one does not simply splice a string into the virtual dom

a better method would be to either

1. make the svg available over HTML and use an img tag

2. base64-encode it in CSS and have it be a background-image on some id or class

anyway, see this: https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

It appears to exhibit the same behaviour whether in a def or or inline. I did to it in a previous project (with manual escaping) as I was using inline svg and symbols to split the svg into reusable components that were composed in different ways throughout the page. It’s better for performance as it’s streamed with HTML and reduces extra requests.

cc @mattly

@grounded_sage why not convert them to hiccup syntax? you could still render them and compose them at the server side. also, if you're going to have a react app, then you're going to ship your JS code anyway, so you could alternatively build your SVG there and it wouldn't cost any extra requests