Xcode 导入与使用 SVG 文件矢量图适配全流程

在 iOS 开发中，SVG（可缩放矢量图形） 凭借「无限缩放不失真」的优势，成为图标、插画等场景的首选。Xcode 对 SVG 的支持可实现「一份文件适配所有设备」，但需正确配置才能发挥矢量特性。本文将从 导入流程 、属性配置 到 实际使用 完整拆解，覆盖 UIKit 和 SwiftUI 场景。

一、核心价值：为什么用 SVG？

矢量无损：无论设备屏幕多大（手机、平板、折叠屏），SVG 缩放后仍清晰锐利。
体积小巧：相比多套 PNG 倍图（@1x/@2x/@3x），SVG 单个文件即可适配所有分辨率。
灵活着色：通过「模板模式（Template Image）」，可动态修改图标颜色（如主题切换）。

二、准备工作

Xcode 版本 ：建议使用 Xcode 12 及以上（对 SVG 矢量特性支持更完善）。
SVG 文件：确保文件符合规范（可通过 Sketch、Figma 导出，或使用在线工具优化）。

三、步骤 1：导入 SVG 到 Asset Catalog

Asset Catalog（.xcassets）是 Xcode 管理资源的核心工具，需通过它配置 SVG 的渲染规则。

操作流程：

打开 Xcode 项目，导航至 Assets.xcassets（若无则新建）。
将 SVG 文件直接拖入 Asset Catalog 的空白区域。
选中刚导入的 SVG，右侧属性面板需重点配置 3 个关键选项（对应截图标注）：

关键属性解析（逐行对应截图）：

四、步骤 2：在 UIKit 中使用 SVG

UIKit 通过 UIImage 加载 SVG，结合 UIImageView 显示。

代码示例（单色图标场景，Render As = Template Image）：

less 复制代码

// 1. 加载 SVG（自动识别 Assets 中的文件）
let svgImage = UIImage(named: "ic_qr_code") 

// 2. 赋值给 UIImageView
let imageView = UIImageView(image: svgImage)
imageView.frame = CGRect(x: 50, y: 100, width: 100, height: 100)

// 3. 动态修改颜色（仅 Template Image 生效）
imageView.tintColor = UIColor.systemBlue 

view.addSubview(imageView)

关键注意事项

1. 必勾 Preserve Vector Data

若未勾选，Xcode 会在编译时将 SVG 转为 固定尺寸的位图（如 1024×1024），运行时缩放会模糊。勾选后，SVG 以矢量形式存在，支持任意尺寸渲染。

2. Render As 的选择逻辑

单色图标（如 TabBar、按钮） ：选 Template Image，通过 tintColor/foregroundColor 动态改色（适配暗黑模式、主题切换）。
多色插画（如启动页、复杂图形） ：选 Original Image，保留设计稿原色，无法动态着色。