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
        }
    }
}