SVG添加到Xcode后显示异常且编辑内容不更新

问题概述 #

• Affinity Designer制作的SVG导入Xcode后，显示效果和设计工具、预览工具不一致
• 存在不稳定的缓存问题：修改SVG后Xcode有时加载历史版本，无法同步最新更改（比如线条移动、翻转操作未生效）
• 已尝试将文本转路径的方案，但无效

解决方案 #

一、彻底清理Xcode缓存 #

Xcode的资源缓存是这类问题的高发原因，按以下步骤操作：

1. 关闭Xcode
2. 打开终端，执行命令清理DerivedData：

   rm -rf ~/Library/Developer/Xcode/DerivedData
   

3. 重新打开Xcode，按Command + Shift + K清理当前项目的Build缓存
4. 必要时重启电脑，确保缓存完全清除

二、优化Affinity Designer的SVG导出设置 #

Affinity默认导出设置可能包含Xcode不兼容的属性，调整这些选项：

• 导出时选择SVG (for web) 预设，而非默认SVG选项
• 取消勾选Include metadata和Include document-specific data
• 勾选Flatten all layers，避免复杂层级导致解析异常
• 确认Curves设置为Convert to curves（即使不是文本，复杂形状转曲线也能提升兼容性）
• 导出后用文本编辑器打开SVG，删除开头的生成器注释（比如<!-- Generator: Affinity Designer... -->）以及自定义属性（如data-name）

三、强制替换SVG资源 #

如果清理缓存后仍未生效，试试强制替换：

1. 在Xcode的Assets.xcassets中删除该SVG资源
2. 清空废纸篓，确保旧资源完全移除
3. 将修改后的SVG重新拖入Assets.xcassets
4. 重新编译项目（Command + B）并运行

四、验证SVG兼容性 #

用Chrome等浏览器打开导出的SVG，确认显示效果和Affinity中一致：

• 若浏览器显示正常但Xcode异常，说明是Xcode解析问题，需要进一步简化SVG结构
• 若浏览器显示也异常，说明导出过程有问题，回到Affinity重新调整设计和导出设置

内容的提问来源于stack exchange，提问作者Samuel