cppfw / svgren

:camera: SVG rendering library in C++
MIT License
206 stars 41 forks source link

Image element not rendered #100

Open Maxador opened 2 years ago

Maxador commented 2 years ago

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

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

igagis commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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 😅.