如何在Xcode资源中使用.svg图像？

Question

我只能上传.png文件到资源文件夹吗？对于.svg文件，我遇到了错误。 我想在Image()组件中使用它。

- seref

---

我建议您也看一下PaintCode。它可以导入SVG文件并将其导出为代码，这些代码可用于生成可缩放的图像或根据您的需求进行绘画代码。 - MadProgrammer

我猜这是一个过时的问题，对吧？我能够在使用XCode 15时毫无问题地导入SVG资源。 - undefined

Answer 1

在XCAssets中也可以导入svg图像。

进入XCAssets，点击+按钮。参考此图像

点击导入并选择svg图像。

现在使用以下代码加载和显示该图像：

Image(uiImage: UIImage(named: "imageName")!)

- Rushabh Singh

---

Xcode会将SVG转换为PNG / JPEG吗？ - user8354447

Answer 2

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

1）通过SPM将软件包添加到您的项目中（标签0.9.5实际上不起作用，您需要使用主分支）

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

    }

}

- Lupurus

---

一份资产中的数据集对我没有起作用-把文件复制到“资源/”目录下。一个小问题-如果文件名为“icon.svg”，那么您需要写成SVGImage(svgName: "icon")。 - MisterEd

在进行此操作（Xcode 12.5，iOS 部署目标 14.5）时，MyView 忽略了 .frame(width: 50, height: 550) 修饰符。换句话说，地图显示比框架更大，而且修饰符不能将显示限制在此框中。 - cgold

@cgold 它仍然忽略了给定的帧。你找到解决方案了吗？ - Gunhan

@Lupurus 我该如何改变 .svg 图像的颜色？ - Muju

Answer 3

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

这是链接到该工具的页面，以及存储库，如果您想要贡献并使其支持所有SVG功能。

- Antoni Silvestrovič

---

@Will 如果您在存储库中创建一个带有提供的SVG代码的问题，我就能够解决它了。这只是一个支持您正在使用但我尚未实现的SVG功能的问题，但如果我有SVG代码示例，这很容易修复。 - Antoni Silvestrovič

它可以工作，但是它在框架中留下了一个空间。 它没有贴合框架。 - Just a coder

我猜那是你使用的SVG造成的，如果可以，请在GitHub上创建一个问题，并附上你使用的SVG！然后我就能修复它 :) - Antoni Silvestrovič

那个在线工具非常有用。谢谢！ - Anthony.

@AntoniSilvestrovič 我该如何分离路径并在每个路径上添加onTabGesture？ - Muju

Answer 4

您可以在资源目录中使用 PDF 文件作为矢量图（在右侧检查器中选择单个比例并保留矢量数据）。 无法直接在资源目录中使用 SVG 文件，但是在 Xcode 11 中，您实际上可以将 SVG 文件用于符号。 Apple 具有关于如何创建自己的 SVG 符号的详细指南，请点击这里。

- Josh Homann

---

我收到一个错误。显然它没有满足要求，因为页面告诉我你链接的那个。 我下载了这个SVG包.. 我对Adobe Illustrator或其他东西一无所知.. - seref

Answer 5

你可以在较新版本的SwiftUI和XCode中像使用普通位图图像一样使用svg图像。

1. 将相关的svg文件拖放到XCAssets中。

考虑勾选“保留矢量数据”选项。 将svg图像名称作为Image视图的name参数传递，它应该渲染。

- Jesse Dirisu