iOS Swift中SVG图片缩放至200×200后画质受损问题求助

我将SVG图片缩放至200×200后出现了画质受损的情况。这不违背SVG图片的特性吗？我认为SVG图片无论放大多少都不应失真。请问我该如何解决？有什么可行的方法？

我在SwiftUI中是这样缩放SVG图片的：

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

我使用了这段代码来缩放图片，但没有效果，如上方缩放后的图片所示。对应的扩展代码如下：

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

问题根源 #

你现在的操作逻辑是把SVG转成UIImage（位图）后再缩放，而UIImage是像素化的位图格式，缩放时必然会失真——这和SVG的矢量特性无关，因为你已经把矢量SVG转换成了像素位图，相当于把矢量图“固化”成了像素点，再缩放自然会模糊。

可行解决方法 #

方案1：iOS 16+直接用SwiftUI原生加载SVG（最推荐）

从iOS 16开始，SwiftUI的Image支持直接识别SVG资源，且自动保留矢量特性，缩放不会失真。直接替换成以下代码即可：

Image("flame") // 确保你的SVG资源文件名是flame，且已添加到项目并勾选对应Target
    .resizable()
    .scaledToFit()
    .frame(width: 200, height: 200)

这种方式完全利用SVG的矢量特性，无论怎么调整尺寸都不会模糊。

方案2：用第三方库兼容低版本iOS（iOS 15及以下）

如果需要兼容更早的系统，可以用SVGKit这类第三方库解析SVG矢量数据，避免转成位图损失画质：

1. 通过Swift Package Manager或CocoaPods引入SVGKit
2. 自定义一个SwiftUI视图封装SVGKit的渲染：

import SVGKit
import SwiftUI

struct SVGImageView: UIViewRepresentable {
    let svgName: String
    let size: CGSize
    
    func makeUIView(context: Context) -> SVGKFastImageView {
        let svgImage = SVGKImage(named: svgName)
        let imageView = SVGKFastImageView(svgImage: svgImage)
        imageView.contentMode = .scaleAspectFit
        return imageView
    }
    
    func updateUIView(_ uiView: SVGKFastImageView, context: Context) {
        uiView.frame = CGRect(origin: .zero, size: size)
    }
}

// 使用示例
SVGImageView(svgName: "flame", size: CGSize(width: 200, height: 200))

该方案直接解析SVG的矢量路径，缩放时不会损失清晰度。

方案3：必须转UIImage时的折中方案

如果业务限制必须用UIImage处理，那就先生成高分辨率的位图再缩小：

import SVGKit

extension UIImage {
    static func highResSVGImage(named name: String, targetSize: CGSize) -> UIImage? {
        guard let svgURL = Bundle.main.url(forResource: name, withExtension: "svg"),
              let svgData = try? Data(contentsOf: svgURL) else { return nil }
        
        // 用屏幕分辨率的2倍生成位图，保证缩放后清晰度
        let scale = UIScreen.main.scale * 2
        let renderSize = CGSize(width: targetSize.width * scale, height: targetSize.height * scale)
        
        return UIGraphicsImageRenderer(size: renderSize).image { context in
            SVGKImage(data: svgData)?.draw(in: CGRect(origin: .zero, size: renderSize))
        }
    }
}

// 使用示例
if let flameImage = UIImage.highResSVGImage(named: "flame", targetSize: CGSize(width: 200, height: 200)) {
    Image(uiImage: flameImage)
}

这种方式本质还是位图，但通过高分辨率渲染减少模糊感，效果比直接缩放小位图好很多。

内容的提问来源于stack exchange，提问作者Betul Aksu