rustdioxus

How can i render a svg-file in dioxus and interact with it?


I have a svg file and want to render it. Then i want to interact with it. Make certain elements invisible or clickable.

#[component]
fn SvgRender() -> Element {
    const svg_file: manganis::ImageAsset = manganis::mg!(image("/static/file.svg"));
    rsx! {
        div {
            img {
                src: "{svg_file}"
            }
        }
    }
}

I get the following error:

024-07-19T16:30:46.265425Z ERROR manganis_cli_support::manifest: Failed to copy static asset: The image format could not be determined

2024-07-19T16:30:48.961980Z ERROR manganis_cli_support::manifest: Failed to copy static asset: The image format could not be determined

2024-07-19T16:30:48.962471Z ERROR dioxus_cli::server: Other(The image format could not be determined)

What am i doing wrong? It works with png files.


Solution

  • You can include the svg as a file instead of an image. Manganis doesn't svgs as images yet (although it is something we would like to support in the future):

    use dioxus::prelude::*;
    
    fn main(){
        launch(app)
    }
    fn app() -> Element {
        const SVG: &str = manganis::mg!(file("https://upload.wikimedia.org/wikipedia/commons/0/09/America_Online_logo.svg"));
        rsx! {
            img {
                src: SVG
            }
        }
    }