How to display SVG?

[markusgritsch]

When I run the following simple View,

from lona_picocss.html import HTML, H1, Button
from lona_picocss import install_picocss
from lona import App, View

app = App(__file__)


install_picocss(app, debug=True)  # remove 'debug' in production

@app.route('/')
class HelloWorldView(View):
    def handle_button_click(self, input_event):
        self.button.set_text('I was clicked')

    def handle_request(self, request):
        self.button = Button(
            'Click Me',
            handle_click=self.handle_button_click,
            _style={'width' : '8em'},
        )

        self.svg = HTML('''<svg width="400" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>''')

        return HTML(
            H1('Hello World'),
            self.button,
            self.svg
        )


app.run(host='0.0.0.0')

the SVG after the button is not displayed:

However, if I save the webpage with the Browser to a static HTML file and load this again into the browser, it renderes fine:

I cannot spot any difference in the Inspector.

When I use interactive=False in the route, it is rendered, but why is the SVG not rendered in the interactive View, and how can it be achieved?

[fscherf]

Hi @markusgritsch!

Currently, SVGs are not officially supported, using lona.html. What is the problem here? The client uses Document.createElement(), for any node that is about to be rendered. This includes the svg tag, and all tags like circle within. To make SVGs work, the client would have to use Document.createElementNS() for the the svg tag.

The problem disappears on non-interactive views, because HTML from non-interactive views is handled as plain text by the browser.

I integrated svg icons for lona-picocss this weekend, but i used JavaScript to load the SVGs ( lona-web-org/lona-picocss@f3530a4#diff-7505eda20484b0ab66eb31727c7d72dad0fbf8ce824cbbbdafceffbb446c4221)

I think we should promote this discussion to an issue, and add the "enhancement" flag

[markusgritsch]

Discussion continues in issue #343.