Make UI with SVG file

[v479038280]

Is there an easy way to make the button in the ui clickble, and get input from the SVG file , also change the button state( i.e color ) and the content in the input area

[rodja]

What do you mean with

get input from the SVG file

[v479038280]

How about ui.svg_editor() by https://github.com/SVG-Edit/svgedit,
and. ui.svg() based on https://svgjs.dev/docs/3.0. or ui.handle_svg_in_the_page() also based on svgjs.dev @rodja @falkoschindler

[rodja]

That are all very complex elements. Maybe this is better suited to be an additional package on PyPI? Similar to https://github.com/zauberzeug/nicegui-highcharts?

[v479038280]

I found this:A Python 3 library for programmatically generating SVG images and animations that can render and display your drawings in a Jupyter notebook or Jupyter lab. They both could generate and animate. It seems that they both couldn't handle the existing SVG file,I'm still learning ,not sure about that

update How can I modify an element that already exists in the dom?
and How can I load svg from disk to modify it later?

svgjs.dev could modify the existing file

[frankvp11]

I'm not entire sure how this one is different from the package that I created a while ago, minus the fact that it probably won't integrate too well with nicegui.
Also, I agree with rodja, these are really complex elements to make. I personally agree that they wouldn't fit well with nicegui's main package, and would require excessive amounts of work to make for little use. If you need something specific, I can help, but making an entire feature would be futile.

[v479038280]

I agree too,ui.run_javascript() maybe the right way. By the way,I think that Snap.svg is the most suitable tool for handling this kind of task.

[v479038280]

That are all very complex elements. Maybe this is better suited to be an additional package on PyPI? Similar to https://github.com/zauberzeug/nicegui-highcharts?

That's great ,
I'm not sure if snap.svg is better for manipulating both existing SVG content, and SVG content generated with Snap.
Here is an example with inkscape and snap
and ANIMATING A MORE ADVANCED ICON WITH SNAP.SVG