❄️ SVG in Swift

Overview

Snowflake

Buy Me A Coffee

❤️ Support my apps ❤️

❤️ ❤️ 😇 😍 🤘 ❤️ ❤️

Version Carthage Compatible License Platform Swift

Description

  • SVG in Swift
  • Use XML parser from Reindeer

Usage

Document

  • Create a Document with SVG Data
guard let path = Bundle.main.path(forResource: "xmas", ofType: "svg"),
  let data = try? Data(contentsOf: URL(fileURLWithPath: path)),
   let document = Snowflake.Document(data: data)
 else { return }

let view = document.svg.view(size: CGSize(width: 100, height: 100))

  • The flow is SVG element -> Shape -> UIBezierPath -> CALayer
  • Make Shape from attributes
let attributes: [String: Any] = [
  "fill": "#358245",
  "stroke": "black",
  "stroke-miterlimit": "10",
  "d": "M308.3,102.3c4.5,8.2,9,16.2,13.2,24.3c7.2,13.9,15.8,26.9,25.6,39c10.1,12.4,21.5,23.6,33.6,34.1c2.5,2.1,5.2,3.9,8.1,6c-5.1,3.5-11.2,3.8-17,4.2c-11.9,0.9-23.7,1.5-36.4,2.3c22.7,46.7,59.7,74.6,109.7,88.1c-4.2,3.8-7.7,7.4-11.7,10.4c-11.3,8.6-24.4,13.7-38,17.4c-10.1,2.8-20.3,5-31.3,7.7c3.2,5,5.8,10.2,9.5,14.7c6.9,8.5,14.1,16.9,21.7,24.7c12.5,12.9,27.3,23,43.2,31c17.5,8.8,35.5,16.7,53.8,25.2c-3.4,3.1-6.9,7.1-11.2,10.1c-17,12.1-36.1,19.4-56.4,23.8c-8.7,1.9-17.3,3.7-27.5,5.8c5,4.7,9,9.2,13.7,12.6c13.2,9.4,26.4,19,40.4,27.1c11.8,6.9,24.6,12.1,37.3,17.4c10.4,4.3,21.1,7.7,31.7,11.5c1.1,0.4,2.3,0.5,4.4,0.9c-2.1,2.6-3.5,5.3-5.7,7c-6.7,5.3-13.2,10.8-20.5,15.1c-14.8,8.7-30.5,15.6-47.5,19.2c-17.8,3.8-35.6,3.1-53.3-0.8c-18.1-3.9-35.4-10.3-52.6-16.8c-5.7-2.2-11.7-3.7-17.5-5.8c-2.8-1-3.9,0.1-4.2,2.7c-1.1,11.3,2.7,22.1,15.6,22.4c2,0.1,3.9,0.6,5.9,0.7c6,0.3,8.7,3.1,7.7,9.1c-2,12.5-4.4,25-6.6,37.6c-2.6,14.6-5.1,29.2-7.6,43.8c-0.3,2-1.1,2.9-3.3,2.9c-17.2-0.1-34.4,0-51.6-0.1c-2.2,0-4.4-0.5-7-0.7c-1.2-6.4-2.4-12.8-3.5-19.2c-3.5-20.7-7-41.3-10.5-62c-1.8-10.5-1-9.6,8.8-11.5c4.4-0.8,9.1-1.5,13.1-3.5c5.8-2.9,8.8-15.1,6.1-21.1c-1-2.3-2.4-1.9-4.1-1.3c-10.5,3.9-21.1,7.8-31.6,11.8c-20.4,7.7-41.2,12.9-63.3,13.6c-26.3,0.8-49.9-6.4-72.4-18.8c-11.1-6.2-21.7-13.3-32.3-20.6c47.5-18,93.7-37,131.4-73.8c-35.8-5.2-68-17.1-97.8-38.3c5.2-2.4,9.3-4.5,13.6-6.1c26.2-9.7,50.5-23,72.6-40c17.5-13.4,32.1-29.6,43.7-48.5c0.3-0.4,0.4-0.9,0.6-1.5c-13.9-4-27.8-7.4-41.3-12.1c-13.5-4.7-26.3-11-37.1-22.2c4.8-2.1,9.1-4.3,13.5-6c19.2-7.5,36.9-17.5,52.4-31.2c15.1-13.4,27.5-29.1,38.1-46.2c0.7-1.1,1.3-2.3,1.9-3.5c0.5-1.2,1-2.4,1.5-3.9c-17.9-2.9-36.2,1.7-54.4-4.8c18.9-13.7,34.9-28.9,47.3-47.3C285.1,140.7,296.2,121.7,308.3,102.3z"
]

