DOCSEARCHbyAlgolia
Submit Docs

SwiftDraw Documentation

repository·main·Indexed 19 days ago

https://github.com/swhitty/swiftdraw

An SVG processing library and toolset for Apple platforms. It provides native SVG rendering for SwiftUI via SVGView and AsyncSVGView, as well as support for UIKit and AppKit. The included swiftdraw CLI allows for converting SVGs into PNG, PDF, JPEG, SF Symbols, and native Swift drawing code for SwiftUI, AppKit, and UIKit.

Tokens
1.5K
Snippets
9
Records
9
Agent score
21%

What's inside SwiftDraw

  2. Use SVGView in SwiftUI

    main

    SwiftDraw provides SVGView for displaying SVGs in SwiftUI. It behaves similarly to SwiftUI's Image view.

    Basic Usage

    import SwiftDraw

SVGView("sample.svg")

    Layout and Scaling

    By default, SVGs render at their intrinsic size. Use the following modifiers to control layout:

    • .resizable(): Makes the SVG flexible within layouts.
    • .scaledToFit(): Scales proportionally to fit inside the container.
    • .scaledToFill(): Fills the container, cropping if necessary.
    • .resizable(resizingMode: .tile): Repeats the SVG as tiles.

    Template Rendering

    You can render SVGs as templates, which replaces non-transparent pixels with the current foreground style (useful for icon coloring):

    SVGView("spider.svg")
    .renderingMode(.template)
    .foregroundStyle(.blue)

    Performance Optimization

    To avoid repeated cache lookups or parsing, pass an already-constructed SVG instance:

    var image: SVG

var body: some View {
    SVGView(svg: image)
}
    import SwiftDraw

SVGView("sample.svg")
    .resizable()
    .scaledToFit()

  3. Generate SF Symbols from SVGs

    main

    SwiftDraw can convert a single SVG into a custom SF Symbol package that can be imported into Xcode. It expands strokes and winds paths using the non-zero rule.

    Basic Generation

    $ swiftdraw key.svg --format sfsymbol

    Generating Variants

    You can provide explicit SVG files for --ultralight and --black variants:

    $ swiftdraw key.svg --format sfsymbol --ultralight key-ultralight.svg --black key-black.svg

    Auto-generating Weight Variants

    If you don't have explicit variant files, you can synthesize them by scaling the stroke-width:

    $ swiftdraw key.svg --format sfsymbol --ultralight-stroke-width 50% --black-stroke-width 2.0

    Alignment and Insets

    By default, SwiftDraw aligns content to template guides. You can specify custom insets using --insets top,left,bottom,right or use auto:

    $ swiftdraw simple.svg --format sfsymbol --insets 40,auto,40,auto

    Note: Variants can also be aligned using --ultralight-insets and --black-insets.

  4. Generate Swift Code from SVGs

    main

    You can generate native Swift source code (using Canvas or other drawing primitives) from an SVG file.

    CLI Usage

    $ swiftdraw simple.svg --format swift --api swiftui

    The --api flag accepts:

    • swiftui (default)
    • appkit
    • uikit

    Generated code typically includes a view that uses a Canvas to draw the SVG paths and colors directly, ensuring high performance and native rendering.

    $ swiftdraw simple.svg --format swift

  5. Rasterize SVGs to UIImage or NSImage

    main

    You can manually load an SVG, apply transformations, and rasterize it into a standard image format.

    Loading and Rasterizing

    // For UIKit
let svg = SVG(named: "sample.svg", in: .main)!
imageView.image = svg.rasterize()

    Transformations

    Transformations can be chained before calling .rasterize():

    let svg = SVG(named: "fish.svg")!
    .expanded(left: 10, right: 10) // Adjust dimensions
    .scaled(2)                     // Scale the result

imageView.image = svg.rasterize()
    let svg = SVG(named: "fish.svg")!
    .expanded(left: 10, right: 10)
    .scaled(2)

imageView.image = svg.rasterize()

  6. Use SVG in UIKit and AppKit

    main

    SwiftDraw provides direct initializers to create platform-specific images from SVGs.

    UIKit

    import SwiftDraw
let image = UIImage(svgNamed: "sample.svg")

    AppKit

    import SwiftDraw
let image = NSImage(svgNamed: "sample.svg")

  7. Load remote SVGs with AsyncSVGView

    main

    For loading SVGs from a URL, use AsyncSVGView. You can handle different loading phases (empty, success, failure) using a phase-based initializer to provide custom loading indicators or error states.

    AsyncSVGView(url: URL(string: "https://example.com/image.svg"))
    .resizable()
    .scaledToFit()

    Custom loading/error handling:

    AsyncSVGView(url: url) { phase in
    switch phase {
    case .empty:
        ProgressView()
    case .success(let svg):
        SVGView(svg: svg)
    case .failure:
        Image(systemName: "exclamationmark.triangle")
    }
}

  8. Convert SVGs using the swiftdraw CLI

    main

    The swiftdraw CLI converts SVGs to PNG, JPEG, PDF, Swift code, or SF Symbols.

    Basic Usage

    swiftdraw <file.svg> [--format png | pdf | jpeg | swift | sfsymbol] [--size wxh] [--scale 1x | 2x | 3x]

    Examples

    Convert to PNG with 3x scale:

    $ swiftdraw simple.svg --format png --scale 3x

    Convert to PDF:

    $ swiftdraw simple.svg --format pdf

    Handling Responsive SVGs

    If an SVG uses percentage widths or lacks explicit dimensions, provide a canvas size using --size to act as the viewport:

    $ swiftdraw responsive.svg --format png --size 800x600

    If the SVG has a viewBox, dimensions are handled automatically and --size is not required.

  9. Use the SwiftDraw command line tool

    main

    The SwiftDraw command line tool is the entrypoint for converting SVGs into various formats including PNG, PDF, SF Symbols, and Swift code. It is invoked via the terminal and its behavior is driven by the SwiftDraw library. To use it, ensure the binary is in your PATH and execute it with the desired arguments for your conversion task.

    # Example usage (actual flags depend on the SwiftDraw library implementation)
swiftdraw input.svg output.png