How to access attributes of a SVG resource using PocketSVG?

Question

I have been trying to use PocketSVG to parse SVG resources. Using PocketSVG, I can easily parse all the paths of the SVG and the path attributes too. Following https://stackoverflow.com/a/40683062/3939807 answer, here is the sample code I have tried.

guard let url = Bundle.main.url(forResource: shape, withExtension: "svg") else { return nil }
let paths = SVGBezierPath.pathsFromSVG(at: URL)

for path in paths {
   let shapeLayer = CAShapeLayer()
   layer.path = path.CGPath

   var strokeWidth = CGFloat(4.0)
   var strokeColor = UIColor.black.cgColor
   var fillColor = UIColor.white.cgColor

   // Inspect the SVG Path Attributes
   print("path.svgAttributes = \(path.svgAttributes)")

   if let strokeValue = path.svgAttributes["stroke"] {
      strokeColor = strokeValue as! CGColor
   }

   if let fillColorVal = path.svgAttributes["fill"] {
      fillColor = fillColorVal as! CGColor
   }

   // Set its display properties
   shapeLayer.lineWidth = strokeWidth
   shapeLayer.strokeColor = strokeColor
   shapeLayer.fillColor = fillColor

   // Add it to the layer hierarchy
   self.view.layer.addSublayer(shapeLayer)
}

But I need to access some of the group attributes to get the actual result of the SVG. A sample SVG resource source code:

<svg xmlns="http://www.w3.org/2000/svg" width="590.092" height="570.076" viewBox="0 0 590.092 570.076">
<g id="Group_84" data-name="Group 84" transform="translate(-5576.16 -1736.816)">
<path id="Path_120" data-name="Path 120" d="M235.181,359.121l145.342,87.723-38.57-165.332L470.362,170.271l-169.1-14.346L235.181,0,169.1,155.925,0,170.271,128.409,281.512,89.839,446.844Z" transform="translate(5607.22 1833.337) rotate(-8)" fill="none" stroke="#f1c502" stroke-linecap="round" stroke-linejoin="round" stroke-width="55"/>
<path id="Path_121" data-name="Path 121" d="M5790.9,1956.979l45.432-158.481,92.976,145.8" fill="none"/>
<path id="Path_122" data-name="Path 122" d="M5931.647,1944.786l163.137-7.768-108.757,130.214" fill="none"/>
<path id="Path_123" data-name="Path 123" d="M5985.659,2070.376l64,157.588-156.848-68.436" fill="none"/>
<path id="Path_124" data-name="Path 124" d="M5886.89,2160.083l-130.584,109.5,18.126-169.241" fill="none"/>
<path id="Path_125" data-name="Path 125" d="M5772.028,2095.9s-148.709-93.591-146.49-93.221,166.1-44.761,166.1-44.761" fill="none"/> </g> </svg>

There is an attribute named transform="translate(-5576.16 -1736.816)" under <g> tag. My question is how can I get this attribute and apply it using PocketSVG. Any kind of help will be appreciated.

Thanks in advance.

Answer 1

The solution is very straight forward. Each path contains UIBezierPath and it's all atributes in svgAttributes which is of type Dictionary [String: Any]

if let url = Bundle.main.url(forResource: "shape", withExtension: "svg") {
    let paths = SVGBezierPath.pathsFromSVG(at: url)
        
        for path in paths {
            let svgAttributes = path.svgAttributes
            let transform = svgAttributes["transform"]
        }
    }