let path = Path(attributes: attributes)
let layer = path.layer

Shapes

  • The Shape object maps to SVG elements

    • path: Path
    • circle: Circle
    • line: Line
    • polygon: Polygon
    • polyline: Polyline
    • rect: Rectangle
    • ellipse: Ellipse
    • text: Text
    • image: Image
  • Path handles list of commands through Command object

Style

  • The Style object encapsulates style information
let attributes: [String: Any] = [
  "fill": "lime",
  "stroke": "purple",
  "stroke-width": "5",
  "fill-rule": "evenodd"
]

let style = Style(attributes: attributes)
  • Inner style
<polygon points="100,10 40,198 190,78 10,78 160,198" fill="lime" stroke="purple" stroke-width="5" fill-rule="evenodd" />
  • Style attribute
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />

Animation

  • The cool thing about CALayer is that most of its properties are animatable
(svgView.layer.sublayers as? [CAShapeLayer])?.forEach { layer in
  let stroke = CABasicAnimation(keyPath: "strokeEnd")
  stroke.fromValue = 0
  stroke.toValue = 1
  stroke.duration = 3

  layer.add(stroke, forKey: nil)
}

Scale

  • Scale layers to a given size
let layers = document.svg.layers(size: CGSize(width: 200, height: 100))
  • Scale view to a given size
let view = document.svg.view(size: CGSize(width: 100, height: 100))

Text

  • TBD

Image

let attributes: [String: Any] = [
  "x": "0",
  "y": "y",
  "width": "100",
  "height": "100",
  "href": "data:image/png;base64,..."
]

let image = Image(attributes: attributes)

Pattern

  • TBD

Installation

Snowflake is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'Snowflake', git: 'https://github.com/onmyway133/Snowflake'

or

pod 'FantasticSnowflake'

Snowflake is also available through Carthage. To install just write into your Cartfile:

github "onmyway133/Snowflake"

Snowflake can also be installed manually. Just download and drop Sources folders in your project.

Author

Khoa Pham, [email protected]

Contributing

We would love you to contribute to Snowflake, check the CONTRIBUTING file for more info.

License

Snowflake is available under the MIT license. See the LICENSE file for more info.

