Swift中如何将SVG字符串转换为UIImage并显示在UIImageView中

问题分析 #

iOS原生UIImage并不支持直接解析SVG格式的数据，你遇到的"无法将String转换为Data"错误，是因为直接将SVG字符串传入了需要Data类型参数的UIImage(data:)方法。需要先完成字符串到Data的转换，再通过渲染方式将SVG转为可显示的UIImage。

解决步骤 #

1. 将SVG字符串转换为Data

先把你的SVG字符串转成UTF-8编码的Data，代码示例：

// 替换为你的完整SVG字符串
let svgString = "<svg viewBox=\"0 0 600 450\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"0\" y=\"0\" width=\"600\" height=\"450\" fill=\"#E9F0FC\"></rect>...</svg>"

guard let svgData = svgString.data(using: .utf8) else {
    print("SVG字符串转换Data失败")
    return
}

2. 将SVG渲染为UIImage

由于原生UIImage不支持SVG，这里提供两种可行方案：

方案一：使用WKWebView渲染并截图

利用WKWebView加载SVG内容，再将WebView的内容截图转为UIImage：

func convertSVGToImage(svgString: String, targetSize: CGSize, completion: @escaping (UIImage?) -> Void) {
    let htmlString = """
    <html>
        <body style="margin:0; padding:0;">
            <svg width="\(targetSize.width)" height="\(targetSize.height)" viewBox="0 0 600 450">
                \(svgString)
            </svg>
        </body>
    </html>
    """
    
    let webView = WKWebView(frame: CGRect(origin: .zero, size: targetSize))
    webView.navigationDelegate = NavigationDelegate(completion: completion)
    webView.loadHTMLString(htmlString, baseURL: nil)
}

// 自定义WKNavigationDelegate处理加载完成
class NavigationDelegate: NSObject, WKNavigationDelegate {
    private let completion: (UIImage?) -> Void
    
    init(completion: @escaping (UIImage?) -> Void) {
        self.completion = completion
        super.init()
    }
    
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        UIGraphicsBeginImageContextWithOptions(webView.bounds.size, false, UIScreen.main.scale)
        webView.layer.render(in: UIGraphicsGetCurrentContext()!)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        completion(image)
    }
    
    func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
        completion(nil)
    }
}

// 使用示例
convertSVGToImage(svgString: svgString, targetSize: CGSize(width: 600, height: 450)) { image in
    DispatchQueue.main.async {
        yourImageView.image = image
    }
}

方案二：使用SVG处理库

可以使用专门的Swift SVG处理库（无需依赖Objective-C），这类库能直接将SVG字符串或Data转为UIImage，集成后调用方式通常更简洁，例如：

// 假设使用某SVG库的示例代码
if let image = SVGImage(data: svgData, size: CGSize(width: 600, height: 450)) {
    yourImageView.image = image
}

注意事项 #

• 使用WKWebView方案时，要确保在主线程更新UIImageView的image属性
• 如果SVG包含外部资源（如字体、图片），需要确保资源能被WebView正确加载

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