SwiftSVG is not meant to be a a full SVG parser. The library supports the most common use cases of flat, solid color SVG elements. It supports grouping and transformations and can parse all path and shape elements.
The best use case for SwiftSVG is for flat icons that you may want to theme at runtime and have good control over. Think icons for your app, especially if you offer light and dark themes. The library can handle complex paths, and more importantly can handle them quickly, so you can use it to display many SVGs, just not every single use case. See the complex example in the examples app.
At this time, gradients are not supported, but this is high on the list of features to support next. Furthermore, text is not supported at this time, but shouldn’t be too difficult to support. Animations are the last major category that isn’t supported, and they probably won’t be in the near future seeing Cocoa already provides rich support.
Finally, if you’re looking to extend this project, that’s another good reason to use SwiftSVG. A lot of work has been put into making the code as extensible and maintainable as possible and will continue to be a core feature of future updates. Fork the project and I hope you share your changes.
For projects currently using 1.x: SwiftSVG 2.x is a major rewrite of the library. For most use cases, you should be able to upgrade to 2.0 with little to no changes to your code. However, there are breaking changes that may affect your project. Most notably, the String extensions and the ability to parse single path string from a URL are deprecated.
Usage
UIView+SVG
The easiest way to create an SVG image is to use the UIView extension:
let fistBump = UIView(SVGNamed: "fistbump") // In the main bundle
self.addSubview(fistBump)
Output:
Or you can add an SVG file to your Asset Catalog. You should add it as a Data Asset like this:
Then use the same initializer as above:
let cowboyHat = UIView(SVGNamed: "cowboyHat") // In the asset catalog as a Data Asset
self.addSubview(cowboyHat)
Output:
You can also create a new UIView from a remote URL:
let svgURL = URL(string: "https://openclipart.org/download/181651/manhammock.svg")!
let hammock = UIView(SVGURL: svgURL) { (svgLayer) in
svgLayer.fillColor = UIColor(red:0.52, green:0.16, blue:0.32, alpha:1.00).cgColor
svgLayer.resizeToFit(self.view.bounds)
}
self.view.addSubview(hammock)
Output:
SwiftSVG provides the following UIView convenience initializers:
All of these initializers will parse a file located in the main bundle, a bundle of your own choosing, or on the web. It will parse the file asynchronously and optionally takes a completion block, passing a SVGLayer after parsing has been completed. Whether you pass a completion block or not, SwiftSVG will add it to the view’s sublayers. If you want to change one of the layer’s attributes, such as the fill color or resize it to fit a view, you can do that in the completion block
You can optionally pass an SVGParser object if you want to reuse the same parser for various SVG files or want to roll your own using a third-party XML parser. By default, SwiftSVG uses a subclass of Foundation’s XMLParser using all the supported elements and attributes called NSXMLSVGParser. You can also optionally setup your own NSXMLSVGParser passing a SVGParserSupportedElements struct that will parse only the elements and attributes of your choosing.
There is also a convenience initializer to parse a single path string, which parses synchronously:
// Declaration
convenience init(pathString: String)
// Example
let triangle = UIView(pathString: "M75 0 l75 200 L0 200 Z")
self.addSubview(triangle)
Output:
CALayer+SVG
If you need a little bit more control over your parsed layer, you can use one of the CALayer convenience initalizers. You can make some changes to the parsed SVG layer, such as changing the fill color at runtime, and can add it to a layer of your own choosing. If you are dropping down to the CALayer level, it is assumed that you want more control and you must provide a completion block and you must add it to a sublayer to display it.
let svgURL = Bundle.main.url(forResource: "pizza", withExtension: "svg")!
let pizza = CALayer(SVGURL: svgURL) { (svgLayer) in
// Set the fill color
svgLayer.fillColor = UIColor(red:0.94, green:0.37, blue:0.00, alpha:1.00).cgColor
// Aspect fit the layer to self.view
svgLayer.resizeToFit(self.view.bounds)
// Add the layer to self.view's sublayers
self.view.layer.addSublayer(svgLayer)
}
The layer that is passed in the UIView and CALayer completion blocks is an instance of SVGLayer which is a subclass of CAShapeLayer. Currently, SVGLayer adds the following capabilities:
A boundingBox property that is the minimum CGRect that encloses all subpaths. Good for scaling the layer to fit a view.
Overrides on some properties like the fill color, stroke color, and stroke width that applies that value on all sublayers.
An ability to create a copy of the SVGLayer, which is useful for caching.
Other Interfaces
CAShapeLayer & UIBezierPath Single Paths
In addition to the UIView extension that allows you to parse a single <path>d string, you can use the CAShapeLayer or UIBezierPath convenience initializers.
Finally, SwiftSVG provides a UIView subclass that is IBInspectable. Simply add a view to your storyboard and use the SVGView subclass as your class name. Then put the name of your SVG file in your bundle in the IBInspectable property “SVGName”
Key Features
Who Should Use SwiftSVG
SwiftSVG is not meant to be a a full SVG parser. The library supports the most common use cases of flat, solid color SVG elements. It supports grouping and transformations and can parse all path and shape elements.
The best use case for SwiftSVG is for flat icons that you may want to theme at runtime and have good control over. Think icons for your app, especially if you offer light and dark themes. The library can handle complex paths, and more importantly can handle them quickly, so you can use it to display many SVGs, just not every single use case. See the complex example in the examples app.
At this time, gradients are not supported, but this is high on the list of features to support next. Furthermore, text is not supported at this time, but shouldn’t be too difficult to support. Animations are the last major category that isn’t supported, and they probably won’t be in the near future seeing Cocoa already provides rich support.
Finally, if you’re looking to extend this project, that’s another good reason to use SwiftSVG. A lot of work has been put into making the code as extensible and maintainable as possible and will continue to be a core feature of future updates. Fork the project and I hope you share your changes.
Table of Contents
Install
Cocoapods:
or Carthage:
For projects currently using 1.x: SwiftSVG 2.x is a major rewrite of the library. For most use cases, you should be able to upgrade to 2.0 with little to no changes to your code. However, there are breaking changes that may affect your project. Most notably, the
String
extensions and the ability to parse single path string from aURL
are deprecated.Usage
UIView+SVG
The easiest way to create an SVG image is to use the UIView extension:
Output:
Or you can add an SVG file to your Asset Catalog. You should add it as a Data Asset like this:
Then use the same initializer as above:
Output:
You can also create a new UIView from a remote
URL
:Output:
SwiftSVG provides the following
UIView
convenience initializers:All of these initializers will parse a file located in the main bundle, a bundle of your own choosing, or on the web. It will parse the file asynchronously and optionally takes a completion block, passing a
SVGLayer
after parsing has been completed. Whether you pass a completion block or not, SwiftSVG will add it to the view’s sublayers. If you want to change one of the layer’s attributes, such as the fill color or resize it to fit a view, you can do that in the completion blockYou can optionally pass an
SVGParser
object if you want to reuse the same parser for various SVG files or want to roll your own using a third-party XML parser. By default, SwiftSVG uses a subclass of Foundation’sXMLParser
using all the supported elements and attributes calledNSXMLSVGParser
. You can also optionally setup your ownNSXMLSVGParser
passing aSVGParserSupportedElements
struct that will parse only the elements and attributes of your choosing.There is also a convenience initializer to parse a single path string, which parses synchronously:
Output:
CALayer+SVG
If you need a little bit more control over your parsed layer, you can use one of the
CALayer
convenience initalizers. You can make some changes to the parsed SVG layer, such as changing the fill color at runtime, and can add it to a layer of your own choosing. If you are dropping down to theCALayer
level, it is assumed that you want more control and you must provide a completion block and you must add it to a sublayer to display it.Output:
You can create a new
CALayer
fromURL
orData
:SVGLayer
The layer that is passed in the
UIView
andCALayer
completion blocks is an instance ofSVGLayer
which is a subclass ofCAShapeLayer
. Currently,SVGLayer
adds the following capabilities:boundingBox
property that is the minimumCGRect
that encloses all subpaths. Good for scaling the layer to fit a view.SVGLayer
, which is useful for caching.Other Interfaces
CAShapeLayer & UIBezierPath Single Paths
In addition to the
UIView
extension that allows you to parse a single<path>
d
string, you can use theCAShapeLayer
orUIBezierPath
convenience initializers.Output:
Output:
SVGView
Finally, SwiftSVG provides a
UIView
subclass that isIBInspectable
. Simply add a view to your storyboard and use the SVGView subclass as your class name. Then put the name of your SVG file in your bundle in theIBInspectable
property “SVGName”Credits
License
SwiftSVG is released under the MIT License.