iOS CGPath-to-SVG Conversion Renders Circular Output Instead of Text

I'm converting text into a CGPath on iOS and then generating an SVG string, but when I reload the SVG the path renders as a circle instead of the intended text shape.

Here’s my implementation:

textToPath function:

SWIFTCopied
func textToPath(text: String, font: UIFont) -> CGPath? {
    let attributedString = NSAttributedString(string: text, attributes: [.font: font])
    let line = CTLineCreateWithAttributedString(attributedString)
    let runArray = CTLineGetGlyphRuns(line) as NSArray
    
    let path = CGMutablePath()
    
    for run in runArray {
        let run = run as! CTRun
        let count = CTRunGetGlyphCount(run)
        
        for index in 0..<count {
            let range = CFRangeMake(index, 1)
            var glyph: CGlyph = 0
            var position: CGPoint = .zero
            CTRunGetGlyphs(run, range, &glyph)
            CTRunGetPositions(run, range, &position)
            
            if let glyphPath = CTFontCreatePathForGlyph(font, glyph, nil) {
                var transform = CGAffineTransform(translationX: position.x, y: position.y)
                transform = transform.scaledBy(x: 1, y: -1) // Invert Y-axis to match SVG coordinate system
                
                // Add the glyph path to the main path
                path.addPath(glyphPath, transform: transform)
            }
        }
    }
    DispatchQueue.main.asyncAfter(deadline: .now() + 0.5, execute: {
        cgPath = path
    })
    return path
}

pathToSVG function:

SWIFTCopied
func pathToSVG(path: CGPath, color: UIColor) -> String {
    let boundingBox = path.boundingBox
    let svgWidth = boundingBox.width
    let svgHeight = boundingBox.height
    
    var svgString = "<svg width=\"\(svgWidth)\" height=\"\(svgHeight)\" xmlns=\"http://www.w3.org/2000/svg\">\n"
    svgString += "<path d=\""
    
    path.applyWithBlock { elementPointer in
        let element = elementPointer.pointee
        let points = element.points
        
        switch element.type {
        case .moveToPoint:
            svgString += "M \(points.pointee.x) \(points.pointee.y) "
        case .addLineToPoint:
            svgString += "L \(points.pointee.x) \(points.pointee.y) "
        case .addQuadCurveToPoint:
            svgString += "Q \(points.pointee.x) \(points.pointee.y) \(points.pointee.x) \(points.pointee.y) "
        case .addCurveToPoint:
            svgString += "C \(points.pointee.x) \(points.pointee.y) \(points.pointee.x) \(points.pointee.y) \(points.pointee.x) \(points.pointee.y) "
        case .closeSubpath:
            svgString += "Z "
        @unknown default:
            break
        }
    }
    
    svgString += "\" fill=\"\(color.hexString)\" />\n"
    svgString += "</svg>"
    
    return svgString
}

The issue is that the rendered SVG displays a circular path rather than the expected text shape. I suspect the problem might be due to the way control and end points are handled during the conversion, especially for quadratic and cubic curves.

I have verified that the Y-axis inversion transform is working correctly and experimented with different path commands (M and L), but the output remains incorrect.

Any suggestions on how to correctly convert the CGPath to an SVG path string would be greatly appreciated. Thanks in advance!