Hi there. I have noticed an issue with svg HTML code rendering.
If I generate the code dynamically from an option set attribute the svg icon does not render in the editor, but works fine in the preview.
If I paste the code directly into the HTML element, it works as expected.
The other oddness is that with the code directly pasted into the HTML I get scrollbars, but with the dynamic code I get no scrollbars
Anyone else have this issue. Just a pain when designing as I have to go to the preview window too often.
I have tried many svgs but didnt have this problem. If you give some examples, maybe I can help. But it is mostly about the size of svg, size of html element, and the positioning of the html element in the page.
If I understand what you’re saying, that’s expected behavior. In the first case, you’re using a dynamic expression; and in the second case, you’re pasting the actual SVG code - i.e. a string literal.
Bubble simply doesn’t evaluate expressions in the editor - only at runtime in the context of the rendered page.
You’ll notice the same phenomenon for Image elements if you use a static URL versus an expression which evaluates to a URL.
(In fact, Bubble recently introduced the Canvas placeholder property for Image and Text elements to help devs better visualize the layout within the editor.)
Hi. The svg renders fine on the frontend, just not in the editor (when pulling the code form an option set attribute), but @sudsy explained the reasoning, so not a bug, just a bit of ux adjustment when designing.
