PocketSVG

A simple toolkit for displaying and manipulating SVGs on iOS and macOS in a performant manner.

The goal of this project is not to be a fully compliant SVG parser/renderer. But rather to use SVG as a format for serializing CG/UIPaths, meaning it only supports SVG features that can be represented by CG/UIPaths.

Thoroughly documented.

Features

• Render SVG files via SVGImageView/Layer
• Display all kinds of SVGs shapes and paths.
• Fully working iOS and macOS demos.
• Straightforward API for typical SVG rendering (SVGLayer and SVGImageView)
• Supports more fine-grained SVG manipulation (SVGBezierPath and SVGEngine)

Installation

Cocoapods

Add pod PocketSVG to your Podfile.

Carthage

Add this to your Cartfile:

github "pocketsvg/PocketSVG"

Then run carthage update.

Manual

Drag and drop PocketSVG.xcodeproj into your Xcode project. In your project settings, add PocketSVG.framework in Link Binary With Libraries.

Usage

Render an SVG file using SVGImageView:

let url = NSBundle.mainBundle().URLForResource("svg_file_name", withExtension: "svg")!
let svgImageView = SVGImageView(contentsOfURL: url)
view.addSubview(svgImageView)

Manually render each path of an SVG file into using CAShapeLayers:

for(SVGBezierPath *path in [SVGBezierPath pathsFromSVGNamed:@"myImage"]) {
    // Create a layer for each path
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.path = path.CGPath;

    // Set its display properties
    layer.lineWidth   = 4;
    layer.strokeColor = [path.svgAttributes[@"stroke"] ?: [UIColor blackColor] CGColor];
    layer.fillColor   = [path.svgAttributes[@"fill"] ?: [UIColor redColor] CGColor];

    // Add it to the layer hierarchy
    [self.view.layer addSublayer:layer];
}

Screenshots

iOS

macOS

Contributing

Bug Reports & Feature Requests

Please use the issue tracker to report any bugs or file feature requests.

Developing

PRs are welcome.