web-dev-qa-db-ja.com

swiftを使用して.svg画像を表示する方法

プロジェクトに表示する.svg画像ファイルがあります。

UIImageViewを使用してみました。これは、.pngおよび.jpg画像形式では機能しますが、.svg拡張子では機能しません。 UIWebViewまたはUIImageViewを使用して.svg画像を表示する方法はありますか？

iosswiftuiwebview
36
Priyanka Kanse

このコードを試してください

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

たとえば、 SVGKit を使用できます。

1）指示に従って統合します。 .frameworkファイルのドラッグアンドドロップは高速かつ簡単です。

2）Objective-C to 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を指定すると、画像をダウンロードできます。しかし、私の場合、URLに到達できない場合はクラッシュしていました。そのため、自分でネットワークを管理する方が良いことがわかりました。それに関する詳細情報 こちら 。

14
Vitalii

SwiftにはSVGの組み込みサポートはありません。したがって、他のライブラリを使用する必要があります。

Swiftの単純なSVGライブラリは次のとおりです。

1） SwiftSVG ライブラリ

UIView、CAShapeLayer、Pathなどとしてインポートするためのより多くのオプションを提供します

SVGカラーを変更し、UIImageとしてインポートするには、以下のリンクに記載されているライブラリの拡張コードを使用できます。

SwiftSVG libraryの使用について知るにはここをクリックしてください：
SwiftSVGを使用して画像のSVGを設定

|または|

2） SVGKit ライブラリ

2.1）ポッドを使用してインストールする：

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

2.2）フレームワークを追加する

Goto AppSettings
->一般タブ
->リンクされたフレームワークとライブラリまでスクロールダウンします
->プラスアイコンをクリックします
-> SVG.frameworkを選択

2.3）Objective-CをSwiftブリッジファイルbridging-header.hに追加します。

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

2.4）ProjectでSvgImgフォルダーを作成し（整理しやすいように）、その中にSVGファイルを追加します。

注：Inside Assetsフォルダーの追加は機能せず、SVGKitはProjectフォルダーでのみファイルを検索します

2.5）Swiftコードで次のように使用します。

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 ...
13
Sujay U N

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
}

サードパーティのライブラリ

https://github.com/exyte/Macaw

https://github.com/mchoe/SwiftSVG

UIWebViewおよびWKWebViewブースターでロードを高速化

https://github.com/bernikovich/WebViewWarmUper

9
Paresh Navadiya

WKWebViewを使用してURLRequestからの.svgイメージをロードする場合、次のように簡単に実現できます。

Swift 4

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

他の方法よりもはるかに簡単です。また、必要に応じて.svg文字列をどこかに保持して後で読み込むこともできます。オフラインでも可能です。

6
GabrielaBezerra

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

画像を文字列として保持し、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
}()
4
nanvel

SVGファイルをレンダリングするには、 Macaw を使用できます。また、Macawは変換、ユーザーイベント、アニメーション、さまざまな効果をサポートしています。

ゼロ行のコードでSVGファイルをレンダリングできます。詳細については、この記事を確認してください： MacawでSVGファイルをレンダリング 。

0
zapletnev