Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/swhitty/SwiftDraw
Swift library and command line tool to convert SVGs into SFSymbol, PNG, PDF and Swift source code.
https://github.com/swhitty/SwiftDraw
sfsymbol svg swift
Last synced: 2 months ago
JSON representation
Swift library and command line tool to convert SVGs into SFSymbol, PNG, PDF and Swift source code.
- Host: GitHub
- URL: https://github.com/swhitty/SwiftDraw
- Owner: swhitty
- License: zlib
- Created: 2017-05-24T01:55:34.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2024-05-04T01:29:15.000Z (8 months ago)
- Last Synced: 2024-05-04T02:26:36.631Z (8 months ago)
- Topics: sfsymbol, svg, swift
- Language: Swift
- Homepage:
- Size: 2.42 MB
- Stars: 290
- Watchers: 9
- Forks: 37
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
- awesome-ios - SwiftDraw - line tool for drawing and converting SVG images. <br> (Images)
- fucking-awesome-swift - SwiftDraw - Library that converts SVG images to UIImage, NSImage and generates CoreGraphics source code. (Libs / Images)
- awesome-swift - SwiftDraw - Library that converts SVG images to UIImage, NSImage and generates CoreGraphics source code. (Libs / Images)
README
[](https://github.com/swhitty/SwiftDraw/actions/workflows/build.yml)
[](https://codecov.io/gh/swhitty/SwiftDraw)
[](https://github.com/swhitty/SwiftDraw/blob/main/Package.swift)
[](https://developer.apple.com/swift)
[](https://opensource.org/licenses/Zlib)
[](http://twitter.com/simonwhitty)
# Introduction
**SwiftDraw** is Swift library for parsing and drawing SVG images and includes a command line tool to convert SVGs into SFSymbol, PNG, PDF and Swift source code.
- [Usage](#usage)
- [iOS](#ios)
- [macOS](#macos)
- [Command Line Tool](#command-line-tool)
- [Installation](#installation)
- [SF Symbol](#sf-symbol)
- [Alignment](#alignment)
- [Swift Code Generation](#swift-code-generation)
- [Credits](#credits)
## Usage
Vector images can be easily loaded and rasterized to `UIImage` or `NSImage`:
```swift
let svg = SVG(named: "sample.svg", in: .main)!
imageView.image = svg.rasterize()
```
Rasterize to any size:
```swift
let svg = SVG(named: "sample.svg", in: .main)!
imageView.image = svg.rasterize(with: CGSize(width: 640, height: 480))
```
Crop the image using insets:
```swift
let svg = SVG(named: "sample.svg", in: .main)!
imageView.image = svg.rasterize(insets: .init(top: 10, left: 0, bottom: 10, bottom: 0))
```
Add padding using negative insets:
```swift
let svg = SVG(named: "sample.svg", in: .main)!
imageView.image = svg.rasterize(insets: .init(top: -10, left: -10, bottom: -10, bottom: -10))
```
### iOS
Create a `UIImage` directly from an SVG within a bundle, `Data` or file `URL`:
```swift
import SwiftDraw
let image = UIImage(svgNamed: "sample.svg")
```
### macOS
Create an `NSImage` directly from an SVG within a bundle, `Data` or file `URL`:
```swift
import SwiftDraw
let image = NSImage(svgNamed: "sample.svg")
```
## Command line tool
The command line tool converts SVGs to other formats: PNG, JPEG, SFSymbol and Swift source code.
```
copyright (c) 2024 Simon Whitty
usage: swiftdraw [--format png | pdf | jpeg | swift | sfsymbol] [--size wxh] [--scale 1x | 2x | 3x]
svg file to be processed
Options:
--format format to output image: png | pdf | jpeg | swift | sfsymbol
--size size of output image: 100x200
--scale scale of output image: 1x | 2x | 3x
--insets crop inset of output image: top,left,bottom,right
--precision maximum number of decimal places
--output optional path of output file
--hideUnsupportedFilters hide elements with unsupported filters.
Available keys for --format swift:
--api api of generated code: appkit | uikit
Available keys for --format sfsymbol:
--insets alignment of regular variant: top,left,bottom,right | auto
--ultralight svg file of ultralight variant
--ultralightInsets alignment of ultralight variant: top,left,bottom,right | auto
--black svg file of black variant
--blackInsets alignment of black variant: top,left,bottom,right | auto
```
```bash
$ swiftdraw simple.svg --format png --scale 3x
```
```bash
$ swiftdraw simple.svg --format pdf
```
### Installation
You can install the `swiftdraw` command-line tool on macOS using [Homebrew](http://brew.sh/). Assuming you already have Homebrew installed, just type:
```bash
$ brew install swiftdraw
```
To update to the latest version once installed:
```bash
$ brew upgrade swiftdraw
```
Alternatively download the latest command line tool [here](https://github.com/swhitty/SwiftDraw/releases/latest/download/SwiftDraw.dmg.zip).
### SF Symbol
Custom SF Symbols can be created from a single SVG. SwiftDraw expands strokes, winds paths using the [non-zero rule](https://en.wikipedia.org/wiki/Nonzero-rule) and aligns elements generating a symbol that can be imported directly into Xcode.
$ swiftdraw [key.svg](https://github.com/swhitty/SwiftDraw/blob/main/Samples.bundle/key/key.svg) --format sfsymbol
Optional variants `--ultralight` and `--black` can also be provided:
$ swiftdraw [key.svg](https://github.com/swhitty/SwiftDraw/blob/main/Samples.bundle/key/key.svg) --format sfsymbol --ultralight [key-ultralight.svg](https://github.com/swhitty/SwiftDraw/blob/main/Samples.bundle/key/key-ultralight.svg) --black [key-black.svg](https://github.com/swhitty/SwiftDraw/blob/main/Samples.bundle/key/key-black.svg)
#### Alignment
By default, SwiftDraw automatically sizes and aligns the content to the template guides. The auto alignment insets are output by the tool:
```bash
$ swiftdraw simple.svg --format sfsymbol --insets auto
Alignment: --insets 30,30,30,30
```
Insets can be provided in the form `--insets top,left,bottom,right` specifying a `Double` or `auto` for each edge:
```bash
$ swiftdraw simple.svg --format sfsymbol --insets 40,auto,40,auto
Alignment: --insets 40,30,40,30
```
Variants can also be aligned using `--ultralightInsets` and `--blackInsets`.
### Swift Code Generation
Swift source code can also be generated from an SVG using the tool:
```bash
$ swiftdraw simple.svg --format swift
```
```xml
```
```swift
extension UIImage {
static func svgSimple(size: CGSize = CGSize(width: 160.0, height: 160.0)) -> UIImage {
let f = UIGraphicsImageRendererFormat.preferred()
f.opaque = false
let scale = CGSize(width: size.width / 160.0, height: size.height / 160.0)
return UIGraphicsImageRenderer(size: size, format: f).image {
drawSimple(in: $0.cgContext, scale: scale)
}
}
private static func drawSimple(in ctx: CGContext, scale: CGSize) {
ctx.scaleBy(x: scale.width, y: scale.height)
let rgb = CGColorSpaceCreateDeviceRGB()
let color1 = CGColor(colorSpace: rgb, components: [1, 0.98, 0.98, 1])!
ctx.setFillColor(color1)
ctx.fill(CGRect(x: 0, y: 0, width: 160, height: 160))
let color2 = CGColor(colorSpace: rgb, components: [1, 0.753, 0.796, 1])!
ctx.setFillColor(color2)
let path = CGMutablePath()
path.move(to: CGPoint(x: 80, y: 30))
path.addCurve(to: CGPoint(x: 30, y: 80),
control1: CGPoint(x: 52.39, y: 30),
control2: CGPoint(x: 30, y: 52.39))
path.addCurve(to: CGPoint(x: 80, y: 130),
control1: CGPoint(x: 30, y: 107.61),
control2: CGPoint(x: 52.39, y: 130))
path.addCurve(to: CGPoint(x: 130, y: 80),
control1: CGPoint(x: 107.61, y: 130),
control2: CGPoint(x: 130, y: 107.61))
path.addLine(to: CGPoint(x: 80, y: 80))
path.closeSubpath()
ctx.addPath(path)
ctx.fillPath()
ctx.setLineCap(.butt)
ctx.setLineJoin(.miter)
ctx.setLineWidth(2)
ctx.setMiterLimit(4)
let color3 = CGColor(colorSpace: rgb, components: [0, 0, 0, 1])!
ctx.setStrokeColor(color3)
ctx.addPath(path)
ctx.strokePath()
}
}
```
Source code can be generated using [www.whileloop.com/swiftdraw](https://www.whileloop.com/swiftdraw).
# Credits
SwiftDraw is primarily the work of [Simon Whitty](https://github.com/swhitty).
([Full list of contributors](https://github.com/swhitty/SwiftDraw/graphs/contributors))