Xcode 中使用 SVG 格式的图片

2,440 阅读3分钟

在 iOS 项目中使用 SVG 图片的好处

首先说一下为什么推荐使用 SVG 格式的图片:

1、统一

在其他的平台(Android、 Web)早就开始大量使用 SVG 了,但是在 iOS 中,要么还在使用 PNG,要么还在使用 PDF 格式的矢量图,这就导致了三端(iOS、Android、web)不统一,如果都能使用 SVG,不统一的问题将不存在。

2、减轻设计师工作量

设计师在给 iOS 切图的时候,还是只能提供 png,或者 PDF,这种使得设计师的工作量增加,如果是 png 的话可能还需要 2 倍和 3 倍图,现在我们可以使用相同格式的矢量格式,设计师只需要出一套切图即可。

3、占用空间优化

相比之下,SVG 比 PNG 要小得多,虽然 PDF 和 SVG 都是矢量图,但通常情况下 SVG 的存储空间占用要比 PDF 的还要小。

4、不会失真

因为是矢量图,所以不管放多大都不会糊,而相比之下 PNG 放大之后就很容易变模糊。

如何在项目中使用 SVG

你可以像添加 PDF 格式的矢量图一样,将文件直接拖到 Assets 目录中并将 “Scales” 选项设置为“Single Scale”。

然后像使用正常图片资源一样使用它就可以了:

let svgImage = UIImage(named: "svg1")
let imageView = UIImageView(image: svgImage)
imageView.frame = CGRect(origin: CGPoint(x: view.frame.width / 2 - 50, y: 100), size: CGSize(width: 100, height: 100))
view.addSubview(imageView)

SVG 的局限性

SVG 虽有很多优势,但也有一些局限性,比如它做不了阴影、渐变等效果,这时候通常还是需要 PNG 来代替。

另外,Xcode 12 的发行说明对 SVG 的支持的这段描述中:

Added support for Scalable Vector Graphic (SVG) image assets. These preserve their vector representation with deployment targets of macOS 10.15 or later, iOS 13 or later, and iPadOS 13 or later. (18389814)

有提到说仅支持 iOS 13+,但是我尝试把 Demo 项目跑在 iOS 12 的模拟器上,发现依然可以正常运行。

查了一些资料说其实 Xcode 对 SVG 的支持已经做好了向后兼容,在 iOS 13 以下的机器上运行时,由于系统不支持,Xcode 会在编译期自动把 SVG 转换成 PNG 来展示,因此我们在项目中可以放心使用。

参考资料

[1]

Xcode 12 的发行说明: developer.apple.com/documentati…

点击下方公众号卡片,关注我,每天分享一个关于 iOS 的新知识

本文同步自微信公众号 “iOS新知”,每天准时分享一个新知识,这里只是同步,想要及时学到就来关注我吧!