DOCSEARCHbyAlgolia
Submit Docs

SwiftSVG Documentation

repository·master·Indexed 24 days ago

https://github.com/mchoe/swiftsvg

A high-performance Swift library for parsing and displaying SVG files in iOS and macOS applications. Optimized for flat, solid-color icons, it provides interfaces for UIView, CALayer, and UIBezierPath, including an IBDesignable SVGView for use in Interface Builder.

Tokens
1.7K
Snippets
4
Records
6
Agent score
34%

What's inside SwiftSVG

  1. Understand the SVGLayer abstraction

    master

    SVGLayer is a subclass of CAShapeLayer provided to you via the completion blocks of UIView and CALayer initializers. It includes several specialized capabilities:

    • boundingBox: A CGRect property representing the minimum rectangle that encloses all subpaths. This is useful for scaling the layer to fit a specific view size.
    • Property Overrides: Overriding properties like fillColor, strokeColor, and strokeWidth on the SVGLayer will apply those values to all its sublayers.
    • Copying: Supports creating a copy of the SVGLayer, which is useful for implementing caching mechanisms.

  2. Create an SVG using UIView extensions

    master

    The easiest way to display an SVG is by using UIView convenience initializers. These initializers parse the file asynchronously and automatically add the resulting SVGLayer to the view's sublayers.

    If you need to modify the layer (e.g., changing fill color or resizing), use the completion block which provides an SVGLayer instance.

    Available Initializers

    • init(SVGNamed: String, parser: SVGParser? = nil, completion: ((SVGLayer) -> ())? = nil): Loads from the main bundle or an asset catalog (as a Data Asset).
    • init(SVGURL: URL, parser: SVGParser? = nil, completion: ((SVGLayer) -> ())? = nil): Loads from a remote or local URL.
    • init(SVGData: Data, parser: SVGParser? = nil, completion: ((SVGLayer) -> ())? = nil): Loads from raw data.
    • init(pathString: String): Synchronous initializer for parsing a single SVG <path> d string.

    Customizing the SVG

    You can pass a custom SVGParser (default is NSXMLSVGParser) or use the completion block to manipulate the SVGLayer.

    // Load from main bundle
let fistBump = UIView(SVGNamed: "fistbump")
self.addSubview(fistBump)

// Load from Asset Catalog (as Data Asset)
let cowboyHat = UIView(SVGNamed: "cowboyHat")
self.addSubview(cowboyHat)

// Load from a remote URL and customize
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)

// Parse a single path string synchronously
let triangle = UIView(pathString: "M75 0 l75 200 L0 200 Z")
self.addSubview(triangle)

  3. Use SVGView in Interface Builder (Storyboard)

    master

    SwiftSVG provides an IBDesignable subclass called SVGView.

    To use it:

    1. Add a UIView to your storyboard.
    2. Change its class to SVGView.
    3. In the Identity Inspector, set the SVGName property to the name of your SVG file (without the extension) located in your app bundle.

  4. Install SwiftSVG via CocoaPods or Carthage

    master

    You can install SwiftSVG using CocoaPods or Carthage.

    CocoaPods:

    pod 'SwiftSVG', '~> 2.0'

    Carthage:

    github "mchoe/SwiftSVG" ~> 2.0

    Note for 1.x users: SwiftSVG 2.x is a major rewrite. While most code should upgrade with minimal changes, String extensions and parsing single path strings from a URL are now deprecated.

    pod 'SwiftSVG', '~> 2.0'

  5. Parse single paths into CAShapeLayer or UIBezierPath

    master

    If you only have a single SVG path string (the d attribute), you can use the convenience initializers for CAShapeLayer or UIBezierPath to create a path object directly.

    let sockPuppet = "M49.976,36.57l27.343,1.078c7.437,0,13.486-6.05,13.486-13.487s-6.049-13.487-13.485-13.487H58  c-0.429-3.546-2.45-6.235-4.881-6.235s-4.45,2.689-4.877,6.235h-4.368c-0.259,0-0.511,0.01-0.768,0.014  c-0.423,3.553-2.445,6.25-4.88,6.25c-2.719,0-4.924,3.36-4.961,7.523c-5.139,1.369-9.419,3.825-12.781,7.357  c-8.476,8.907-7.963,21.297-7.939,21.737v37.496h4.016V93.5h33.775V78.551h4.471v-1.682c0-8.529,4.16-9.612,4.639-9.708  c0.794,-0.026,5.409,-0.225,10.103,-1.41c9.184,-2.323,11.111,-6.586,11.111,-9.753c0,-7.207,-5.377,-9.775,-10.409,-9.775  c-0.399,0,-0.689,0.018,-0.829,0.028H51.104l-0.237,0.017c-0.004,0.001,-0.422,0.058,-1.042,0.058c-5.218,0,-5.218,-3.253,-5.218,-4.322  C44.607,36.887,49.143,36.58,49.976,36.57z"

let sockPuppetSVG = CAShapeLayer(pathString: sockPuppet)
let returnView = UIView()
self.layer.addSublayer(sockPuppetSVG)

  6. Create an SVG using CALayer extensions

    master

    For more granular control, use CALayer convenience initializers. Unlike UIView, when using CALayer, you must provide a completion block and you are responsible for adding the resulting layer to a sublayer to make it visible.

    Available Initializers

    • init(SVGURL: URL, parser: SVGParser? = nil, completion: @escaping (SVGLayer) -> ())
    • init(SVGData: Data, parser: SVGParser? = nil, completion: @escaping (SVGLayer) -> ())
    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)
}