Some images SVG images don't display at all

[afern247]

I have some SVG, some display and others don't, for example:

• Doesn't display: https://assets.road2crypto.com/chains%2Ffantom%2Flogo.svg
• Displays fine: https://assets.road2crypto.com/chains/ethereum/logo.svg

Why the first doesn't display?

[dreampiggy]

If you use the SVGCoder Plugin(https://github.com/SDWebImage/SDWebImageSVGCoder), it use Apple's own SVG parsing framework which designed for Symbol Image actually (Symbol Image is subset of SVG/2 standard, see more: https://developer.apple.com/documentation/uikit/uiimage/creating_custom_symbol_images_for_your_app?language=objc)

So some of SVG 1.1/2 image can not been rendered. Known issue.

Workaround: Re-create your assets using PDF or Lottie, which has better compatibility.

Or you can try this one, but this supports bitmap version (not vector format): https://github.com/SDWebImage/SDWebImageSVGNativeCoder

[dreampiggy]

Maybe that pattern and <image> label is not supported in Apple's CoreSVG (used by SVGCoder)

[afern247]

I ended up using png, this is too hacky..

[dreampiggy]

Can't SDWebImageSVGNativeCoder solve your issue ?

This is W3C standard impl (though maybe some issue because you don't use SVG2 and SVG-Native)

[afern247]

I just exported the SVG from Figma, uploaded it and from the url when it's fetched it doesn't show up

[dreampiggy]

I just exported the SVG from Figma, uploaded it and from the url when it's fetched it doesn't show up

SDWebImageSVGNativeCoder or SDWebImageSVGCoder ? You can try the first one if you don't need vector semantic

[afern247]

It still doesn't work, none of the 2. This is my config:

import Foundation
import SDWebImageSwiftUI
import SDWebImageSVGNativeCoder

enum SDWebImage {
    
    static func configureSDImageCache() {
        // Access the shared image cache instance
        let cache = SDImageCache.shared

        // Set the maximum memory cost in bytes (e.g., 200 MB)
        cache.config.maxMemoryCost = 200 * 1024 * 1024

        // Set the maximum disk cache size in bytes (e.g., 1 GB)
        cache.config.maxDiskSize = 1 * 1024 * 1024 * 1024

        // Set the disk cache expiry time based on the last access date (1 day)
        cache.config.diskCacheExpireType = .accessDate
        cache.config.maxDiskAge = 60 * 60 * 24
        
        SDImageCodersManager.shared.addCoder(SDImageSVGNativeCoder.shared)
    }
    
    static func clearCache() {
        // Clear the in-memory cache
        SDImageCache.shared.clearMemory()

        // Clear the disk cache
        SDImageCache.shared.clearDisk()
    }
    
}

and my custom image loader: LoadImageFromUrl(image: "https://assets.road2crypto.com/chains%2Ffantom%2Flogo.svg", dimensions: 40)

which has:

import SwiftUI
import SDWebImageSwiftUI

struct LoadImageFromUrl: View {

    let image: String?
    let dimensions: Double
    @State private var loadFailed: Bool = false

    var body: some View {
        ZStack {
            if let image = self.image, !image.isEmptyOrWhiteSpace(), !loadFailed {
                WebImage(url: URL(string: image), options: .refreshCached)
                    .resizable()
                    .onFailure { _ in
                        loadFailed = true
                    }
                    .clipShape(Circle())
                    .frame(width: dimensions, height: dimensions)
            } else {
                noImage
            }
        }
    }

    @ViewBuilder var noImage: some View {
        Image(decorative: "defaultImageCircled")
            .resizable()
            .clipShape(Circle())
            .frame(width: dimensions, height: dimensions, alignment: .center)
    }
}

You can try it for yourself, none of the 2 packages can load display the image @dreampiggy

[dreampiggy]

If that svg-native coder can not render the images, means this SVG is not designed for mobile but using some Web only environment like filter/scripting

For this, the only "Standard" way is to use WKWebView to render this.

Search Google to learn more about SVG/1.1 SVG2 and SVG-Native