Wednesday, December 7, 2022
HomeiOS DevelopmentObtain SVG Picture in iOS Swift

Obtain SVG Picture in iOS Swift


I am engaged on a undertaking which I am getting information from API and in that API I am getting url for picture. however these pictures will not be in PNG,JPEG or JPG codecs. They’re SVG(Scalable Vector Graphic) pictures. In order I do know there isn’t a direct technique, perform or possibly iOS undertaking Framework library exist which is used to render SVG pictures. So now we have bunch of Pods which is definitely use for rendering these picture like(SDWebImage,SDWebImageSVGCoder,SDWebImageSVGKitPlugin,SVGKit). I used all of them however all these Pods did not remedy my drawback. So let focus on what drawback that I am going through proper now.

Here is my ViewController class code

import SDWebImageSVGCoder

class ViewController: UIViewController {
    
    var banks: [Bank] = [Bank(logo:"https://identity.moneyhub.co.uk/bank-icons/default",name:"Dummy"),
        Bank(logo: "https://identity.moneyhub.co.uk/bank-icons/accord", name: "Accord Mortgages"),
                           Bank(logo: "https://identity.moneyhub.co.uk/bank-icons/ajBell", name: "AJ Bell"),
                           Bank(logo: "https://identity.moneyhub.co.uk/bank-icons/aldermore", name: "Aldermore"),
                           Bank(logo: "https://identity.moneyhub.co.uk/bank-icons/amex", name: "American Express"),
                           Bank(logo: "https://identity.moneyhub.co.uk/bank-icons/brewinDolphin", name: "Brewin Dolphin"),
                           Bank(logo: "https://identity.moneyhub.co.uk/bank-icons/caxton", name: "Caxton"),]
    
    
    @IBOutlet weak var tableView: UITableView!
    
    override func viewDidLoad() {
        tremendous.viewDidLoad()
        setupTableView()
    }
    
    func setupTableView() {
        self.tableView.delegate = self
        self.tableView.dataSource = self
    }

}

//MARK: - TABLEVIEW DELEGATE DATASOURCE
extension ViewController: UITableViewDelegate, UITableViewDataSource {
    
    func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection part: Int) -> Int {
        return banks.rely
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: BankTableViewCell.identifier, for: indexPath) as! BankTableViewCell
        cell.configure(self.banks[indexPath.row])
        return cell
    }
    
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 62
    }
    
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        
    }
    
}

My TableViewCell class

class BankTableViewCell: UITableViewCell {
    
    @IBOutlet weak var bankNameLabel: UILabel!
    @IBOutlet weak var bankLogoImageView: UIImageView!
    
    class var identifier: String {
        return "BankTableViewCell"
    }
    
    func configure(_ financial institution: Financial institution) {
        self.bankNameLabel.textual content = financial institution.title
        guard let url = URL(string: financial institution.emblem) else {return}
        self.bankLogoImageView.sd_setImage(fromURL: url)
    }
    
}

However after I run this code solely 3 pictures rendered first one is dummy or default case, however remainder of three will not be rendered. Then I attempt to find the difficulty after which I discovered that not all pictures are true SVG pictures truly a few of them are Raster picture. here is I am sharing information of each picture kind of pictures.

These Photographs who’s rendered efficiently has information like this

<svg viewBox="-25 -25 200 200" xmlns="http://www.w3.org/2000/svg">
    <path d="M138.299 130.707H10.644a6.386 6.386 0 00-6.384 6.391 6.384 6.384 0 006.384 6.384h127.652a6.384 6.384 0 006.384-6.384c-.002-3.532-2.86-6.391-6.381-6.391zM18.621 114.101c-3.526 0-6.384 2.859-6.384 6.388s2.858 6.391 6.384 6.391h111.697c3.526 0 6.384-2.861 6.384-6.391s-2.858-6.388-6.384-6.388h-1.593V56.625h1.593a3.19 3.19 0 000-6.38H18.621a3.19 3.19 0 000 6.38h1.597v57.472h-1.597v.004zm97.336-57.476v57.472H96.81V56.625h19.147zm-31.917 0v57.472H64.893V56.625H84.04zm-51.06 0h19.147v57.472H32.98V56.625zM10.644 44.503H138.34a6.387 6.387 0 006.402-6.388 6.392 6.392 0 00-4.312-6.044L77.094 3.558a6.4 6.4 0 00-5.237 0L8.026 32.293a6.385 6.385 0 00-3.622 7.165 6.38 6.38 0 006.24 5.045z"/>
