Как показать.svg изображение с помощью swift

У меня есть .файл изображения svg, который я хочу отобразить в своем проекте.

Я попытался использовать UIImageView, который работает для .формат PNG. & jpg форматы изображений, но не для .расширение svg. Есть ли способ, чтобы отобразить .svg изображение с помощью UIWebView или UIImageView ?

20
ios swift uiwebview

8 ответов

попробуйте этот код

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
9

можно использовать SVGKit например.

1) интегрируйте его согласно инструкциям. Перетащите & падение .framework file быстро и легко.

2) Убедитесь, что у вас есть цель-C для Swift Bridge file 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. Но в моем случае это был сбой в случае недостижимого url, поэтому оказалось, что лучше управлять сетью самостоятельно. Подробнее об этом здесь.

9

в Swift нет встроенной поддержки SVG. Поэтому нам нужно использовать другие библиотеки.

простые библиотеки SVG в swift:

1) SwiftSVG библиотека

это дает вам больше возможностей импортировать как UIView, CAShapeLayer, Path и т. д.

чтобы изменить цвет SVG и импортировать как UIImage, вы можете использовать мои коды расширения для библиотеки, указанной ниже,

нажать здесь знать об использовании SwiftSVG библиотека :
использование SwiftSVG для установки SVG для Image

|или|

2) SVGKit библиотека

2.1) используйте pod для установки:

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

2.2) добавить рамки

Перейти К Разделу "Appsettings"
-> Вкладка "Общие"
- >Прокрутите вниз до связанных фреймворков и библиотек
-> Нажмите на значок "плюс"
-> Выбирать формат SVG.рамки

2.3) добавьте в Objective-C в Swift Bridge file bridging-header.h:

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

2.4) создайте папку SvgImg (для лучшей организации) в проекте и добавьте в нее файлы SVG.

Примечание: добавление папки внутри активов не будет работать, и SVGKit ищет файл только в папках проекта

2.5) используйте в своем Swift-коде, как показано ниже:

import SVGKit

и

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

Примечание: SVGKit автоматически apends extention ".СВГ" в строке

let namSvgImgVyuVar = SVGKImageView(SVGKImage: namSvgImgVar)

let namImjVar: UIImage = namSvgImgVar.UIImage

есть еще много вариантов для вас, чтобы init SVGKImage и SVGKImageView

есть также другие классы, которые вы можете исследовать

    SVGRect
    SVGCurve
    SVGPoint
    SVGAngle
    SVGColor
    SVGLength

    and etc ...
8

версия 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
}
5

вы можете сохранить изображения в виде строк и использовать 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
}()
3

вот простой класс, который может отображать изображения SVG в UIView

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
    }
}
2

для рендеринга SVG-файла вы можете использовать попугай. Также Macaw поддерживает преобразования, пользовательские события, анимацию и различные эффекты.

вы можете отобразить SVG-файл с нулевыми строками кода. Для получения дополнительной информации, пожалуйста, проверьте эту статью: Render SVG файл с Ара.

1

В случае, если вы хотите использовать WKWebView для загрузки a .svg изображение, которое исходит из URLRequest, вы можете просто достичь его так:

Swift 4

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

это намного проще, чем другие способы сделать это, и вы также можете сохранить свой .строки СВГ куда-то загрузить его позже, даже в автономном режиме, если вам нужно.

1