web-dev-qa-db-de.com

So zeigen Sie das .svg-Bild mit swift an

Ich habe eine .svg-Bilddatei, die ich in meinem Projekt anzeigen möchte. 

Ich habe versucht, UIImageView zu verwenden, das für die Bildformate .png und .jpg funktioniert, nicht jedoch für die Erweiterung .svg. Gibt es eine Möglichkeit, ein .svg-Bild mit UIWebView oder UIImageView anzuzeigen?

27
Priyanka Kanse

Versuchen Sie diesen Code

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
12
Komal Kamble

In Swift ..__ gibt es keine eingebaute Unterstützung für SVG. Daher müssen wir andere Bibliotheken verwenden.

Die einfachen SVG-Bibliotheken in Swift sind:

1) SwiftSVG -Bibliothek

Es bietet Ihnen mehr Optionen für den Import als UIView, CAShapeLayer, Path usw.

Um Ihre SVG-Farbe zu ändern und als UIImage zu importieren, können Sie meine Erweiterungscodes für die unten angegebene Bibliothek verwenden. 

Klicken Sie hier, um die SwiftSVG -Bibliothek zu kennen:
Verwenden von SwiftSVG zum Festlegen von SVG für Image

| ODER |

2) SVGKit -Bibliothek

2.1) Verwenden Sie Pod, um zu installieren:

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

2.2) Rahmen hinzufügen

Gehe zu AppSettings
-> Allgemein Tab
-> Blättern Sie nach unten zu Linked Frameworks und Bibliotheken
-> Klicken Sie auf das Plus-Symbol
-> Wählen Sie SVG.framework

2.3) In Objective-C zur Swift-Bridge-Datei bridging-header.h hinzufügen:

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

2.4 Erstellen Sie den SvgImg-Ordner (zur besseren Organisation) in Project und fügen Sie SVG-Dateien hinzu.

Hinweis: Das Hinzufügen des Inside Assets-Ordners funktioniert nicht und SVGKit sucht nur in Projektordnern nach Dateien

2.5) Verwenden Sie Ihren Swift-Code wie folgt:

import SVGKit

und

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

Hinweis: SVGKit Hängt die Erweiterung ".svg" automatisch an die von Ihnen angegebene Zeichenfolge an

let namSvgImgVyuVar = SVGKImageView(SVGKImage: namSvgImgVar)

let namImjVar: UIImage = namSvgImgVar.UIImage

Es gibt viele weitere Optionen für Sie, um SVGKImage und SVGKImageView zu initiieren

Es gibt auch andere Klassen, die Sie erkunden können

    SVGRect
    SVGCurve
    SVGPoint
    SVGAngle
    SVGColor
    SVGLength

    and etc ...
11
Sujay U N

Sie können beispielsweise SVGKit verwenden.

1) Bauen Sie es gemäß den Anweisungen ein. Drag & Drop der .framework-Datei ist schnell und einfach.

2) Stellen Sie sicher, dass Sie eine Objective-C-zu-Swift-Bridge-Datei bridging-header.h mit Importcode enthalten:

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

3) Verwenden Sie das Framework wie folgt, vorausgesetzt, dass dataFromInternet NSData ist und zuvor vom Netzwerk heruntergeladen wurde:

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

Das Framework ermöglicht es auch, ein SVGKImage aus anderen Quellen zu initiieren. Beispielsweise kann es ein Bild für Sie herunterladen, wenn Sie es mit einer URL versehen. In meinem Fall stürzte es jedoch bei einer nicht erreichbaren URL ab, daher stellte sich heraus, dass es besser war, das Netzwerk selbst zu verwalten. Mehr Infos dazu hier .

11
Vitalii

Swift 3.0 Version:

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
}
9
Paresh Navadiya

Wenn Sie eine WKWebView verwenden möchten, um ein .svg-Bild zu laden, das von einer URLRequest stammt, können Sie es einfach wie folgt erreichen:

Swift 4

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

Es ist viel einfacher als die anderen Möglichkeiten, und Sie können Ihre .svg-Zeichenfolge auch irgendwo aufbewahren, um sie später zu laden, auch offline, wenn Sie dies benötigen.

5
GabrielaBezerra

Hier ist eine einfache Klasse, die SVG-Bilder in einer UIView anzeigen kann.

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
    }
}
4
wes

Sie können Ihre Bilder als Zeichenfolgen beibehalten und WKWebView verwenden, um sie anzuzeigen:

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
}()
4
nanvel

Zum Rendern der SVG-Datei können Sie Macaw verwenden. Auch Macaw unterstützt Transformationen, Benutzerereignisse, Animationen und verschiedene Effekte.

Sie können die SVG-Datei mit null Codezeilen rendern. Weitere Informationen finden Sie in diesem Artikel: Rendern der SVG-Datei mit Macaw .

0
zapletnev