Comments
  • Use shape id to name layers

    Use shape id to name layers

    Hi! Thanks a lot for maintaining this lightweight SVG library, it's clean and really easy to use. 👏

    Since I needed to discriminate paths based on their id, I have made a small change which will name the layers using the original value of id.

    Is that something you'd consider adding to the main project?

    Let me know if you need me to make some changes to the PR.

    opened by ephread 4
  • Performance

    Performance

    Hey there,

    I've only been messing around with the example project and noticed that for some example files (Misc -> Christmas) it takes a second or two before it opens the next screen. It feels as if the simulator is frozen.

    Questions:

    1. Does the reading of the data/rendering the file take place on a background thread?
    2. Can I use this lib from a background thread to not block the main thread?
    3. Can I download SVG data from my backend and use it with this lib or does it currently only support SVGs that are bundled within the project?

    A suggestion: What do you think of making this work with a UIImageView using a category? Render the data like you're doing now, then rasterise the output into an image (maybe even cache it on disk at this point as a PNG/JPEG for quick access next time and less processing?) and display it in the imageView. Not sure what sort of performance impact this would have, but it would make working with SVGs easier imo.

    Thanks!

    opened by jyounus 4
  • Can't actually install or build

    Can't actually install or build

    Sample project doesn't even work.

    If I add

    pod 'Snowflake', git: 'https://github.com/onmyway133/Snowflake'
    

    to my Podfile, it fails to install Pre-downloading: Snowflake from https://github.com/onmyway133/Snowflake [!] Unable to find a specification for 'Snowflake'.

    If I add FantasticSnowflake, it installs but can't find the module.

    opened by alexbartisro 3
  • Playground not working

    Playground not working

    Hi - this looks like a great project!

    I ran into a problem when starting up the iOS playground and was wondering if you had a clue as to want was going wrong.

    Thanks,

    Daniel

    git clone https://github.com/onmyway133/Snowflake
    cd Snowflake
    carthage bootstrap --platform ios --cache-builds
    xcodebuild -project Snowflake.xcodeproj -target Snowflake-iOS
    open -a Xcode Snowflake.xcodeproj
    

    Navigate to Playground-iOS.playground

    Playground execution failed:
    
    <module-includes>:1:9: note: in file included from <module-includes>:1:
    #import "Reindeers-libxml2.h"
            ^
    
    /Users/danielasher/Downloads/Snowflake-master/Carthage/Checkouts/Reindeers/Cocoapods/Reindeers-libxml2.h:1:9: note: in file included from /Users/danielasher/Downloads/Snowflake-master/Carthage/Checkouts/Reindeers/Cocoapods/Reindeers-libxml2.h:1:
    #import <libxml2/libxml/HTMLparser.h>
            ^
    
    error: /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator11.2.sdk/usr/include/libxml2/libxml/HTMLparser.h:15:10: error: 'libxml/xmlversion.h' file not found
    #include <libxml/xmlversion.h>
             ^
    
    error: could not build Objective-C module 'Clibxml2'
    
    
    opened by DanielAsher 3
  • Can I manually drag this and use it in my Objective C project ?

    Can I manually drag this and use it in my Objective C project ?

    I want use this framework for my project which I written in Objective C, for some reasons I cannot add it using Cocoapods as still some of libraries used are static , so I cannot use_framework in my pods file.

    Which files so as to use this framework in my Project ?

    opened by sriteja25 3
  • Minimum Deployment Target for Reindeers is set to 9

    Minimum Deployment Target for Reindeers is set to 9

    While pod installing snowflake, I run into this error message:

    [!] Unable to satisfy the following requirements:

    • Reindeers required by Snowflake (2.0.0)

    Specs satisfying the Reindeers dependency were found, but they required a higher minimum deployment target.

    My current project is set to 8, so that might be the problem

    opened by olita1986 3
  • Carthage requires tagged version

    Carthage requires tagged version

    Running carthage update provokes an error 😞:

    *** Cloning Snowflake
    No tagged versions found for github "onmyway133/Snowflake"
    

    Could you tag the repo with a version like 0.1.0 ?

    opened by nverinaud 2
  • Text doesnt show

    Text doesnt show

    I appreciate the library. This is great. Thank you! I did however try to use an svg with text and the text doesn't show. Also text1 and text2 do not show up in the example.

    opened by drewg233 1
  • Build errors

    Build errors

    Hey !

    You have multiple build errors in your repo.

    This is due to the fact that your project hierarchy is not under versioning.

    To reproduce: clone this repo and try to build from scratch.

    Thank you for your great work !

    opened by nverinaud 1
  • not support in line css in svg file.

    not support in line css in svg file.

    i have SVG path String like this :

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 186.71 187.57"><defs><style>.cls-1{fill:#e2bf29;}.cls-2{fill:#3e507d;}</style></defs><title>FINANCE_4_LOGO_10-2-22</title><g id="OBJECTS"><path class="cls-1" d="M176.28,53.26l-8,64.48-9.87-12.5c-12.18,14.17-47.36,57.17-104.5,43.94-22.13-5.12-35.47-16.26-43.37-28.7A89.79,89.79,0,1,0,176.28,53.26Z"/><path class="cls-2" d="M4.78,91.34a39.82,39.82,0,0,0,9.53,11.71V51.33A89.27,89.27,0,0,0,4.78,91.34Z"/><path class="cls-2" d="M21.07,40v67.55a43.59,43.59,0,0,0,14.33,4.54v-88A90.55,90.55,0,0,0,21.07,40Z"/><path class="cls-2" d="M42.17,18.7v93.92A62.22,62.22,0,0,0,56.5,111V10.29A90,90,0,0,0,42.17,18.7Z"/><path class="cls-2" d="M63.27,7.45V109.07a89.66,89.66,0,0,0,14.33-6.24V3.45A88.27,88.27,0,0,0,63.27,7.45Z"/><path class="cls-2" d="M94.54,1.84a90.2,90.2,0,0,0-10.18.58V98.85a125,125,0,0,0,14.33-10.7V2C97.32,1.89,95.94,1.84,94.54,1.84Z"/><path class="cls-2" d="M105.46,2.51V82a173.55,173.55,0,0,0,14.33-15.81V56l-10-12.66,10,1.11v-39A90.31,90.31,0,0,0,105.46,2.51Z"/><path class="cls-2" d="M126.56,7.73V45.19l14.33,1.59v-32A89.66,89.66,0,0,0,126.56,7.73Z"/><path class="cls-2" d="M147.65,19.25V47.54L162,49.14V32.38A89.69,89.69,0,0,0,147.65,19.25Z"/><path class="cls-2" d="M168.75,41.1v8.79l5.62.63A89.35,89.35,0,0,0,168.75,41.1Z"/><path class="cls-2" d="M5.78,99.67c14.38,28.86,78,37.82,127.64-36.78-1.41-1.63-9.36-10.7-9.36-10.7l44.32,5.45-4.47,43.05-6.27-8.45S127.21,135.93,87.09,142C34.41,150,11.21,117.3,7.68,111,6.94,106.7,5.78,99.67,5.78,99.67Z"/><path class="cls-1" d="M83.24,127.79c37.68-12.62,70.05-50.25,84.6-70.22l-43.78-5.38s7.95,9.07,9.36,10.71C83.81,137.49,20.16,128.53,5.78,99.67c0,0,.49,3,1,6.19C24.66,132.91,53.87,137.62,83.24,127.79Z"/></g></svg>

    load this svg file like this :

          guard let path = Bundle.main.path(forResource: "sample", ofType: "svg"),
            let data = try? Data(contentsOf: URL(fileURLWithPath: path)),
             let document = Document(data: data)
           else { return }
    
          let view = document.svg.view(size: CGSize(width: 100, height: 100))
          self.view.addSubview(view)
    

    but not working.

    opened by DixPatel009 0
  • Memory leaks?

    Memory leaks?

    Was running the leaks instrument on an app I'm working on and it says there's a leak in the line:

    document = Snowflake.Document(fileName: someFileName)
    

    Also tried running the leaks instrument on the example project and it is identifying leaks when rendering some shapes. For example choose Misc and then path_s2.

    Not sure what to do with this. Can it be safely ignored?

    opened by niklasberglund 2
