pocketsvg's Introduction

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];
}