SOLVED: Normalising SVG or UIBezierPath for use in SwiftUI Shape

@chriswilson1982

Jun '20

In a recent HWS+ article, Paul talks about using a normalised UIBezierPath (coordinates between 0 and 1) when creating a custom Shape in SwiftUI.

I have some SVG icons that I would be keen to use as SwiftUI Shape objects, but they are not normalised and have a viewbox size.

Once I have the normalised values, I can use a tool like SwiftVG to convert to a UIBezierPath.

However, I could not find a simple way of normalising them, even in vector-editing software. In the end I used a node.js package via the command line, but I still had to extract the viewbox and path data manually.

Is there an easier way?

@howardckatz

Jun '20

It's not required that you normalize your path first before using it. You can simply scale it on the spot to fit the rect it's supposed to fit into (generally the CGRect passed into the Shape's path() function). Here's an extension on Path that'll do that for you.

extension Path {
    func scaled(toFit rect: CGRect) -> Path {
        let scaleW = rect.width/boundingRect.width
        let scaleH = rect.height/boundingRect.height
        let scaleFactor = min(scaleW, scaleH)
        return applying(CGAffineTransform(scaleX: scaleFactor, y: scaleFactor))
    }
}

and the call site:

struct MyShape(myCustomBezier: UIBezierPath) : Shape {
   var myCustomBezier : UIBezierPath
   func path(in rect: CGRect) -> Path {
       let path = Path(myCustomBezier.cgPath)
       return path.scaled(toFit: rect)
   }
}

@howardckatz

Jun '20

I just realized that you've probably misunderstood some of what Paul was saying. You don't normalize your SVG's before running them through swiftvg; it's the other way around. Drop your SVG's into swiftvg just the way they are, and take the UIBezier-instantiating code that's output and paste it into your Xcode project. It's only then that you would normalize it. Although as I'm saying above, it's strictly speaking not necessary that you do that.

Stewart Lynch has produced a YouTube video based on Paul's article that walks you through the whole process: SwiftUI - SVG to UIBezierPath with Animation.

Sponsor Hacking with Swift and reach the world's largest Swift community!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.