SVG output not 1:1

[kwolk]

I built an app that will generate shapes and record the data into XML so that it can be exported into SVG format. However, it's not quite accurate and I don't know why, but I think it has something to do with the height and width values:

var svgData = "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n"
    
    svgData += "<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n"
    svgData += "<svg width=\"\(viewWidth)\" height=\"\(viewHeight)\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\">\n"
    
    for svgPathString in svgPathStrings { svgData += "\(svgPathString)" }
    
    svgData += "</svg>"
    
    if let documentsDirectory = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask).first {
        let fileURL = documentsDirectory.appendingPathComponent("geometricShapesSVG.svg")
        do {
            try svgData.write(to: fileURL, atomically: true, encoding: .utf8)
            print("SVG file saved to: \(fileURL)")
        } catch {
            print("Error saving SVG file: \(error)")
        }
    }

My repo is open source: https://github.com/kwolk/GeometricBG/tree/master/GeometricBG

XML (SVG) export code: https://github.com/kwolk/GeometricBG/blob/master/GeometricBG/ExportToSVG.swift

Shape generator: https://github.com/kwolk/GeometricBG/blob/master/GeometricBG/ShapeGenerator.swift

[Diggory]

I think (from a cursory look) that the problem may be that your UIViews co-ordinates are from the top-left of the view, but SVG Circles are defined by the centre of the circle.

Getting started - SVG: Scalable Vector Graphics | MDN

e.g. See the difference of position of the largest circle here: (Xcode on left, SVG editor of exported SVG file on right - selected in both apps).

The circle has Width and Height of ~250 px.
In UIKit its top left is ~28 points off the left of the edge of the containing view so it's wholly visible. In the SVG file the centre of the circle is ~28px off the left of the canvas so (as it's 250px diameter) it's partially off the left of the canvas.

[Diggory]

You can fix the circles by changing line 83 of ShapeGenerator to

svgPathStrings.append("<circle cx=\"\(positionX + radius)\" cy=\"\(positionY + radius)\" r=\"\(radius)\" fill=\"\(randomColourSVG)\" />\n")

I'll leave you to work out what's wrong with the hexagons....

[kwolk]

Many thanks for the advice Diggory. It did not make a difference at first, until I began tinkering a little (with something I am not allowed to talk about here), but does work much better now, sort of.