Giter Club home page Giter Club logo

swiftvg's Introduction

SwiftVG

Purpose

If you need to display SVG files in your iOS application you don't have a ton of options. The native support just isn't there and PaintCode is wonderful but has limitations:

  • Complex SVGs generate a lot of code - and that much code can slow XCode way down.
  • The code generated by PaintCode has to be included in your app at compile time - no over the air SVGs.

Looking around the web I was able to find a couple great projects but nothing that did exactly what I wanted. SVGKit was heavy and didn't let me draw directly to the context. SKUBezierPath+SVG does a great job translating SVG paths to UIBezierPaths but doesn't help with parsing a large SVG file.

I built SwiftVG to make displaying SVG files in your iOS app easier - whether you bundle them with the application or deliver them over the air.

Installation

I'll get to work on a cocoapod soon. In the meantime just download the files and add them to your project. You'll need an objective-c bridging header for SKUBezierPath+SVG (included) which handles the path parsing. I'm working on a Swift port inspired by SKUBezierPath+SVG to get rid of this dependency.

Usage

Use SVGVectorImage where you would normally use UIImage and use SVGView where you would normally use UIImageView.

Programmatically

let svgView = SVGView(vectorImage:SVGVectorImage(named: "example"))
view.addSubview(svgView)

In A Storyboard

  • Drag a UIView out into the storyboard and change it's class to SVGView in the Identity Inspector
  • Optionally set an SVG Name in the Attributes Inspector - this is a file name in your main bundle (excluding the .svg)
  • The storyboard will live render your SVG, just like an UIImageView would!

Alt Text

What if my SVG isn't in the bundle?

Instantiate your SVGVectorImage from NSData or a file path that could point anywhere.

//load from data
let data:NSData = /* data from somewhere - maybe the internet? */
let svgVectorImage = SVGVectorImage(data: data)

//load from a path
let path = /* some path - maybe documents or tmp directory? */
let svgVectorImage = SVGVectorImage(path: path)

//however you end up with an SVGVectorImage you can add it to a SVGView to display it
let svgView = SVGView() //could be on a storyboard - or created earlier
svgView.vectorImage = svgVectorImage

What's supported - What isn't?

SVGView supports the following contentMode values:

  • .ScaleAspectFill
  • .ScaleAspectFit
  • .ScaleToFill
  • .Center

I haven't tested every SVG out there so I'm sure there are things that I'm not supporting. I currently support groups, paths, polygons, rects, linearGradients, and radialGradients. This tends to work well for me on SVGs exported from Adobe Illustrator as per my workflow - but if you have a problematic SVG file let me know about it - or even better fix it and submit a pull request :)

swiftvg's People

Contributors

austinfitzpatrick avatar

Stargazers

Olaf Neumann avatar Kien avatar Renaud Bouissière avatar  avatar Muhammad Jabbar avatar  avatar Vijay Tholpadi avatar isaced avatar Venj avatar Emad A. avatar Emanuele Sabetta avatar  avatar  avatar  avatar Linda Morton avatar

Watchers

 avatar James Cloos avatar  avatar

swiftvg's Issues

Some of my svg buttons to test the library

Great project! I've followed the same road (trying Paintcode, Svgkit, etc.) with mixed results and I finally found your library. I think you have the best approach to SVG rendering in Apps. I also like you aiming to make it a full Swift library with no Objective-C dependencies.

I use to create all my assets in SVG because it's the only scalable and crossplatform graphic format, so I have a huge library of assets to use in my apps, but still no library to load and render those on iOS.

Currently my svg buttons make your library crashing if loaded instead of your example svg, because SwiftVG still doesn't support many important features of the SVG specs.

I'll provide you with some of my svg buttons to test and improve the library, in the hope that you'll library will display them one day.

This is how my buttons should look for reference:
ios_app_buttons

You can download the original svg file from my google drive (click on the download button):
http://goo.gl/m7TbmM

For an easier debug, here it is a splitted version of the two main buttons svg files, you can download the zip from here:
https://drive.google.com/file/d/0BxexooDWEb8ublZlcm5yRWpXTzQ/view?usp=sharing

Here are the screenshots of how each svg file should look:

schermata 2015-02-20 alle 20 28 22
schermata 2015-02-20 alle 20 27 56
schermata 2015-02-20 alle 20 24 58
schermata 2015-02-20 alle 20 24 49
schermata 2015-02-20 alle 20 24 17
schermata 2015-02-20 alle 20 23 59

If you need any graphic svg asset to build sample UIs, just ask. I can design those for you with Inkscape. Good job.

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.