如何使用swift显示.svg图像

Question

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

我尝试使用UIImageView,它适用于.png和.jpg图像格式,但不适用于.svg扩展名.有没有办法使用UIWebView或UIImageView显示.svg图像？

Answer 1

例如,您可以使用SVGKit.

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

2)确保你有一个Objective-C到Swift桥接文件bridging-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提供图像时,它可以为您下载图像.但在我的情况下,如果网址无法访问,它会崩溃,所以最好是自己管理网络.更多信息在这里.

Answer 2

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

swift中简单的SVG库是:

1)SwiftSVG库

它为您提供了更多选项来导入为UIView,CAShapeLayer,Path等

要修改您的SVG颜色和导入为UIImage,您可以使用我的扩展代码为下面链接中提到的库,

点击此处了解如何使用SwiftSVG库:
使用SwiftSVG为Image设置SVG

|和|

2)SVGKit库

2.1)使用pod安装:

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

2.2)添加框架

转到AppSettings
- >常规选项卡
- >向下滚动到链接的框架和库
- >单击加号图标
- >选择SVG.framework

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

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

2.4)在Project中创建SvgImg文件夹(用于更好的组织)并在其中添加SVG文件.

注意:添加内部资产文件夹不起作用,SVGKit仅在项目文件夹中搜索文件

2.5)在Swift Code中使用如下:

import SVGKit

和

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

注意:SVGKit自动将扩展名".svg"添加到您指定的字符串

let namSvgImgVyuVar = SVGKImageView(SVGKImage: namSvgImgVar)

let namImjVar: UIImage = namSvgImgVar.UIImage

您可以使用更多选项来初始化SVGKImage和SVGKImageView

还有其他可以探索的课程

    SVGRect
    SVGCurve
    SVGPoint
    SVGAngle
    SVGColor
    SVGLength

    and etc ...

Answer 3

SVG 文件支持已添加到 Xcode 12。

Answer 4

试试这个代码

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 5

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

并像图像一样使用它。

注意：这不适用于所有 SVG。你可以看看苹果文档

Answer 6

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
}

Answer 7

我从 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 8

从 XCode 12 开始，可以将 SVG 资源添加到您的项目中。

要将 svg 文件添加到您的项目中：

1. 将 svg 文件拖放到资产目录中。
2. 选择新添加的资产。
3. 您的 svg 图像将添加为 1x。选择它并将Scales属性更改为Single Scale属性检查器。

Answer 9

您可以将图像保留为字符串并使用 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 10

如果你想使用a WKWebView来加载来自a的.svg图像URLRequest,你可以简单地实现它:

斯威夫特4

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

它比其他方法简单得多,你也可以将你的.svg字符串保存在某个地方,以便以后加载它,如果你需要,甚至可以离线.

Answer 11

SVGKit帮助我从 URL 获取图像。

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

第二，import SVGKit进入你的班级。

第三，创建一个SVGImage对象。

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

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

yourImageView.image = mySVGImage.uiImage