如何使用 swift 显示 .svg 图像

Question

我有一个 .svg 图像文件要在我的项目中显示。

我尝试使用 UIImageView，它适用于 .png 和 .jpg 图像格式，但不适用于 .svg 扩展名。有什么方法可以使用 UIWebView 或 UIImageView 显示 .svg 图像吗？

Answer 1

试试这个代码

var path: String = NSBundle.mainBundle().pathForResource("nameOfFile", ofType: "svg")!

        var url: NSURL = NSURL.fileURLWithPath(path)  //Creating a URL which points towards our path

       //Creating a page request which will load our URL (Which points to our path)
        var request: NSURLRequest = NSURLRequest(URL: url)
       webView.loadRequest(request)  //Telling our webView to load our above request

Answer 2

你可以用SVGKit举例。

1) 按照说明进行整合。拖放 .framework 文件既快速又简单。

2) 确保你有一个 Objective-C 到 Swift 的桥接文件桥接-header.h，其中包含导入代码：

#import <SVGKit/SVGKit.h>
#import <SVGKit/SVGKImage.h>

3) 像这样使用框架，假设dataFromInternet 是NSData，以前从网络下载：

let anSVGImage: SVGKImage = SVGKImage(data: dataFromInternet)
myIUImageView.image = anSVGImage.UIImage

该框架还允许从其他不同来源初始化 SVGKImage，例如，当您提供 URL 时，它可以为您下载图像。但就我而言，它在无法访问 url 的情况下崩溃了，所以我自己管理网络会更好。有关它的更多信息 here。

Answer 3

Swift 3.0 版本：

let path = Bundle.main.path(forResource: "svgNameFileHere", ofType: "svg")!
if path != "" {
    let fileURL:URL = URL(fileURLWithPath: path)
    let req = URLRequest(url: fileURL)
    self.webView.scalesPageToFit = false
    self.webView.loadRequest(req)
}
else {
   //handle here if path not found
}

第三方库

https://github.com/exyte/Macaw

https://github.com/mchoe/SwiftSVG

UIWebView 和 WKWebView 助推器加载更快

https://github.com/bernikovich/WebViewWarmUper

Answer 4

您可以将图片保存为字符串并使用 WKWebView 显示它们：

let webView: WKWebView = {
    let mySVGImage = "<svg height=\"190\"><polygon points=\"100,10 40,180 190,60 10,60 160,180\" style=\"fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;\"></svg>"
    let preferences = WKPreferences()
    preferences.javaScriptEnabled = false
    let configuration = WKWebViewConfiguration()
    configuration.preferences = preferences
    let wv = WKWebView(frame: .zero, configuration: configuration)
    wv.scrollView.isScrollEnabled = false
    wv.loadHTMLString(mySVGImage, baseURL: nil)
    return wv
}()

Answer 5

要渲染 SVG 文件，您可以使用 Macaw。 Macaw 还支持转换、用户事件、动画和各种效果。

您可以使用零行代码渲染 SVG 文件。欲了解更多信息，请查看这篇文章：Render SVG file with Macaw.

免责声明：我隶属于这个项目。

Answer 6

这里有一个简单的 class 可以在 UIView

中显示 SVG 图像

import UIKit

public class SVGImageView: UIView {
    private let webView = UIWebView()

    public init() {
        super.init(frame: .zero)
        webView.delegate = self
        webView.scrollView.isScrollEnabled = false
        webView.contentMode = .scaleAspectFit
        webView.backgroundColor = .clear
        addSubview(webView)
        webView.snp.makeConstraints { make in
            make.edges.equalTo(self)
        }
    }

    required public init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    deinit {
        webView.stopLoading()
    }

    public func load(url: String) {
        webView.stopLoading()
        if let url = URL(string: fullUrl) {
            webView.loadRequest(URLRequest(url: url))
        }
    }
}

extension SVGImageView: UIWebViewDelegate {
    public func webViewDidFinishLoad(_ webView: UIWebView) {
        let scaleFactor = webView.bounds.size.width / webView.scrollView.contentSize.width
        if scaleFactor <= 0 {
            return
        }

        webView.scrollView.minimumZoomScale = scaleFactor
        webView.scrollView.maximumZoomScale = scaleFactor
        webView.scrollView.zoomScale = scaleFactor
    }
}

Answer 7

Swift 中没有对 SVG 的内置支持。所以我们需要使用其他库。

swift 中的简单 SVG 库是：

1) SwiftSVG图书馆

它为您提供了更多选项来导入为 UIView、CAShapeLayer、路径等

要修改您的 SVG 颜色并导入为 UIImage，您可以使用我在下面提到的库的扩展代码 link、

单击此处了解如何使用 SwiftSVG 库：

|或|

2) SVGKit 图书馆

2.1) 使用pod安装:

pod 'SVGKit', :git => 'https://github.com/SVGKit/SVGKit.git', :branch => '2.x'

2.2) 添加框架

Goto AppSettings
-> General Tab
-> Scroll down to Linked Frameworks and Libraries
-> Click on plus icon
-> Select SVG.framework

2.3) 在Objective-C添加到Swift桥接文件bridging-header.h :

#import <SVGKit/SVGKit.h>
#import <SVGKit/SVGKImage.h>

2.4) 在项目中创建 SvgImg 文件夹（为了更好的组织）并在其中添加 SVG 文件。

