web-dev-qa-db-fra.com

Comment afficher une image .svg en utilisant swift

Je souhaite afficher un fichier image .svg dans mon projet. 

J'ai essayé d'utiliser UIImageView, qui fonctionne pour les formats d'image .png et .jpg mais pas pour l'extension .svg. Est-il possible d'afficher une image .svg à l'aide de UIWebView ou UIImageView?

iosswiftuiwebview
27
Priyanka Kanse

Essayez ce 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

Il n’existe pas de support intégré pour SVG dans Swift . Nous devons donc utiliser d’autres bibliothèques.

Les bibliothèques SVG simples dans Swift sont:

1) SwiftSVG Bibliothèque

Il vous donne plus d'option à importer en tant qu'UIView, CAShapeLayer, Path, etc.

Pour modifier votre couleur SVG et importer en tant que UIImage, vous pouvez utiliser mes codes d’extension pour la bibliothèque mentionnée dans le lien ci-dessous, 

Cliquez ici pour savoir comment utiliser SwiftSVG library:
Utilisation de SwiftSVG pour définir SVG pour image

| OU |

2) SVGKit Bibliothèque

2.1) Utilisez pod pour installer:

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

2.2) Ajouter un cadre

Aller aux paramètres de l'application
-> Onglet Général
-> Faites défiler jusqu'à Cadres et bibliothèques liés
-> Cliquez sur l'icône plus
-> Sélectionnez SVG.framework

2.3) Ajouter dans Objective-C à Swift un fichier de pont bridging-header.h:

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

2.4) Créez un dossier SvgImg (pour une meilleure organisation) dans Project et ajoutez-y des fichiers SVG.

Remarque: l'ajout du dossier Inside Assets ne fonctionne pas et SVGKit recherche les fichiers uniquement dans les dossiers du projet.

2.5) Utilisez dans votre code Swift comme ci-dessous:

import SVGKit

et

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

Remarque: SVGKit ajoute automatiquement l'extension ".svg" à la chaîne spécifiée.

let namSvgImgVyuVar = SVGKImageView(SVGKImage: namSvgImgVar)

let namImjVar: UIImage = namSvgImgVar.UIImage

Il y a beaucoup plus d'options pour que vous puissiez initier SVGKImage et SVGKImageView

Il y a aussi d'autres classes que vous pouvez explorer

    SVGRect
    SVGCurve
    SVGPoint
    SVGAngle
    SVGColor
    SVGLength

    and etc ...
11
Sujay U N

Vous pouvez utiliser SVGKit par exemple.

1) Intégrez-le conformément aux instructions. Glisser-déposer le fichier .framework est simple et rapide.

2) Assurez-vous que vous avez un fichier pont bridging-header.h avec le code d'importation dans Objective-C vers Swift:

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

3) Utilisez le cadre de cette manière, en supposant que dataFromInternet est NSData, précédemment téléchargé à partir du réseau:

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

La structure permet également d’initialiser une image SVGK à partir de différentes sources, par exemple, elle peut télécharger une image pour vous lorsque vous la fournissez avec une URL. Mais dans mon cas, il s’agissait d’un plantage dans le cas d’une URL inaccessible. Il était donc préférable de gérer le réseau par moi-même. Plus d'infos à ce sujet ici .

11
Vitalii

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

Si vous voulez utiliser une WKWebView pour charger une image .svg provenant d'une URLRequest, vous pouvez simplement l'obtenir comme suit:

Swift 4 

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

C'est beaucoup plus simple que les autres méthodes, et vous pouvez également conserver votre chaîne .svg quelque part pour la charger plus tard, même hors ligne si vous en avez besoin.

5
GabrielaBezerra

Voici une classe simple pouvant afficher des images SVG dans une 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
    }
}
4
wes

Vous pouvez conserver vos images sous forme de chaînes et utiliser WKWebView pour les afficher:

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

Pour rendre un fichier SVG, vous pouvez utiliser Macaw . Macaw prend également en charge les transformations, les événements utilisateur, les animations et divers effets.

Vous pouvez rendre un fichier SVG avec zéro ligne de code. Pour plus d'informations, consultez cet article: Render le fichier SVG avec Macaw .

0
zapletnev