swiftimagesvgswiftuiresize-image

IOS Swift SVG image quality issues when resized

resized

original

As you can see in the image, SVG images are losing their quality when I resize them to 200X200. Isn't that against SVG images logic? I think the SVG images should not be corrupted no matter how big I enlarge it. What can I do for it? Which method can i follow?

I resized the SVG image like this in SwiftUI

  Image(uiImage: .flame.resize(targetSize: CGSize(width: 200, height: 200)))

I used this piece of code to resize image. This not working. You can see in the resized image above. I found this solution here. Click

extension UIImage {
    func resize(targetSize: CGSize) -> UIImage {
        return UIGraphicsImageRenderer(size:targetSize).image { _ in
            self.draw(in: CGRect(origin: .zero, size: targetSize))
        }
    }
}
Solution

  • I don't know much about SwiftUI, but here's an example of a single SVG displaying accurately at multiple sizes in UIKit image views:

    enter image description here

    That was done without code. All I did was to configure the SVG in the asset catalog to have a single size and to preserve vector data:

    enter image description here

    That is completely different from what you're doing; you are drawing the SVG into a graphics context, so you are throwing away the vector data and substituting a bitmap, which of course does not scale perfectly.