/SwiftVG

Swift SVG Parser and SVGView class for display

Primary LanguageSwiftMIT LicenseMIT

SwiftVG

Purpose

If you need to display SVG files in your iOS application you don't have a ton of options. The native support just isn't there and PaintCode is wonderful but has limitations:

  • Complex SVGs generate a lot of code - and that much code can slow XCode way down.
  • The code generated by PaintCode has to be included in your app at compile time - no over the air SVGs.

Looking around the web I was able to find a couple great projects but nothing that did exactly what I wanted. SVGKit was heavy and didn't let me draw directly to the context. SKUBezierPath+SVG does a great job translating SVG paths to UIBezierPaths but doesn't help with parsing a large SVG file.

I built SwiftVG to make displaying SVG files in your iOS app easier - whether you bundle them with the application or deliver them over the air.

Installation

I'll get to work on a cocoapod soon. In the meantime just download the files and add them to your project. You'll need an objective-c bridging header for SKUBezierPath+SVG (included) which handles the path parsing. I'm working on a Swift port inspired by SKUBezierPath+SVG to get rid of this dependency.

Usage

Use SVGVectorImage where you would normally use UIImage and use SVGView where you would normally use UIImageView.

Programmatically

let svgView = SVGView(vectorImage:SVGVectorImage(named: "example"))
view.addSubview(svgView)

In A Storyboard

  • Drag a UIView out into the storyboard and change it's class to SVGView in the Identity Inspector
  • Optionally set an SVG Name in the Attributes Inspector - this is a file name in your main bundle (excluding the .svg)
  • The storyboard will live render your SVG, just like an UIImageView would!

Alt Text

What if my SVG isn't in the bundle?

Instantiate your SVGVectorImage from NSData or a file path that could point anywhere.

//load from data
let data:NSData = /* data from somewhere - maybe the internet? */
let svgVectorImage = SVGVectorImage(data: data)

//load from a path
let path = /* some path - maybe documents or tmp directory? */
let svgVectorImage = SVGVectorImage(path: path)

//however you end up with an SVGVectorImage you can add it to a SVGView to display it
let svgView = SVGView() //could be on a storyboard - or created earlier
svgView.vectorImage = svgVectorImage

What's supported - What isn't?

SVGView supports the following contentMode values:

  • .ScaleAspectFill
  • .ScaleAspectFit
  • .ScaleToFill
  • .Center

I haven't tested every SVG out there so I'm sure there are things that I'm not supporting. I currently support groups, paths, polygons, rects, linearGradients, and radialGradients. This tends to work well for me on SVGs exported from Adobe Illustrator as per my workflow - but if you have a problematic SVG file let me know about it - or even better fix it and submit a pull request :)