I make a request to the server and in response I get an svg image. I tried to display it using AsyncImage(), but it didn't work. Is there any solution to this problem?
So I tried to do:
AsyncImage(url: URL(string: "https://s3-symbol-logo.tradingview.com/applovin--big.svg"))
But this led to the fact that just placeholder was shown:
EDIT: I found a solution and posted another answer, please check it out in this forum
There is no solution for this, because .SVG images are not actually images, they are actually files (SVG: Scalable Vector Graphics) and they are based on calculations and not actual pixels.
The best option for you is to tell your backend to convert all .SVG files into .PNG or .JPG files and then give you the images urls in that format.
Or another valid option is to download the image into your project assets and then give it the name of the URL and whenever you are provided with the url you just use it like this:
Image("https://s3-symbol-logo.tradingview.com/applovin--big.svg")
I have been trying to do the same thing as you are but I only found one solution: present the .SVG image in a webView. if you are intrested you can find it here (Presenting .SVG as a web View) but keep in mind it is not optimal
there are two ways to implement SVG images in your project one is via using a library on GitHub called SVGKit (this way is expensive using the ram and slows down the loading time a little), but the other way that was perfect is using:
two libraries: 1- SDWebImageSVGCoder 2- SDWebImageSwiftUI
after you add these libraries to your project through the Xcode package dependencies, you write this code to set it up and use it.
import SwiftUI
import SDWebImageSVGCoder
@main
struct Package_trialsApp: App {
init() {
setUpDependencies() // Initialize SVGCoder
}
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
// Initialize SVGCoder
private extension Package_trialsApp {
func setUpDependencies() {
SDImageCodersManager.shared.addCoder(SDImageSVGCoder.shared)
}
}
after setting that up you can use it like this:
import SDWebImageSwiftUI
WebImage(url: "https://www.svgrepo.com/show/423378/car-service.svg", options: [], context: [.imageThumbnailPixelSize : CGSize.zero])
.placeholder {ProgressView()}
.resizable()
.frame(width: 300, height: 300)
Bonus: you can also do something like this to make your code more efficient and more reusable:
import SwiftUI
import SDWebImageSwiftUI
struct ContentView: View {
let imageArray = [
URL(string: "https://www.svgrepo.com/show/423378/car-service.svg"),
URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"),
URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"),
URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"),
URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"),
URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svgfiles/androi.svg"),
URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"),
URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"),
URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"),
URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"),
URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"),
URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"),
URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"),
URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"),
URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"),
URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"),
URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"),
URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg"),
URL(string: "https://jpeg.org/images/jpeg-home.jpg")
]
var body: some View {
ScrollView {
Link(destination: URL(string: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg")!, label: {
Text("Sample SVG image")
.foregroundColor(.orange)
})
ForEach(imageArray, id: \.self) { url in
if let bolean = url?.absoluteString.suffix(3).localizedCaseInsensitiveContains("svg") {
if bolean {
HStack {
WebImage(url: url, options: [], context: [.imageThumbnailPixelSize : CGSize.zero])
.placeholder {ProgressView()}
.resizable()
.frame(width: 300, height: 300)
}
} else {
AsyncImage(url: url, content: { phase in
switch phase {
case .empty:
ProgressView()
case .failure:
Color.red
case .success(let image):
image.resizable().frame(width: 100, height: 100)
@unknown default:
fatalError()
}
})
}
}
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Looks like it's your image link problem.
I tested two AsyncImage, my link worked, but your link did not.
Try checking whether your link is the right path for the image loading.
Code is below the image:
VStack {
//my link worked
AsyncImage(url: URL(string: "https://picsum.photos/200")) { image in
image.resizable()
} placeholder: {
ProgressView()
}
.frame(width: 100, height: 100)
//your link did not work. result in loading.
AsyncImage(url: URL(string: "https://s3-symbol-logo.tradingview.com/applovin--big.svg")) { image in
image.resizable()
} placeholder: {
ProgressView()
}
.frame(width: 100, height: 100)
}