如何在 SwiftUI 中使用 .svg 图像

Question

我只能将 .png 文件上传到资产文件夹中吗？我收到 .svg 文件的错误。我想将它用于 Image() 组件

Answer 1

您也可以在 XCAssets 中导入 svg 图像。转到 XCAssets，单击 + 按钮。 参考这张图片

单击导入并选择 svg 图像。

现在要加载并显示该图像，请使用以下代码：

图像（uiImage：UIImage（命名：“imageName”）！）

Answer 2

您可以使用 Macaw 来显示 SVG：https : //github.com/exyte/Macaw

1）通过SPM将Package添加到你的项目中（标签0.9.5实际上不起作用，需要使用master分支）

2) 将您的 .svg 文件移动到项目或在您的 Assets.xcassets 中创建一个新的数据集，然后将 svg 文件添加到该数据集。

3）使用此代码：

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) {

    }

}

Answer 3

我创建了一个简单的工具，可以将 SVG 代码转换为 SwiftUI 的 Shape 对象。目前它非常有限（特别是它只支持直线和三次曲线、单路径 SVG 和填充一种颜色的形状），但您仍然可以将它用于简单的情况。

这是工具和存储库的链接，以防您想贡献并使其支持所有 SVG 功能。

Answer 4

您可以在资产目录中使用 pdf 文件作为矢量（选择单一比例并在右侧的检查器中保留矢量数据）。您不能直接在资源目录中使用 SVG，但通过 Xcode 11，您实际上可以将 SVG 用于符号。Apple在这里提供了有关如何制作自己的 SVG 符号的详细指南。