</svg>

However these picture who’s not rendered however show white or null pictures has any such information

<svg width="500" peak="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="20" y="135" width="460" peak="230" fill="url(#pattern0)"/>
<defs>
<sample id="pattern0" patternContentUnits="objectBoundingBox" width="1" peak="1">
<use xlink:href="#image0" remodel="scale(0.005 0.01)"/>
</sample>
<picture id="image0" width="200" peak="100" xlink:href="information:picture/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAACBRJREF......UwT2kAAAAASUVORK5CYII="/>
</defs>
</svg>

So my Display screen seem like this after operating the undertaking.

List of banks

I discovered answer for this myself to only put situation and first examine each picture response. If picture is pure written in SVG then I am calling Pod perform in any other case I am utilizing my very own customized code to extract base64Encoded string after which render picture. Nevertheless it creating some efficiency difficulty. As you realize library additionally working in Async calling and I am additionally utilizing that to pictures are someday load and someday not present right picture.

my customized code is right here

class BankTableViewCell: UITableViewCell {
    
    @IBOutlet weak var bankNameLabel: UILabel!
    @IBOutlet weak var bankLogoImageView: SVGImageView!
    
    class var identifier: String {
        return "BankTableViewCell"
    }
    
    func configure(_ financial institution: Financial institution) {
        self.bankNameLabel.textual content = financial institution.title
        guard let url = URL(string: financial institution.emblem) else {return}
        self.bankLogoImageView.loadImage(fromURL: url, placeHolderImage: "")
    }
    
}

class SVGImageView: UIImageView {
    
    personal let imageCache = NSCache<AnyObject, UIImage>()
    
    func loadImage(fromURL imageURL: URL, placeHolderImage: String)
    {
        self.picture = UIImage(named: placeHolderImage)

        if let cachedImage = self.imageCache.object(forKey: imageURL as AnyObject)
        {
            debugPrint("picture loaded from cache for =(imageURL)")
            self.picture = cachedImage
            return
        }

        DispatchQueue.international().async {
            [weak self] in
            
            if let imageData = attempt? Knowledge(contentsOf: imageURL) {
                guard let xmlStr = String(information: imageData, encoding: .utf8) else {
                    DispatchQueue.essential.async {
                        self?.sd_setImage(with: URL(string: "https://identification.moneyhub.co.uk/bank-icons/default")!)
                    }
                    return
                }
                print(xmlStr)
                if let vary = xmlStr.vary(of: "information:picture/png;base64,") {
                    let base64StringWithoutfilter = xmlStr.suffix(from: vary.upperBound)
                    let base64StringWithoutfilterRange = base64StringWithoutfilter.vary(of: "/>")
                    
                    let lowerRange = vary.upperBound
                    if let upperRange = base64StringWithoutfilterRange?.upperBound {
                        let base64ImageString = xmlStr[lowerRange..<upperRange].dropLast(3)
                        if let imageData = NSData(base64Encoded: String(describing:base64ImageString)) {
                            if let picture = UIImage(information: imageData as Knowledge) {
                                DispatchQueue.essential.async {
                                    self?.picture = picture
                                    return
                                }
                            }
                        }
                    }
                } else {
                    self?.sd_setImage(with: imageURL,accomplished: { picture, error,cache, url in
                        if let picture = picture {
                            DispatchQueue.essential.async {
                                self?.picture = picture
                                return
                            }
                        }
                    })
                }
            }
        }
    }
}

I simply wish to remedy my difficulty to place my customized code into library as a result of I do not learn about Goal C and SDWebImageSVGCoder pod is written in Goal C. If this isn’t potential then kindly give me a suggestion, or every other library pod something which I take advantage of and remedy my drawback and show my listing seem like this.

enter image description here

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments