request: Support images encoded in base64 inside SVG elements

felipetesc commented 7 months ago

Expected Behavior

I expect to load and render both svg files.

Current Behavior

Only the first svg file is loaded.

Possible Solution

Tell users about the render issues while loading a svg containing an image tag, or adapt svg render to allow rendering the image tag.

Steps to Reproduce

Paste the provided svg file inside examples folder
Create a file called svg.rs and paste the source code below inside project_name/examples folder :


#![cfg_attr(
all(not(debug_assertions), target_os = "windows"),
windows_subsystem = "windows"
)]

use freya::prelude::*;
use dioxus::core::Scope;

static PERSON_ICON: &[u8] = include_bytes!("./person.svg");
static PERSON2_ICON: &[u8] = include_bytes!("./person2.svg");

fn main() {
    launch(example_svg);
}

pub fn example_svg(cx: Scope) -> Element{

    //icons
    let svg1_data = bytes_to_data(cx, PERSON_ICON);
    let svg2_data = bytes_to_data(cx, PERSON2_ICON);

    render!{
        rect {
            height: "50",
            width: "100%",
            background: "black",
            color: "white",
            padding: "0",
            direction: "horizontal",
            //spacer
            rect{
                height: "100%",
                width: "5",
                background: "black",
            }
            //button account
            rect{
                height: "50",
                width: "50",
                //background: "red",
                color: "white",
                padding: "0",
                onclick:|_| {
                    println!("svg1");

                },
                svg {
                    svg_data: svg1_data,
                    width: "100%",
                    height: "100%",
                }
            }
            //spacer
            rect{
                height: "100%",
                width: "calc(100% - 110)",
                background: "black",
            }
            //button settings
            rect{
                height: "50",
                width: "50",
                //background: "blue",
                color: "white",
                padding: "0",
                onclick:|_| {

                    println!("svg2");

                },
                svg {
                    svg_data: svg2_data,
                    width: "100%",
                    height: "100%",
                }
            }
        }
    }

}