Let Swift Swirl ft. SVG to UIBezierPath
Recently I was practicing UIBezierPath that annoyed me much. It was painful to create many paths line by line by annotating the pictures. To mange the size and scaling of the picture was also a headache. I happend to visit Stewart Lynch ‘s channel and find one cool project there. There was a shortcut where we could convert SVG to UIBezierPath. Thanks to this magic, I am free from the dirty job. Following the tutorial, I successfully drew a Swift logo.
Step1: download two extention files and Swift logo SVG from here. Lynch wrapped up the files from HackingWithSwiftPlus.The “UIBezierPath+Extention” created calculateBounds function and the “UIColor+extention”created fromHexString function.
Step2: Create a SwiftUI project and migrate the two extention files as resources. Then create “ShapeView” tab. I don’t really understand the codes here.
Step3: Open the SVG file of Swift logo with ‘Sublime Text’ and copy the scripts with<path> tags. There are possibly more than one path scripts.You can also find Hex color codes here.
Step4: Convert SVG path script (from Step4)into UIBezierPath scripts at https://swiftvg.mike-engel.com. Past the path scripts in the upper cell. Immediately, the UIBezierPath codes will show up in the bottom cell.
Yes. Here was the magic ! Very impressive. We no longer spent a couple of hours coding the lines.
Step5: Transcrib the output (from Step5) in ‘UIBezierPath+Extention’ tab.
Step6: In “ContentView”tab, place colors (found in Step3), ShapeView, UIBezierPath(Step5), etc. Adjust the positions and add Animation effects too. Those were created by Stewart Lynch. See the example codes at my github.
Done. I made the Swift swirl. The animation was cool !
Inevitably the conversion had some downsides too. I was downloading several SVG files from the web. Sometimes, the site could not transcribe the SVG perfectly. Many lines in the picture appeared missing. We could not deal with more complicated pictures.
Hope you enjoy reading this article. Besides Lynch’s video, you’re welcome to visit my github site to check out the source codes.
