How to use SVG image in SwiftUI?

15 min read

To use SVG images in SwiftUI, you can follow these steps:

  1. Download and install the SwiftUIX library from https://github.com/SwiftUIX/SwiftUIX. This library provides support for SVG images in SwiftUI.

  2. Create a new SwiftUI view to display the SVG image. You can do this by creating a new SwiftUI file or by adding a new View struct in your existing SwiftUI file.

  3. Import the necessary SwiftUIX modules at the top of your file:

import SwiftUI
import SwiftUIX
  1. In your SwiftUI view, use the SVGImage view provided by SwiftUIX to display the SVG image:
struct SVGImageView: View {
    var body: some View {
        SVGImage("your_svg_image_name")
            .resizable()
            .frame(width: 100, height: 100)
    }
}

Replace "your_svg_image_name" with the name of your SVG image file without the file extension.

  1. You can customize the size and other properties of the SVG image using modifiers like resizable() and frame().

  2. Finally, you can use the SVGImageView in your main SwiftUI view by just calling it as a regular view:

struct ContentView: View {
    var body: some View {
        SVGImageView()
    }
}

Remember to replace ContentView with your own main SwiftUI view struct name.

That's it! You can now use SVG images in your SwiftUI app by following these steps.