Note : Adding Inside Assets Folder won't work and SVGKit searches for file only in Project folders

2.5) 在您的 Swift 代码中使用如下：

import SVGKit

和

let namSvgImgVar: SVGKImage = SVGKImage(named: "NamSvgImj")

Note : SVGKit Automatically apends extention ".svg" to the string you specify

let namSvgImgVyuVar = SVGKImageView(SVGKImage: namSvgImgVar)

let namImjVar: UIImage = namSvgImgVar.UIImage

还有更多选项供您初始化 SVGKImage 和 SVGKImageView

还有其他类你可以探索

    SVGRect
    SVGCurve
    SVGPoint
    SVGAngle
    SVGColor
    SVGLength

    and etc ...

Answer 8

如果您想使用 WKWebView 加载来自 URLRequest 的 .svg 图像，您可以像这样简单地实现它：

Swift 4

if let request = URLRequest(url: urlString), let svgString = try? String(contentsOf: request) {
  wkWebView.loadHTMLString(svgString, baseURL: request)
}

它比其他方法简单得多，您还可以将 .svg 字符串保存在某处以便稍后加载，如果需要，甚至可以离线加载。

Answer 9

您可以在.xcassets中添加New Symbol Image Set，然后您可以在其中添加SVG文件

并像图片一样使用它。

注意：这不适用于所有 SVG。你可以看看 apple documentation

Answer 10

您可以使用名为“SVGParser”的 pod。 https://cocoapods.org/pods/SVGParser.

将它添加到您的 pod 文件中后，您所要做的就是将此模块导入到您要使用它的 class。您应该在 ImageView 中显示 SVG 图像。

您可以在三种情况下显示此 SVG 图像：

从本地路径加载 SVG 作为数据
从本地路径加载 SVG
从远程加载 SVG URL

您还可以在 GitHub 中找到示例项目：https://github.com/AndreyMomot/SVGParser。只需下载项目并运行看看它是如何工作的。

Answer 11

据我所知，有两种不同的图形格式：

光栅图形（使用位图），用于 JPEG、PNG、APNG、GIF 和 MPEG4 文件格式。
矢量图形（使用点、线、曲线和其他形状）。矢量图形用于 SVG、EPS、PDF 或 AI 图形文件格式。

因此，如果您需要在 Xcode 中使用存储在 SVG 文件中的图像，我建议：

将 SVG 文件转换为 PDF。我用了 https://document.online-convert.com/convert/svg-to-pdf
使用Xcode管理您的PDF文件。

Answer 12

我在 URL 的 UIImageView 中显示 .svg 的解决方案。您需要安装 SVGKit pod

然后就这样使用它：

import SVGKit

 let svg = URL(string: "https://openclipart.org/download/181651/manhammock.svg")!
 let data = try? Data(contentsOf: svg)
 let receivedimage: SVGKImage = SVGKImage(data: data)
 imageview.image = receivedimage.uiImage

或者您可以使用扩展程序进行异步下载

extension UIImageView {
func downloadedsvg(from url: URL, contentMode mode: UIView.ContentMode = .scaleAspectFit) {
    contentMode = mode
    URLSession.shared.dataTask(with: url) { data, response, error in
        guard
            let httpURLResponse = response as? HTTPURLResponse, httpURLResponse.statusCode == 200,
            let mimeType = response?.mimeType, mimeType.hasPrefix("image"),
            let data = data, error == nil,
            let receivedicon: SVGKImage = SVGKImage(data: data),
            let image = receivedicon.uiImage
            else { return }
        DispatchQueue.main.async() {
            self.image = image
        }
    }.resume()
}
}

使用方法：

let svg = URL(string: "https://openclipart.org/download/181651/manhammock.svg")!

imageview.downloadedsvg(from: svg)

Answer 13

SVG 文件支持已添加到 Xcode12.

Answer 14

SVGKit 帮助我从 URL 获取图像。

首先，在您的 Podfile 中添加 pod 'SVGKit'。

其次，import SVGKit进入你的class。

三、创建SVGImage对象

let mySVGImage: SVGKImage = SVGKImage(contentsOf: URL(string: path))

最后，将此图像添加到您的 UIImageView。

yourImageView.image = mySVGImage.uiImage

Answer 15

这是objective c解决方案

- (void)loadSVG:(NSString *)url {
if (url.length == 0) return;
[[[NSURLSession sharedSession] dataTaskWithURL:[NSURL URLWithString:url]
                            completionHandler:^(NSData * _Nullable data, NSURLResponse * _Nullable response, NSError * _Nullable error) {
    NSHTTPURLResponse *httpURLResponse = (NSHTTPURLResponse *) response;
    if (error == nil && [response.MIMEType hasPrefix:@"image"] && httpURLResponse.statusCode == 200)
    {
        SVGKImage *receivedIcon = [SVGKImage imageWithData:data];
        dispatch_async(dispatch_get_main_queue(), ^{
            imageView.backgroundColor = [UIColor clearColor];
            imageView.image = receivedIcon.UIImage;
        });
        
    } else {
        NSLog(@"error %@ ", error.localizedDescription);
    }
}] resume];

}

如何使用 swift 显示 .svg 图像

How to display .svg image using swift

uiwebview

ios

swift

Swift 3.0 版本：