SVG Images with viewbox in percent are not rendered

[saeitsystems]

Some SVG Images have a viewbox in percent and they don't get rendered at all. See attached example. I have a simple solution for this:

m_pImage = svgdom::load(papki::FSFile((LPCSTR)a_rFilename));
if (m_pImage != nullptr)
{
    if (m_pImage->width.isPercent() )
    {
        int lViewboxWidth = m_pImage->viewBox[2] - m_pImage->viewBox[0];
        int lViewboxHeight = m_pImage->viewBox[3] - m_pImage->viewBox[1];

        if ((lViewboxWidth > 0) && (lViewboxHeight > 0))
        {
            m_pImage->width.value = lViewboxWidth;
            m_pImage->width.unit = svgdom::Length::Unit_e::PX;
            m_pImage->height.value = lViewboxHeight;
            m_pImage->height.unit = svgdom::Length::Unit_e::PX;
        }
    }
    std::vector<std::uint32_t> lImage = svgren::render(*m_pImage, m_OrigWidth, m_OrigHeight);
}

In my opinion it would make sense to integrate this into the renderer method. button-add-viewbox.zip

[igagis]

When outer svg element dimensions are given in percentages it is necessary to know the width and height of the enclosing area where SVG will be shown to get the actual dimensions of SVG by taking given percentages from that area. Currently, in case of percentages the SVG is not rendered at all which is kind of wrong. Taking the actual dimensions in pixels from viewBox also looks incorrect, because this is not the purpose of viewBox and it has different meaning than specifying dimensions, it is rather for transformations. I think the right solution here will be to pass the width and height of the area where SVG will be displayed to the render() function so that it could take the percent fraction from those. These parameters are already there in render() function: render(const svgdom::SvgElement& svg, unsigned& width, unsigned& height, real dpi) But in case of percentages those are not taken into account currently, so it needs to be fixed.

So, after fix, in order to get SVG rendered in case of percentage width or height then the requested width and height have to be specified (to be non-zero) to render() function.

Will this solution work for you?

[saeitsystems]

I need to determine the dimensions and aspect ratio of a given SVG image. At first in the case of a viewbox I got nothing. A dimension request method would help too! Also to save performance because my first render is just to determine the dimensions of the image. The above solution helped me. After that I found out that AffinityDesigner (which is my tool for svg images on windows now) has an option to add a viewbox. After unchecking that I got an image from svgren. I still keep the above code in case somone exports an image with viewbox

[igagis]

Why do you need to render to find out resulting image dimensions? You can already now specify dimensions you want right a way, in this case the image will be stretched to requested dimensions.

[saeitsystems]

In some cases I just have the vertical or horizontal pixel dimension and want the aspect Ratio to be respected while drawing the image.

[igagis]

Ok, in this case you need to set the width to your known value and height to 0 (or height to value and width to 0) then the resulting image will be of a correct size with correct aspect ratio, so you only need to draw the image once

[igagis]

You can read the documentation here https://github.com/igagis/svgren/blob/master/src/svgren/render.hpp#L17 it is described there

[saeitsystems]

Ok, thats fine but wouldn't help with a viewbox right now!?

[igagis]

The problem here is not in viewBox, but in percentages. Right now it won't work for percentages, but I'm working on that. Note, that even after the fix, you will still have to provide width and height of the area where the image is to be drawn to the render() function.

[saeitsystems]

I think I will implement my own method (copied from your source) to determine the initial size of the image respecting the viewbox. Than I will always pass svgren the width and height.

[igagis]

Ok, I had another deeper thought about that. And it looks like nothing has to be done at all.

For percentages problem one has to deal with it outside of the render() function, as you are currently doing. But it looks incorrect to me that you take the width and height from viewBox. But I would recommend you to avoid using percentages, because in this case SVG simply does not contain any information about the aspect ratio.

Let's say you know the width of the area where you want to draw the SVG image, say it is 600 px. Then do it like this:

unsigned svgWidth = 600;
unsigned svgHeight = 0;

auto img = svgren::render(..., svgWidth, svgHeight, ...);

//at this point svgHeight will hold the height value calculated using aspect ratio

[saeitsystems]

I can avoid exporting a viewbox but it makes troubles if someone does by mistake. My Example with viewbox: <svg width="100%" height="100%" viewBox="0 0 717 717" version="1.1" and without <svg width="717px" height="717px" version="1.1"

I can get the aspect ratio from the viewbox. I think this is what firefox does when it renderes the image.

[igagis]

Ok, right, in https://www.w3.org/TR/SVGMobile12/coords.html#IntrinsicSizing I found rules for aspect ratio calculation, it should be taken from viewBox. I will implement that. But one of width or height will still have to be provided.

[saeitsystems]

Thank you very much! I'm very happy with svgren! These issues are the problems I had to fight with on my first attemps of using svgren . At first I thought it didn't work because of the viewbox problems (I would like to protect other people to struggle with the same problems). Now my export from AffinityDesigner is always without viewbox. The biggest issue I had was the one with the defaut black filling.

[igagis]

Fixed. New nuget package should be out in about 15 mins. Be sure to update both libsvgdom and libsvgren

[igagis]

libsvgren 0.4.1 is released

[saeitsystems]

I think you found a good solution for images with viewbos in percent. Thanks!

[igagis]

if it works for you now, could you close the issue?