SVGのパスをXcodeで表示する方法 -iOSアプリ開発-
3 min readMay 5, 2020
UIBezierPathを使ってUIViewにSVGをパスで表示してみます。
こんにちは、Yukiです。
アプリ開発未経験者がiOSアプリを作成することになりました。
なぜiOSアプリを開発することになったかは最初の記事で↓
今回はSVGのパスをXcodeのプレビュー画面に表示してみたいと思います。
目次です。
- SVGのパスをSwiftのコードに変換
- UIViewのカスタムクラス作成
- StoryBoard上で表示
UIViewのカスタムクラス作成
……………………………………
SVGのパスをUIViewに表示するためのカスタムクラスを作成します。
Xodeのプロジェクトで新しいSwiftファイル（SvgDrawView.swift）を作成します。
カスタムクラスの中でdraw関数をoverrideし、その中にPaintCodeで変換したSwiftコードを追加します。
// SvgDrawView.swiftimport UIKit@IBDesignable
class svgDraw: UIView {
override func draw(_ rect: CGRect) {
// SVGのパスをSwiftに変換したコードをペースト }
}
Main.Stroryboardを開き、viewオブジェクトを作成して、サイズや位置を設定します。
（今回はサイズをSVGのViewBox、位置を画面の中央にしています。）
最後にカスタムクラス（svgDraw）を適用するとSVGのパスが反映されます。
以上がSVGのパスをXcodeのプレビュー画面で表示する方法です。
探り探りやっていたので、もっと効率的な方法がある、あるいは間違っているところがある可能性があります🙇♀️。
TwitterのDMからアドバイスいただけると嬉しいです！
