如何在SwiftUI应用中保持导入SVG文件的矢量清晰度？

现状说明 #

SwiftUI原生的Image组件加载SVG时，默认会将其栅格化为固定分辨率的位图，导致缩放时出现像素化——这是因为底层依赖的UIKit/AppKit图像系统默认采用栅格化处理SVG资源。

内置解决方案（无需第三方库/WKWebView/Shape转换） #

目前SwiftUI没有直接的内置Image子类支持矢量SVG，但可以通过系统原生的CoreGraphics/Canvas能力实现矢量渲染，以下是两种可行方案：

方案1：使用SwiftUI Canvas（iOS 15+/macOS 12+）

利用Canvas的动态绘制能力，结合CoreGraphics解析SVG并根据当前视图尺寸实时渲染，完全保留矢量保真度。

import SwiftUI
import CoreGraphics

struct SVGView: View {
    let svgName: String
    let tintColor: Color?
    
    init(_ svgName: String, tintColor: Color? = nil) {
        self.svgName = svgName
        self.tintColor = tintColor
    }
    
    var body: some View {
        Canvas { context, size in
            // 加载SVG文件数据
            guard let url = Bundle.main.url(forResource: svgName, withExtension: "svg"),
                  let data = try? Data(contentsOf: url),
                  // 创建SVG图像源
                  let imageSource = CGImageSourceCreateWithData(data as CFData, nil),
                  // 根据当前视图尺寸生成矢量图像
                  let cgImage = CGImageSourceCreateImageAtIndex(imageSource, 0, [
                      kCGImageSourceShouldAllowFloat: true,
                      kCGImageSourceCreateThumbnailFromImageAlways: true,
                      kCGImageSourceCreateThumbnailWithTransform: true,
                      kCGImageSourceThumbnailMaxPixelSize: max(size.width, size.height) * (UIScreen.main.scale)
                  ] as CFDictionary) else {
                return
            }
            
            let cgContext = context.cgContext
            let drawRect = CGRect(origin: .zero, size: size)
            
            // 支持着色（可选）
            if let tintColor = tintColor {
                cgContext.saveGState()
                cgContext.setFillColor(tintColor.cgColor!)
                cgContext.clip(to: drawRect, mask: cgImage)
                cgContext.fill(drawRect)
                cgContext.restoreGState()
            } else {
                cgContext.draw(cgImage, in: drawRect)
            }
        }
    }
}

// 使用示例
struct ContentView: View {
    var body: some View {
        SVGView("my-custom-icon", tintColor: .accentColor)
            .frame(width: 100, height: 100)
            .scaledToFit()
            .padding()
    }
}

方案2：封装UIKit/AppKit图像视图（兼容更低版本）

对于iOS 13+/macOS 10.15+，可以通过UIViewRepresentable/NSViewRepresentable封装原生的UIImageView/NSImageView，利用其对矢量SVG的原生支持：

// iOS版本
import SwiftUI
import UIKit

struct SVGImageView: UIViewRepresentable {
    let svgName: String
    let tintColor: UIColor?
    
    func makeUIView(context: Context) -> UIImageView {
        let imageView = UIImageView()
        imageView.contentMode = .scaleAspectFit
        return imageView
    }
    
    func updateUIView(_ uiView: UIImageView, context: Context) {
        // 加载SVG并设置为模板模式（支持着色）
        guard let image = UIImage(named: svgName)?.withRenderingMode(.alwaysTemplate) else { return }
        uiView.image = image
        uiView.tintColor = tintColor
    }
}

// macOS版本
import SwiftUI
import AppKit

struct SVGImageView: NSViewRepresentable {
    let svgName: String
    let tintColor: NSColor?
    
    func makeNSView(context: Context) -> NSImageView {
        let imageView = NSImageView()
        imageView.imageScaling = .scaleProportionallyUpOrDown
        return imageView
    }
    
    func updateNSView(_ nsView: NSImageView, context: Context) {
        guard let image = NSImage(named: svgName) else { return }
        nsView.image = image
        nsView.tintColor = tintColor
    }
}

// 使用示例
struct ContentView: View {
    var body: some View {
        SVGImageView(svgName: "my-icon", tintColor: .systemBlue)
            .frame(width: 200, height: 200)
    }
}

关键说明 #

• 两种方案均使用Apple原生框架，无需引入第三方依赖或WKWebView。
• 矢量渲染的核心是根据当前视图尺寸动态生成图像，而非提前栅格化固定分辨率的位图。
• 若需要支持SVG的复杂特性（如动画、渐变），CoreGraphics的渲染能力已覆盖绝大多数常见场景。

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