Question

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

我尝试使用UIImageView，它适用于.png＆amp; .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桥接文件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提供图像时，它可以为您下载图像。但在我的情况下，如果网址无法访问，它会崩溃，所以最好是自己管理网络。有关它的更多信息here。

Answer 3

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

swift中的简单SVG库是：

1）SwiftSVG图书馆

它为你提供了更多选择导入为UIView，CAShapeLayer，Path等

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

点击此处了解使用SwiftSVG库：
Using SwiftSVG to set SVG for Image

|或|

2）SVGKit图书馆

2.1）使用pod安装：

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

2.2）添加框架

转到AppSettings
   - ＆GT;常规标签
   - ＆GT;向下滚动到链接的框架和库    - ＆GT;点击加号图标
   - ＆GT;选择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自动添加扩展＆＃34; .svg＆＃34;到您指定的字符串

let namSvgImgVyuVar = SVGKImageView(SVGKImage: namSvgImgVar)

let namImjVar: UIImage = namSvgImgVar.UIImage

您可以使用更多选项来启动SVGKImage和SVGKImageView

还有其他可以探索的课程

    SVGRect
    SVGCurve
    SVGPoint
    SVGAngle
    SVGColor
    SVGLength

    and etc ...

Answer 4

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 5

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

Answer 6

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

Swift 4

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

它比其他方法简单得多，你也可以将你的.svg字符串保存在某处以便以后加载，甚至可以在需要时离线。

Answer 7

我的解决方案，可从URL在UIImageView中显示.svg。您需要安装SVGKit吊舱

然后像这样使用它：

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

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

这是一个可以在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 10

您可以在.xcassets中添加新符号图像集，然后可以在其中添加SVG文件

并像图片一样使用它。

Answer 11

我知道有2种不同的图形格式：

光栅图形（使用位图），并以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

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

您可以使用零行代码渲染SVG文件。有关详细信息，请查看此文章：Render SVG file with Macaw。

Answer 13

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

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

可以在三种情况下显示此SVGimage：

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

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

Answer 14

SVGKit 帮助我从 URL 获取图像。

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

其次，import SVGKit 进入您的班级。

第三，创建一个SVGImage对象。

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

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

yourImageView.image = mySVGImage.uiImage

如何使用swift显示.svg图像

14 个答案:

Swift 3.0版本：