Xcode与Swift支持的SVG格式要求及Iconoir图标适配问题

一、Xcode对SVG的核心限制 #

Xcode支持的SVG并非完整W3C标准，有几个硬性要求：

• 必须是扁平化的单个路径/形状，不支持嵌套组（<g>）、蒙版、滤镜、复杂渐变
• 必须明确指定width和height属性，不能仅依赖viewBox
• 不能包含外部引用（如<use>标签）或CSS变量、类名样式
• 颜色必须是直接的HEX/RGB值，不能用样式类

Iconoir的SVG普遍使用组结构、CSS变量定义颜色，这就是Xcode无法解析的根本原因。

二、两种适配方案 #

方案1：批量修改SVG内容（无额外工具） #

在下载SVG后，用sed批量清理不兼容元素，适合简单图标：

# 在curl下载完成后添加以下命令
# 1. 替换组标签为路径标签（扁平化结构）
sed -i '' 's/<g/\<path/g' "${local_icon_path}/${icon_file}"
sed -i '' 's/<\/g/\<\/path/g' "${local_icon_path}/${icon_file}"
# 2. 删除所有style属性
sed -i '' '/style/d' "${local_icon_path}/${icon_file}"
# 3. 强制添加固定宽高（Iconoir图标默认24x24）
sed -i '' 's/<svg /<svg width="24" height="24" /' "${local_icon_path}/${icon_file}"

注意：复杂图标可能因为路径合并失效，此方法仅作应急。

方案2：用Inkscape转PDF（稳定可靠） #

放弃cairosvg，用专业SVG工具Inkscape转PDF，能完美兼容Iconoir的SVG：

1. 先安装Inkscape：brew install inkscape
2. 替换脚本中的转换命令：

# 替换原cairosvg命令
inkscape "${local_icon_path}/${icon_file}" --export-type=pdf --export-filename="${local_icon_path}/${icon_name}.pdf"

转出来的PDF是矢量格式，Xcode能直接识别并自动适配各分辨率。

三、优化Contents.json配置 #

当前JSON配置冗余，可改为矢量图专用配置，减少错误：

{
  "images" : [
    {
      "filename" : "${icon_name}.pdf",
      "idiom" : "universal",
      "scale" : "1x",
      "vector" : true
    }
  ],
  "info" : {
    "author" : "xcode",
    "version" : 1
  }
}

添加"vector": true后，Xcode会将PDF当作矢量资源处理，无需手动添加2x/3x条目。

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