Releases(2.0.0)
Owner
Khoa
Check my apps https://onmyway133.com/apps
Khoa
A simple, performant, and lightweight SVG parser

Key Features Parsing performance that meets or beats other popular SVG Frameworks A simple architecture, optimized for extension, flexibility and deve

Michael Choe 1.8k Dec 29, 2022
Display and interact with SVG Images on iOS / OS X, using native rendering (CoreAnimation)

SVGKit SVGKit is a Cocoa framework for rendering SVG files natively: it's fast and powerful. Some additional info and links are on the wiki Versions:

null 4.3k Jan 3, 2023
SVG parser and renderer written in SwiftUI

SVGView SVG parser written in SwiftUI We are a development agency building phenomenal apps. Overview The goal of this project is to bring the full pow

Exyte 269 Jan 4, 2023
QEMU-Manager is a macOS graphical frontend to QEMU, written in Swift.

QEMU-Manager About QEMU-Manager is a macOS graphical frontend to QEMU, written in Swift. Screenshots General Configuration: Hardware Configuration: Di

Jean-David Gadina 212 Jan 6, 2023
A simple, declarative, functional drawing framework, in Swift!

DePict - A simple, declarative, functional drawing framework. To produce a drawing, call the Draw function (just type Draw and let autocomplete do the

David Cairns 35 Sep 16, 2021
Drawing and Geometry made easy on iOS - now in Swift 3.0

InkKit Swift Support Swift 4.0 InkKit is Swift 4.0 by default, so to use that just include InkKit in your podfile: pod 'InkKit' Swift 3.2 In order to

Shaps 373 Dec 27, 2022
Conical (angular) gradient for iOS written in Swift

AEConicalGradient Conical (angular) gradient in Swift I hope that somebody will find this useful. And nice. Usage AEConicalGradient is a minion which

Marko Tadić 82 Dec 27, 2022
Unique blocky identicons generator for Swift

⚗️ BlockiesSwift This library is a Swift implementation of the Ethereum fork of Blockies which is intended to be used in iOS, watchOS, tvOS and macOS

null 57 Dec 1, 2022
A lightweight XMLParser for assembling and parsing XML values written for iOS 8+ in Swift 2.

Overview Description Requirements Installation Usage Author License Description XMLParser lets you convert a pure Swift dictionary into XML string and

Eugene Mozharovsky 75 Feb 2, 2022
Elegant SVG animation kit for swift

Elephant This is SVG animation presentation kit for iOS. Example You can run example app. Please open Example-iOS/Elephant-iOS.xcworkspace! Usage You

Kazumasa Shimomura 127 Dec 14, 2022
❄️ SVG in Swift

Snowflake ❤️ Support my apps ❤️ Push Hero - pure Swift native macOS application to test push notifications PastePal - Pasteboard, note and shortcut ma

Khoa 949 Dec 14, 2022
Powerful and easy-to-use vector graphics Swift library with SVG support

Macaw Powerful and easy-to-use vector graphics Swift library with SVG support We are a development agency building phenomenal apps. What is Macaw? Mac

Exyte 5.9k Jan 1, 2023
❄️ SVG in Swift

Snowflake ❤️ Support my apps ❤️ Push Hero - pure Swift native macOS application to test push notifications PastePal - Pasteboard, note and shortcut ma

Khoa 949 Dec 14, 2022
Powerful and easy-to-use vector graphics Swift library with SVG support

Macaw Powerful and easy-to-use vector graphics Swift library with SVG support We are a development agency building phenomenal apps. What is Macaw? Mac

Exyte 5.9k Jan 2, 2023
A Swift library for parsing and drawing SVG images to CoreGraphics contexts.

SwiftDraw A Swift library for parsing and drawing SVG images to CoreGraphics contexts. SwiftDraw can also convert an SVG into Swift source code. Usage

Simon Whitty 119 Jan 3, 2023
A simple, performant, and lightweight SVG parser

Key Features Parsing performance that meets or beats other popular SVG Frameworks A simple architecture, optimized for extension, flexibility and deve

Michael Choe 1.8k Dec 29, 2022
A simple, performant, and lightweight SVG parser

Key Features Parsing performance that meets or beats other popular SVG Frameworks A simple architecture, optimized for extension, flexibility and deve

Michael Choe 1.8k Dec 29, 2022
Display and interact with SVG Images on iOS / OS X, using native rendering (CoreAnimation)

SVGKit SVGKit is a Cocoa framework for rendering SVG files natively: it's fast and powerful. Some additional info and links are on the wiki Versions:

null 4.3k Jan 3, 2023
SVG parser and renderer written in SwiftUI

SVGView SVG parser written in SwiftUI We are a development agency building phenomenal apps. Overview The goal of this project is to bring the full pow

Exyte 269 Jan 4, 2023
Tool to convert SVG to SwiftUI's Shape structure.

SVG to SwiftUI Converter Tool to convert SVG to SwiftUI's Shape structure. This approach is much more memory efficient than introducing a SVG library

Quassum Manus 487 Jan 8, 2023