SwiftでSVGを表示する方法

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

SVGはScalable Vector Graphics(スケーラブル・ベクター・グラフィックス)の略で、ベクター画像形式のひとつです。
今回はSVGの用途別に合わせて2つのライブラリをご紹介したいと思います。

どちらもMITライセンスです。

開発環境

今回の開発環境は下記で実施しています。

Xcode 7.3.1
Swift 2.2
CocoaPods 1.0.0

ターゲットはiOS8.1、デバイスはiPhone、画面回転無しでProjectを作成しました。

準備

導入

CocoaPodsで追加します。

SVGKit

use_frameworks!

target "ターゲット名" do
  pod 'SVGKit', :git => 'https://github.com/SVGKit/SVGKit.git', :branch => '2.x'
end

※ masterブランチは古いので'2.x'の方を使うように記載されてます。

SwiftSVG

use_frameworks!

target "ターゲット名" do
  pod 'SwiftSVG'
end

SVGKit

素材の用意

リソースフォルダを用意し、そこにSVGファイルを入れます。
svg_Resources
Resources

今回のSVG素材はこちらこちらからお借りしました。

実装

リソースフォルダに置いたファイルの一番簡単な表示の方法です。

import UIKit
import SVGKit

class ViewController: UIViewController {

    @IBOutlet weak var svgImageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let svgImage = SVGKImage(named: "sample")
        svgImage.size = svgImageView.bounds.size
        svgImageView.image = svgImage.UIImage
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

SVGKit をインポートします。
SVGKImage(named: "SVGのファイル名") でリソースに入れたSVGのファイル名を入れます。
svgImage.sizeで画像のサイズを指定し、svgImage.UIImageでUIImageが取得出来ます。
表示イメージです。

その1

他にも、
SVGKImage(data: NSData!)
SVGKImage(contentsOfFile path: String!)
で読み込む事が出来ます。

また、カラーのSVGにも対応しています。 SVGKImage(named: "sample")SVGKImage(named: "sample_color")に変更して実行すると下記が表示されます。

その2

尚、ファイル名(named:)でアクセスの場合、存在しないファイル名を指定するとアプリがクラッシュするので注意が必要です。

SwiftSVG

SwiftSVGではSVGのパスデータの文字列を変換したり、SVGファイルをUIBezierPathやCAShapeLayerに変換することが出来ます。
使用するにはSwiftSVGをインポートします。

import SwiftSVG

パス文字列からUIBezierPathに変換する。

UIBezierPathのextensionが用意されています。

        let pathString = "M150 20 L75 200 L225 200 Z"
        let parsedPath = UIBezierPath(pathString: pathString)

パス文字列からCAShapeLayerに変換する。

CAShapeLayerのextensionが用意されています。

        let pathString = "M150 20 L75 200 L225 200 Z"
        let shapeLayer = CAShapeLayer(pathString: pathString)

パス文字列からUIViewに変換する。

UIViewのextensionが用意されています。

        let pathString = "M150 20 L75 200 L225 200 Z"
        let view = UIView(pathString: pathString)

サンプル

SwiftSVGの場合、リソースファイルのSVGも読み込めますが、現バージョンではパスが複数あるような構造を解析出来ないので注意が必要です。