この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
SVGはScalable Vector Graphics(スケーラブル・ベクター・グラフィックス)の略で、ベクター画像形式のひとつです。
今回はSVGの用途別に合わせて2つのライブラリをご紹介したいと思います。
- 画像として扱いたい
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
素材の用意
実装
リソースフォルダに置いたファイルの一番簡単な表示の方法です。
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も読み込めますが、現バージョンではパスが複数あるような構造を解析出来ないので注意が必要です。