Image element not rendered

[Maxador]

Hello,

I try to render an embedded png image inside an SVG but it's not rendering at all. I've simplified the SVG so you can look at the element that is causing the problem: shadow_test.svg.zip

Expected	Result

Is the image rendering supported, I see it get parsed in svgdom but I'm not sure the rendering is handled properly.

[igagis]

@Maxador Right, svgren doesn't render <image> elements.

Though, if you just need to achieve the same effect, i.e. blurred rectangle, you can use gaussian blur filter, like this:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="375" height="235" viewBox="0 0 375 235">

    <defs>
        <filter
                style="color-interpolation-filters:sRGB"
                id="the_blur_filter"
                x="-20%"
                width="140%"
                y="-20%"
                height="140%"
            >
            <feGaussianBlur
                    stdDeviation="10"
                    id="feGaussianBlur4620"
                />
        </filter>
    </defs>

    <rect id="white_background" x="0" y="0" width="100%" height="100%" fill="white" />

    <rect id="grey_blurred_rect" width="264" height="144" x="92" y="72" fill="grey" style="filter:url(#the_blur_filter)"/>

</svg>

[Maxador]

Yeah I see, unfortunately I cannot do that because the same SVG is not rendering properly on another platform that doesn't handle filters/blurs properly.

[igagis]

I see. Well, let's keep this ticket open, but I'm not sure that drawing <image> elements will be implemented anytime soon. It is tricky, as the element can have transformations and thus some kind of scaling/rotation/skewing algorithms for raster image will have to be implemented which is far not trivial task. Perhaps you could look for ways to make that another platform support blur filter to resolve your problem.

[igagis]

@Maxador as a workaround, maybe you could have both elements in your SVG, the raster image and the rect with blur effect. One of those will be rendered only on one platform, the other one - only on another platform. But this is a dirty workaround and may lead to sudden breakages in case something changes on any of the platforms regarding the <image> element or blur support.

[Maxador]

Thanks for the suggestion but it won't cut it unfortunately. We decided to go through another route and stop using SVGs for this use case. It was getting too hacky 😅.