As you know, you can import SVG into Xcode assets just like other images. And now I want to show how easy it is to convert SVG to SwiftUI code. You will see how easy it’s to do in a couple of minutes. Let's do it!
Step One
You need to take some SVG file. I’ll take my image from Figma. Open my Figma file, select the vector image, click Copy/Paste as and select Copy as SVG.
Step Two
Now you need to open some online converter, I prefer service: svg-to-swiftui.quassum.com, but you can find another service in a Google search. In the left field, I need to insert our SVG image. And click the Convert button.
And now you can see that the converter generates our SwiftUI code. Click the Copy result button.
Step Three
And now you should open the Xcode project and paste the copied code. Add MyCustomShape( ) to the body and make a couple of modifications.
import SwiftUI
struct ContentView: View {
var body: some View {
MyCustomShape()
.frame(width: 300, height: 355)
.scaledToFit()
.foregroundStyle(.linearGradient(colors: [.green, .green, .yellow, .red, .blue], startPoint: .top, endPoint: .bottom))
}
}
struct MyCustomShape: Shape {
func path(in rect: CGRect) -> Path {
var path = Path()
let width = rect.size.width
let height = rect.size.height
path.move(to: CGPoint(x: 0.70146*width, y: 0.00605*height))
path.addCurve(to: CGPoint(x: 0.51473*width, y: 0.14457*height), control1: CGPoint(x: 0.6176*width, y: 0.02524*height), control2: CGPoint(x: 0.54933*width, y: 0.07571*height))
path.addCurve(to: CGPoint(x: 0.49758*width, y: 0.23419*height), control1: CGPoint(x: 0.50101*width, y: 0.1719*height), control2: CGPoint(x: 0.49229*width, y: 0.21737*height))
path.addCurve(to: CGPoint(x: 0.51473*width, y: 0.24024*height), control1: CGPoint(x: 0.49946*width, y: 0.23945*height), control2: CGPoint(x: 0.50163*width, y: 0.24024*height))
path.addCurve(to: CGPoint(x: 0.66405*width, y: 0.18005*height), control1: CGPoint(x: 0.56679*width, y: 0.24024*height), control2: CGPoint(x: 0.61729*width, y: 0.22*height))
path.addCurve(to: CGPoint(x: 0.73731*width, y: 0.08648*height), control1: CGPoint(x: 0.70395*width, y: 0.14641*height), control2: CGPoint(x: 0.72328*width, y: 0.12144*height))
path.addCurve(to: CGPoint(x: 0.74915*width, y: 0.00448*height), control1: CGPoint(x: 0.74697*width, y: 0.06204*height), control2: CGPoint(x: 0.75383*width, y: 0.01473*height))
path.addCurve(to: CGPoint(x: 0.70146*width, y: 0.00605*height), control1: CGPoint(x: 0.74697*width, y: -0.00025*height), control2: CGPoint(x: 0.72577*width, y: 0.00053*height))
path.closeSubpath()
path.move(to: CGPoint(x: 0.69366*width, y: 0.23656*height))
path.addCurve(to: CGPoint(x: 0.58892*width, y: 0.261*height), control1: CGPoint(x: 0.66935*width, y: 0.23945*height), control2: CGPoint(x: 0.62664*width, y: 0.24944*height))
path.addCurve(to: CGPoint(x: 0.52657*width, y: 0.27809*height), control1: CGPoint(x: 0.56585*width, y: 0.26784*height), control2: CGPoint(x: 0.5378*width, y: 0.27572*height))
path.addCurve(to: CGPoint(x: 0.48168*width, y: 0.2773*height), control1: CGPoint(x: 0.50662*width, y: 0.28282*height), control2: CGPoint(x: 0.50569*width, y: 0.28282*height))
path.addCurve(to: CGPoint(x: 0.429*width, y: 0.26284*height), control1: CGPoint(x: 0.46828*width, y: 0.27414*height), control2: CGPoint(x: 0.44459*width, y: 0.26757*height))
path.addCurve(to: CGPoint(x: 0.23947*width, y: 0.24523*height), control1: CGPoint(x: 0.34452*width, y: 0.2363*height), control2: CGPoint(x: 0.29932*width, y: 0.23209*height))
path.addCurve(to: CGPoint(x: 0.10106*width, y: 0.31225*height), control1: CGPoint(x: 0.18492*width, y: 0.25706*height), control2: CGPoint(x: 0.14283*width, y: 0.27756*height))
path.addCurve(to: CGPoint(x: 0.02219*width, y: 0.42081*height), control1: CGPoint(x: 0.06427*width, y: 0.34301*height), control2: CGPoint(x: 0.04027*width, y: 0.37586*height))
path.addCurve(to: CGPoint(x: 0.07363*width, y: 0.79088*height), control1: CGPoint(x: -0.01896*width, y: 0.52305*height), control2: CGPoint(x: 0.00037*width, y: 0.66077*height))
path.addCurve(to: CGPoint(x: 0.24414*width, y: 0.97696*height), control1: CGPoint(x: 0.11509*width, y: 0.86473*height), control2: CGPoint(x: 0.19115*width, y: 0.94753*height))
path.addCurve(to: CGPoint(x: 0.3944*width, y: 0.98406*height), control1: CGPoint(x: 0.28841*width, y: 1.00167*height), control2: CGPoint(x: 0.32956*width, y: 1.00351*height))
path.addCurve(to: CGPoint(x: 0.61417*width, y: 0.97407*height), control1: CGPoint(x: 0.50008*width, y: 0.95252*height), control2: CGPoint(x: 0.53686*width, y: 0.95094*height))
path.addCurve(to: CGPoint(x: 0.79092*width, y: 0.98222*height), control1: CGPoint(x: 0.70676*width, y: 1.00193*height), control2: CGPoint(x: 0.74105*width, y: 1.00351*height))
path.addCurve(to: CGPoint(x: 0.98514*width, y: 0.76065*height), control1: CGPoint(x: 0.85202*width, y: 0.95594*height), control2: CGPoint(x: 0.94056*width, y: 0.85527*height))
path.addCurve(to: CGPoint(x: 0.9976*width, y: 0.73174*height), control1: CGPoint(x: 0.99199*width, y: 0.7462*height), control2: CGPoint(x: 0.9976*width, y: 0.73305*height))
path.addCurve(to: CGPoint(x: 0.9814*width, y: 0.72228*height), control1: CGPoint(x: 0.9976*width, y: 0.73043*height), control2: CGPoint(x: 0.99012*width, y: 0.72596*height))
path.addCurve(to: CGPoint(x: 0.84485*width, y: 0.58718*height), control1: CGPoint(x: 0.91499*width, y: 0.69389*height), control2: CGPoint(x: 0.86387*width, y: 0.64343*height))
path.addCurve(to: CGPoint(x: 0.84018*width, y: 0.48047*height), control1: CGPoint(x: 0.83519*width, y: 0.55827*height), control2: CGPoint(x: 0.83301*width, y: 0.5078*height))
path.addCurve(to: CGPoint(x: 0.95334*width, y: 0.34537*height), control1: CGPoint(x: 0.85514*width, y: 0.42291*height), control2: CGPoint(x: 0.88663*width, y: 0.38559*height))
path.addCurve(to: CGPoint(x: 0.963*width, y: 0.33144*height), control1: CGPoint(x: 0.96518*width, y: 0.33801*height), control2: CGPoint(x: 0.96612*width, y: 0.3367*height))
path.addCurve(to: CGPoint(x: 0.93245*width, y: 0.30332*height), control1: CGPoint(x: 0.96113*width, y: 0.32829*height), control2: CGPoint(x: 0.9471*width, y: 0.31567*height))
path.addCurve(to: CGPoint(x: 0.79653*width, y: 0.2426*height), control1: CGPoint(x: 0.89442*width, y: 0.27178*height), control2: CGPoint(x: 0.85576*width, y: 0.25469*height))
path.addCurve(to: CGPoint(x: 0.69366*width, y: 0.23656*height), control1: CGPoint(x: 0.77222*width, y: 0.23787*height), control2: CGPoint(x: 0.71268*width, y: 0.23419*height))
path.closeSubpath()
return path
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}Done! Thanks for reading.
