❄️ SVG in Swift

Related tags

Image svg html swift rss ios xml
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
ImageView - Component for loading and displaying different images aka SVG/PNG/JPG/JPEG

ImageView Component that loads and displays images(.svg/.png/.jpg/.jpeg) form as

Sergei 1 Mar 23, 2022
API surface for Swift plug-ins using the Swift Plugin Manager

SwiftPlugin The minimal API surface required for the Swift Plugin Manager to create instances from a loaded plugin. Additional documentation and refer

Joakim Hassila 2 Mar 25, 2022
Contentful.swift : Swift Delivery SDK for Contentful

contentful.swift - Swift Delivery SDK for Contentful Swift SDK for the Contentfu

An Tran 1 Jan 6, 2022
Swift Package Manager command plugin for Swift-DocC

Swift-DocC Plugin The Swift-DocC plugin is a Swift Package Manager command plugin that supports building documentation for SwiftPM libraries and execu

Apple 225 Dec 24, 2022
Agrume - 🍋 An iOS image viewer written in Swift with support for multiple images.

Agrume An iOS image viewer written in Swift with support for multiple images. Requirements Swift 5.0 iOS 9.0+ Xcode 10.2+ Installation Use Swift Packa

Jan Gorman 601 Dec 26, 2022
BlockiesSwift - 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 56 Jan 6, 2023
FacebookImagePicker is Facebook album photo picker written in Swift.

Features • Installation • Usage • Translation • License GBHFacebookImagePicker is Facebook's album photo picker written in Swift, built to provide a s

Florian Gabach 231 Dec 17, 2022
GPUImage 2 is a BSD-licensed Swift framework for GPU-accelerated video and image processing.

GPUImage 2 Brad Larson http://www.sunsetlakesoftware.com @bradlarson [email protected] Overview GPUImage 2 is the second generation of th

Brad Larson 4.8k Dec 29, 2022
GPUImage 3 is a BSD-licensed Swift framework for GPU-accelerated video and image processing using Metal.

GPUImage 3 Janie Clayton http://redqueengraphics.com @RedQueenCoder Brad Larson http://www.sunsetlakesoftware.com @bradlarson contact@sunsetlakesoftwa

Brad Larson 2.4k Jan 3, 2023
A lightweight generic cache for iOS written in Swift with extra love for images.

Haneke is a lightweight generic cache for iOS and tvOS written in Swift 4. It's designed to be super-simple to use. Here's how you would initalize a J

Haneke 5.2k Dec 11, 2022
A lightweight and fast image loader for iOS written in Swift.

ImageLoader ImageLoader is an instrument for asynchronous image loading written in Swift. It is a lightweight and fast image loader for iOS. Features

Hirohisa Kawasaki 293 Nov 24, 2022
A Swift implementation of fastimage. Supports PNG, GIF, and JPEG.

ImageScout ImageScout is a Swift implementation of fastimage. It allows you to find the size and type of a remote image by downloading as little as po

Reda Lemeden 967 Dec 30, 2022
A Swift client library for generating URLs with imgix

imgix-swift is a client library for generating image URLs with imgix. Written in Swift, but can be used with Objective-C codebases as well. Installati

imgix 24 Sep 28, 2022
Kingfisher is a powerful, pure-Swift library for downloading and caching images from the web

Kingfisher is a powerful, pure-Swift library for downloading and caching images from the web. It provides you a chance to use a pure-Swift way to work

Wei Wang 20.9k Dec 30, 2022
🍁🥓 Lightweight and fast Swift library for image downloading, caching and transformations

MapleBacon Introduction MapleBacon is a lightweight and fast Swift library for downloading and caching images. Example The folder Example contains a s

Jan Gorman 335 Nov 1, 2022
An image download extension of the image view written in Swift for iOS, tvOS and macOS.

Moa, an image downloader written in Swift for iOS, tvOS and macOS Moa is an image download library written in Swift. It allows to download and show an

Evgenii Neumerzhitckii 330 Sep 9, 2022
Fabulous Image Processing in Swift

Toucan is a Swift library that provides a clean, quick API for processing images. It greatly simplifies the production of images, supporting resizing,

Gavin Bunney 2.4k Jan 6, 2023
Multi image downloader with priority in Swift

Vulcan Multi image downloader with priority in Swift Features Very light Multi image download with priority Caching images Pure Swift Composable image

Jin Sasaki 294 Aug 29, 2022