Resizing issue

[SoreGaInochi]

Hi,

I'm having a resizing issue with the library. Depending on the svg file I use, I get an image correctly displayed, or I get an image taking way much space than it should (ie more space than the screen itself).

To display the svg file, I'm using this:

SVGView(fileURL: svgFilePath)
        .scaledToFit()
        .frame(width: 200, height: 200)

From what I've seen, the svg files that are defined with a large width and height are not displayed correctly, which maybe makes sense. But shouldn't svg images be stretched as we want?

[f3dm76]

Hey @SoreGaInochi, could you please attach the svg file you are using so we can reproduce the problem? And once we have a minute we will most certainly look into your problem, have a great day!

[SoreGaInochi]

Here is an example of a file with a display issue :

I've made some more tests, and it seems these display issues come from the fact that the svg file contains some transformations. In the example, there are 2 transformations:
transform="matrix(1.3333333,0,0,-1.3333333,0,537.45333)"
transform="scale(0.1)"

I modified it with Inkscape to remove these transformations, and the display is now much better.

[ystrot]

Hi @SoreGaInochi,

We just released 1.0.3 version and now SVGView gives you full control of its size. Please check out this post for details.

[GDGapps]

I read the post, but I'm still having some problems with big SVGs. This is my code:

        SVGView(fileURL: Bundle.main.url(forResource: "world", withExtension: "svg")!)
                .frame(width: 150, height: 150)
        }

and this is my SVG file:

I'm not using .fixedSize(), so shouldn't the SVG fit inside the frame as opposed to looking like this this? Or am I doing something wrong?

[ystrot]

Hi @GDGapps,

This issue is coming from viewbox attribute, that is lowercased in your SVG instead of viewBox. That's issue of our parser and we'll fix it, but as a workaround you can just replace viewbox with viewBox for now.

[nalexn]

I'd expect to be able to override the default width and height if it's specified inside SVG. For example, this SVG is rendered as 900x780 image regardless of SwiftUI frame modifiers:

<svg xmlns="http://www.w3.org/2000/svg" width="900" height="780">
   <path fill="#ed2939" d="M0 0h900v780H0z"/>
   <path fill="#fae042" d="M0 0h600v780H0z"/>
   <path d="M0 0h300v780H0z"/>
</svg>

In my case, editing the source image is not an option, as I'm loading them from the web. The above image.

[ystrot]

Hi @nalexn,

Right now SVGView already works as you described, i.e.:

1. Fills all available space by default.
2. Fills specified space if .frame was used.
3. Fills space from SVG width/height if .fixedSize was used.

More details here: https://github.com/exyte/SVGView/wiki/SVGView-resizing

However a SVG file you mentioned doesn't have viewBox attribute which actually doesn't allow us to scale it properly. I'll check if we can use width/height attributes to identify SVG bounds and let you know about the best solution for your case.

[nalexn]

Thanks @ystrot ! I've been hitting an API of flagpedia, but they also have a downloadable set of country flags in SVG. Might be helpful for testing purposes.

[ystrot]

I've pushed a fix to scale SVG files without viewBox properly, so you can already use the main branch. We'll probably release a new version this week.

Also I briefly went through country flags and even complex flags look good:

Anyway If you find some issues just file a ticket. Thanks!

[ystrot]

All issues discussed in this ticket were fixed and available in the 1.0.4 release.