Code Monkey home page Code Monkey logo

pocketsvg's Introduction

PocketSVG

A class that converts Scalable Vector Graphics (SVG) into:

  • CGPaths
  • CAShapeLayers
  • UIBezierCurves
  • NSBezierCurves.

This makes it easy to create vector-based paths and shapes in your iOS or OS X apps.

This a fork of an SVG to bezier path parser by Martin Haywood, with fixes by Pieter Omvlee and Dominic Mortlock.

Feedback, improvements, and pull requests are welcome.

Usage

  1. Make your drawing in a vector graphics editor such as Illustrator, Inkscape, Sketch, etc.
  2. Save as an SVG.
  3. Drag and drop it into your Xcode project.
  4. Follow these easy steps:
    //1: Create a PocketSVG object from your SVG file:
    PocketSVG *myVectorDrawing = [[PocketSVG alloc] initFromSVGFileNamed:@"BezierCurve3"];
    
    //2: Its bezier property is the corresponding UIBezierPath:
    UIBezierPath *myBezierPath = myVectorDrawing.bezier;
    
    //3: To display it on screen, create a CAShapeLayer and set 
    //the CGPath property of the above UIBezierPath as its 
    //path. 
    CAShapeLayer *myShapeLayer = [CAShapeLayer layer];
    myShapeLayer.path = myBezierPath.CGPath;
    
    //4: Fiddle with it using CAShapeLayer's properties:
    myShapeLayer.strokeColor = [[UIColor redColor] CGColor];
    myShapeLayer.lineWidth = 4;
    myShapeLayer.fillColor = [[UIColor clearColor] CGColor];
    
    //5: Display it!
    [self.view.layer addSublayer:myShapeLayer];

Don't forget to add the QuartzCore framework to your project (here's how) and import it:

#import <QuartzCore/QuartzCore.h>

Useful Documentation

Latest Fixes

  • Added support for NSBezierPaths (thanks to mcianni).
  • Fixed problem that causes SVGs to render with wrong frame dimensions.
  • Fixed problem that causes some SVGs to render incorrectly.
  • Fixed parse bug for SVGs with blank spaces in them (thanks to mindbrix).
  • Simplified PocketSVG's init method (thanks to johnnyknox).

To Do

  • Support for SVG's Basic Shapes.
  • Support for SVGs with more than one path (currently PocketSVG renders the last path).
  • Improve parser efficiency.
  • Make it a category on CAShapeLayer?

Support

Please ask questions and report bugs on the project's Issues Page.

License

[Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) license] (http://creativecommons.org/licenses/by-sa/3.0)

You are free:

  • to Share — to copy, distribute and transmit the work
  • to Remix — to adapt the work
  • to make commercial use of the work

Under the following conditions:

  • Attribution — You must attribute the work in the manner specified by the author or licensor (but not in any way that suggests that they endorse you or your use of the work).
  • Share Alike — If you alter, transform, or build upon this work, you may distribute the resulting work only under the same or similar license to this one.

pocketsvg's People

Contributors

arielelkin avatar locknic avatar mcianni avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.