request: Support images encoded in base64 inside SVG elements

[felipetesc]

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

1. Paste the provided svg file inside examples folder
2. 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%",
                }
            }
        }
    }

}

4. from the terminal execute cargo run --example svg
5. Wait and see the window showing a single image
6. Read the messsage from the terminal: can't render image: load image failed

Context (Environment)

Windows 11
x64
rustc 1.73.0 (cc66ad468 2023-10-03)

PS: if we open both svg files we will see that one has the tag image (person2), and the other doesn't.

Thanks.

[marc2332]

It seems to work just fine for me, can you send me your SVGs files?

[felipetesc]

You will need the svg files I provided
I've sent the files atached at the bottom of the first message

[marc2332]

My bad, my brain decided to ignore those for some reason.

Anyway, this is not a bug but more like Skia doesn't support rendering images encoded in base64 in the image tag.

[marc2332]

I wonder if something can be done at Freya level though

[felipetesc]

I wonder if something can be done at Freya level though

Perhaps if the svg.rs is changed and something like ImageMagick bindings are added.

Some resources I found :

• https://stackoverflow.com/questions/46814480/how-can-convert-a-base64-svg-image-to-base64-image-png
• https://www.sitepoint.com/community/t/converting-data-image-svg-xml-base64-to-a-png/278818
  And at crates.io there is https://crates.io/crates/magick_rust