SwiftでSVGを表示する方法

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

• 画像として扱いたい
  SVGKit/SVGKit
• パスを扱う場合
  mchoe/SwiftSVG

どちらも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素材はこちらとこちらからお借りしました。

実装

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

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が取得出来ます。
表示イメージです。

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

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

尚、ファイル名（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も読み込めますが、現バージョンではパスが複数あるような構造を解析出来ないので注意が必要です。