how to use .svg images in SwiftUI

问题

Can I only upload .png files into the assets folder? I get an error for .svg files. I want to use it for the Image() component

回答1:

You can use Macaw to display a SVG: https://github.com/exyte/Macaw

1) Add the Package via SPM to your project (the tag 0.9.5 actually doesn't work, you need to use the master branch)

2) Move your .svg-file to the project or create a new Data set in your Assets.xcassets and then add the svg file to this data set.

3) Use this code:

struct MyView: View {

    var svgName: String

    var body: some View {
        SVGImage(svgName: self.svgName)
            .frame(width: 50, height: 550)
    }
}

struct SVGImage: UIViewRepresentable {

    var svgName: String

    func makeUIView(context: Context) -> SVGView {
        let svgView = SVGView()
        svgView.backgroundColor = UIColor(white: 1.0, alpha: 0.0)   // otherwise the background is black
        svgView.fileName = self.svgName
        svgView.contentMode = .scaleToFill
        return svgView
    }

    func updateUIView(_ uiView: SVGView, context: Context) {

    }

}

回答2:

You can use pdf's for vectors in the asset catalog (select single scale and preserve vector data in the inspector on the right). You cannot directly use SVG's in the asset catalog, but with Xcode 11 you actually can use SVG's for symbols. Apple has a detailed guide on how to make your own SVG symbols here.

回答3:

I've created a simple tool, which converts SVG code into SwiftUI's Shape object. It is very limited for now (in particular it only supports straight lines and cubic curves, single path SVGs and shapes that are filled with one color), but you can still use it for simple situations.

Here's the link to the tool, and the repository, in case you'd want to contribute and make it support all SVG features.

来源：https://stackoverflow.com/questions/58193380/how-to-use-svg-images-in-swiftui

标签

swift

xcode

swiftui