Swift中CAShapeLayer转换为SVG图片并导出的实现方法问询

有可直接落地的实现方案，核心思路是提取CAShapeLayer的绘图属性映射为SVG的对应标签属性，无需引入第三方依赖。

核心实现逻辑 #

CAShapeLayer的所有绘图规则都可以对应到SVG的<path>标签属性，只需要把CGPath转换成SVG路径指令，再把填充、描边、线宽等属性对应拼接即可生成完整的SVG文件。

具体实现步骤 #

• 提取CAShapeLayer的核心属性：path、填充色、描边色、线宽、bounds尺寸等
• 遍历CGPath的所有路径元素，转换为SVG路径的d属性字符串
• 拼接SVG文件头、根节点、路径节点，生成完整的SVG字符串
• 将字符串转成Data写入本地路径，或直接返回Data供后续使用

关键代码示例 #

首先扩展CGPath实现SVG路径字符串转换：

extension CGPath {
    func svgPathString() -> String {
        var pathString = ""
        applyWithBlock { element in
            let points = element.pointee.points
            switch element.pointee.type {
            case .moveToPoint:
                pathString += "M\(points[0].x) \(points[0].y) "
            case .addLineToPoint:
                pathString += "L\(points[0].x) \(points[0].y) "
            case .addQuadCurveToPoint:
                pathString += "Q\(points[0].x) \(points[0].y), \(points[1].x) \(points[1].y) "
            case .addCurveToPoint:
                pathString += "C\(points[0].x) \(points[0].y), \(points[1].x) \(points[1].y), \(points[2].x) \(points[2].y) "
            case .closeSubpath:
                pathString += "Z "
            @unknown default:
                break
            }
        }
        return pathString.trimmingCharacters(in: .whitespaces)
    }
}

然后实现CAShapeLayer转SVG导出的方法：

func exportShapeLayerToSVG(layer: CAShapeLayer, exportPath: URL) throws {
    guard let path = layer.path else { return }
    let svgWidth = layer.bounds.width
    let svgHeight = layer.bounds.height
    
    // CGColor转十六进制色值辅助方法
    func cgColorToHex(_ color: CGColor?) -> String {
        guard let color = color,
              let components = color.components,
              components.count >= 3 else { return "none" }
        let r = Int(components[0] * 255)
        let g = Int(components[1] * 255)
        let b = Int(components[2] * 255)
        return String(format: "#%02X%02X%02X", r, g, b)
    }
    
    let fillHex = cgColorToHex(layer.fillColor)
    let strokeHex = cgColorToHex(layer.strokeColor)
    let lineWidth = layer.lineWidth
    let pathD = path.svgPathString()
    
    // 拼接完整SVG内容
    let svgContent = """
    <?xml version="1.0" encoding="UTF-8"?>
    <svg width="\(svgWidth)" height="\(svgHeight)" viewBox="0 0 \(svgWidth) \(svgHeight)" xmlns="http://www.w3.org/2000/svg">
        <path d="\(pathD)" fill="\(fillHex)" stroke="\(strokeHex)" stroke-width="\(lineWidth)" />
    </svg>
    """
    
    // 写入到指定路径
    try svgContent.write(to: exportPath, atomically: true, encoding: .utf8)
}

注意事项 #

• 上述代码仅覆盖了常用的基础属性，如果需要支持线帽、线连接样式、虚线、圆角等效果，只需给<path>标签追加stroke-linecap、stroke-linejoin、stroke-dasharray等对应SVG属性即可
• 如果需要支持透明度，可额外提取颜色的alpha分量，追加fill-opacity和stroke-opacity属性
• 转换前需确保CAShapeLayer的bounds已经正确赋值，否则导出的SVG尺寸会出现偏差
• 如需导出多个CAShapeLayer到同一个SVG文件，只需拼接多个<path>节点到<svg>根节点内即可

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