SVG scaling issue

[markusgritsch]

I'm running the following on the fscherf/topic/html-refactoring branch.

I would like to get an SVG dynamically scaled to the browser width. It works, when returning the SVG directly like this:

from lona.html import HTML
from lona import App, View

app = App(__file__)
app.settings.CLIENT_VERSION = 1

@app.route('/')
class HelloWorldView(View):
    def handle_request(self, request):
        svg = '''
<svg width="100%" height="50px" viewBox="0 0 20 10" preserveAspectRatio="none">
    <polygon fill=red stroke-width=0 points="0,10 20,10 10,0" />
</svg>'''
        return svg

app.run()

However, when putting the SVG inside an HTML() class, scaling does not work anymore:

from lona.html import HTML
from lona import App, View

app = App(__file__)
app.settings.CLIENT_VERSION = 1

@app.route('/')
class HelloWorldView(View):
    def handle_request(self, request):
        svg = '''
<svg width="100%" height="50px" viewBox="0 0 20 10" preserveAspectRatio="none">
    <polygon fill=red stroke-width=0 points="0,10 20,10 10,0" />
</svg>'''
        return HTML(
            svg,
        )

app.run()

I don't understand why this is the case, since the DOM looks similar to me.

[markusgritsch]

Ah, I spotted the bug. SVG is XML and thus case sensitive. viewbox and preserveaspectratio must have correct capitalization.

[fscherf]

Oh i didn't know that. So its not a bug in Lona right?

[markusgritsch]

Oh i didn't know that. So its not a bug in Lona right?

Well, IMO it is, because the svg variable contains the tags correctly capitalized.

[fscherf]

I am sorry, it took me a while to spot the difference between your two examples. In the first example, you return a string, in the second one,
you return node tree. So in the first example, neither the parsing code on the server nor the rendering code on the client run. So it is really a rendering problem, and is reproducible with example2.

[fscherf]

I found the problem! You are right, the rendering problem is caused because the browser expects svg attributes correctly cased (preserveAspectRatio != preserveaspectratio), and this only happens if the svg tag is parsed, because lona uses
https://docs.python.org/3/library/html.parser.html#html.parser.HTMLParser.handle_starttag which intentionally converts attributes to lower case.

[fscherf]

This is pretty deeply anchored in the html.parsing.HTMLParser implementation: https://github.com/python/cpython/blob/main/Lib/html/parser.py#L327
Maybe we have to switch to an XML parser, instead of an HTML parser https://docs.python.org/3/library/xml.etree.elementtree.html

[fscherf]

I created an issue for this bug (#383)