adding svg element

main.py

@@ -146,6 +146,18 @@ with example(ui.image):
     base64 = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABIAAAAAQAAAEgAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAACKgAwAEAAAAAQAAACMAAAAA/8IAEQgAIwAiAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAMCBAEFAAYHCAkKC//EAMMQAAEDAwIEAwQGBAcGBAgGcwECAAMRBBIhBTETIhAGQVEyFGFxIweBIJFCFaFSM7EkYjAWwXLRQ5I0ggjhU0AlYxc18JNzolBEsoPxJlQ2ZJR0wmDShKMYcOInRTdls1V1pJXDhfLTRnaA40dWZrQJChkaKCkqODk6SElKV1hZWmdoaWp3eHl6hoeIiYqQlpeYmZqgpaanqKmqsLW2t7i5usDExcbHyMnK0NTV1tfY2drg5OXm5+jp6vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAQIAAwQFBgcICQoL/8QAwxEAAgIBAwMDAgMFAgUCBASHAQACEQMQEiEEIDFBEwUwIjJRFEAGMyNhQhVxUjSBUCSRoUOxFgdiNVPw0SVgwUThcvEXgmM2cCZFVJInotIICQoYGRooKSo3ODk6RkdISUpVVldYWVpkZWZnaGlqc3R1dnd4eXqAg4SFhoeIiYqQk5SVlpeYmZqgo6SlpqeoqaqwsrO0tba3uLm6wMLDxMXGx8jJytDT1NXW19jZ2uDi4+Tl5ufo6ery8/T19vf4+fr/2wBDAAwMDAwMDBUMDBUeFRUVHikeHh4eKTQpKSkpKTQ+NDQ0NDQ0Pj4+Pj4+Pj5LS0tLS0tXV1dXV2JiYmJiYmJiYmL/2wBDAQ8QEBkXGSsXFytnRjlGZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2f/2gAMAwEAAhEDEQAAAeqBgCIareozvbaK3avBqa52teT6He3z0TqCUZa22r//2gAIAQEAAQUCaVVKTjGnLFqSqqlGuciX+87YgM8ScWhAx5KWUJUdJClKadMye6O//9oACAEDEQE/AUxI86A0ynfb/9oACAECEQE/ASaYZBLxpKNinFh2dv8A/9oACAEBAAY/AmUniHVXxfVx7ZIP9x0GlOJdfa+BeVentkSWR66jsI1HUfF+f4l1UykiqR/CypAorg6n/hvuH5nv/8QAMxABAAMAAgICAgIDAQEAAAILAREAITFBUWFxgZGhscHw0RDh8SAwQFBgcICQoLDA0OD/2gAIAQEAAT8hrchP08Nlp8V+7MHK/wCcEXw8q94vkT4K5DD0fpsJBFkwYvy/8cJBuuX7l82UhL9HmlzVKCOfi+3/ADe6Z2jgePxcMYN/xxYQtAu8UCj/ALXDvn/sBxRB/g3/AL//2gAMAwEAAhEDEQAAEE5gPHEUEAP/xAAzEQEBAQADAAECBQUBAQABAQkBABEhMRBBUWEgcfCRgaGx0cHh8TBAUGBwgJCgsMDQ4P/aAAgBAxEBPxAN4PZaNJuOW/g//9oACAECEQE/EAGt2fwmfzBp3X8P/9oACAEBAAE/ELGubg74j5M+RuAgxMrE4g5c4qAjQh1Oh9GL3/xggJDuHs5H2fY1rQIGDISTZ3KuGYzkk8dSkh4Ah8TJ8c0SsIco+yPRD76/486QSwOdnIpjvmvjAQ8pEx4ixlVcDldAdtawTzP5CSqs1wAPeJDMz0nwvHVlRSYTI1ic6b58RUC4kuSTXmFOJuxknJgsgDQMkjQgj/gCBHee6QjzflUA4/5//9k='
     ui.image(base64).style('width:30px')
 
+with example(ui.svg):
+    svg_content = '''
+        <svg viewBox="0 0 200 200" width="100"  height="100" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="100" cy="100" fill="yellow" r="78" stroke="black" stroke-width="3"/>
+        <g class="eyes">
+            <circle cx="61" cy="82" r="12"/>
+            <circle cx="127" cy="82" r="12"/>
+        </g>
+        <path d="m136.81 116.53c.69 26.17-64.11 42-81.52-.73" style="fill:none; stroke: black; stroke-width: 3;"/>
+        </svg>'''
+    ui.svg(svg_content)
+
 with example(ui.markdown):
 
     ui.markdown('### Headline\nWith hyperlink to [GitHub](https://github.com/zauberzeug/nicegui).')

nicegui/elements/image.py

@@ -18,11 +18,11 @@ class Image(Element):
         super().__init__(view)
 
     @property
-    def src(self):
+    def source(self):
 
         return self.view.src
 
-    @src.setter
+    @source.setter
     def source(self, source: any):
 
         self.view.src = source

nicegui/elements/svg.py

@@ -0,0 +1,48 @@
+import justpy as jp
+from urllib.parse import urlparse
+from .element import Element
+
+class Svg(Element):
+
+    def __init__(self,
+                 content: str = '',
+                 ):
+        """Svg Element
+
+        Displays an svg.
+
+        :param content: the svg definition
+        """
+
+        view = jp.Div()
+        super().__init__(view)
+        self.content = content
+
+    @property
+    def content(self):
+
+        return self.view.inner_html()
+
+    @content.setter
+    def content(self, content: any):
+
+        jp.parse_html(content, a=self.view)
+
+    def set_content(self, content: str):
+
+        self.content = content
+
+    def bind_content_to(self, target, forward=lambda x: x):
+
+        self.content.bind_to(target, forward=forward, nesting=1)
+        return self
+
+    def bind_content_from(self, target, backward=lambda x: x):
+
+        self.content.bind_from(target, backward=backward, nesting=1)
+        return self
+
+    def bind_content(self, target, forward=lambda x: x, backward=lambda x: x):
+
+        self.content.bind(target, forward=forward, backward=backward, nesting=1)
+        return self

nicegui/ui.py

@@ -11,6 +11,7 @@ class Ui:
     from .elements.joystick import Joystick as joystick
     from .elements.label import Label as label
     from .elements.image import Image as image
+    from .elements.svg import Svg as svg
     from .elements.html import Html as html
     from .elements.markdown import Markdown as markdown
     from .elements.link import Link as link