The SVG Shaper for SwiftUI is a small macOS application to convert SVG vector images into SwiftUI Shapes, Pathes and Views. Interested in letting us write an app for you? Contact us!

The SVG Shaper for SwiftUI is a small macOS application to convert SVG vector images into SwiftUI Shapes, Pathes and Views. Interested in letting us write an app for you? Contact us!

SVG Shaper for SwiftUI is a little macOS application that accepts images in the Scalable Vector Graphics (SVG) format (SVG) and converts those into SwiftUI source code. Got an SVG icon from your designer? Use the contained shapes directly within your SwiftUI views.

Note: This doesn't always produce perfect results. It has been tested primarily against IconMonstr SVG icons and works very well with those.

SVG Shaper’s primary purpose is to convert the paths contained in an SVG into SwiftUI “Path” values and “Shape” structures. The generated code can directly be used in a SwiftUI Xcode project.

The app also tries to convert the overall structure of the SVG into SwiftUI “Views”. Given that the SwiftUI graphics model is different to SVG’s, the quality of the generated code depends a lot on the actual SVG and features used.

The application requires macOS Big Sur. It is itself written entirely in the new SwiftUI.

Features

  • generates SwiftUI Shape’s, Path’s and View’s
  • linear gradients export as SwiftUI LinearGradient’s
  • many SVG filters and source operations, including merge filters
  • generates resizable views for SVGs with bounds
  • styling of text, including gradient filled Text’s
  • various style options for source code generation
  • includes an Xcode extension to convert in-place
  • available as a macOS service for use in any other app

SVG Shaper does not support the full SVG specification, here is a set of things which are unsupported:

  • embedded bitmap images
  • percentage units (e.g. width=50 per cent)
  • gradient units
  • masks
  • path length

Support

Looking for help with SVG Shaper for SwiftUI? Check out the: Support page.

Credit where credit is due!

The app uses the nice Highlight.js to perform the syntax highlighting in the editors.

It doesn't directly use IJSVG, but a lot of insight was taken from it. An excellent piece of software, if you are looking to display SVG files on macOS.

The same goes for Highlightr, a Swift package which makes it easy to embed Highlight.js. Good stuff!