How to use .svg images in Xcode assets?

Question

Can I only upload .png files into the assets folder? I get an error for .svg files. I want to use it for the Image() component.

I would recommend, also, looking at PaintCode. It will allow to import SVG files and export them as code, which can be used to generate scalable images or in painting code based on your needs — MadProgrammer, Oct 02 '19 at 00:03

score 13 · Answer 1 · answered Nov 13 '21 at 07:59

13

You can import svg images too in XCAssets. Go to XCAssets, click on + button. Refer this image

Click on import & select svg image.

Now to load & display that image use below code :

Image(uiImage: UIImage(named: "imageName")!)

answered Nov 13 '21 at 07:59

Rushabh Singh

131
1
3

2

Does Xcode convert the svg into png/jpeg? – Feb 06 '22 at 11:59

score 10 · Answer 2 · answered Apr 02 '20 at 16:56

10

You can use Macaw to display a SVG: https://github.com/exyte/Macaw

1) Add the Package via SPM to your project (the tag 0.9.5 actually doesn't work, you need to use the master branch)

2) Move your .svg-file to the project or create a new Data set in your Assets.xcassets and then add the svg file to this data set.

3) Use this code:

struct MyView: View {

    var svgName: String

    var body: some View {
        SVGImage(svgName: self.svgName)
            .frame(width: 50, height: 550)
    }
}

struct SVGImage: UIViewRepresentable {

    var svgName: String

    func makeUIView(context: Context) -> SVGView {
        let svgView = SVGView()
        svgView.backgroundColor = UIColor(white: 1.0, alpha: 0.0)   // otherwise the background is black
        svgView.fileName = self.svgName
        svgView.contentMode = .scaleToFill
        return svgView
    }

    func updateUIView(_ uiView: SVGView, context: Context) {

    }

}

answered Apr 02 '20 at 16:56

Lupurus

3,618
2
29
59

3

A Data set in Assets didn't work for me - copied the file to `Resources/` instead. One minor gotcha - if the filename is `icon.svg` then you want to say `SVGImage(svgName: "icon")` – MisterEd Jul 31 '20 at 18:23
When doing this (Xcode 12.5, iOS deployment target 14.5) the MyView is ignoring the `.frame(width: 50, height: 550)` modifier. In other words, the map display is larger than the frame and the modifers do not restrict the display to this box. – cgold May 15 '21 at 14:53
@cgold It is still ignoring the given frame. Have you figure out the solution? – Gunhan Feb 23 '22 at 15:37
@Lupurus How can I change colour of .svg image? – Muju Apr 05 '23 at 06:37

score 6 · Answer 3 · edited Jun 30 '22 at 12:06

6

I've created a simple tool, which converts SVG code into SwiftUI's Shape object. It is very limited for now (in particular it only supports straight lines and cubic curves, single path SVGs and shapes that are filled with one color), but you can still use it for simple situations.

Here's the link to the tool, and the repository, in case you'd want to contribute and make it support all SVG features.

edited Jun 30 '22 at 12:06

Cristan

12,083
7
65
69

answered Apr 07 '20 at 22:55

Antoni Silvestrovič

985
8
25

@Will If you create an issue in the repository with the SVG code provided I’d be able to figure it out. It’s just a matter of supporting an SVG feature that you’re using that I didn’t implement yet, but is easily fixable if I have the SVG code example. – Antoni Silvestrovič Sep 14 '20 at 15:54
it works, but it leaves a space in the frame. it doesnt hug the frame – Just a coder Dec 13 '20 at 02:41
I would guess that’s from the SVG you’re using, but please create an issue on GitHub with the SVG that you used if you can! Then I’ll be able to fix it :) – Antoni Silvestrovič Dec 13 '20 at 08:01
1

That online tool is very useful. Thanks! – Anthony. Jun 29 '21 at 11:16
@AntoniSilvestrovič How can I separate path and add onTabGesture on every path – Muju Apr 05 '23 at 09:27

score 3 · Answer 4 · answered Oct 01 '19 at 23:14

3

You can use pdf's for vectors in the asset catalog (select single scale and preserve vector data in the inspector on the right). You cannot directly use SVG's in the asset catalog, but with Xcode 11 you actually can use SVG's for symbols. Apple has a detailed guide on how to make your own SVG symbols here.

answered Oct 01 '19 at 23:14

Josh Homann

15,933
3
30
33

I get an error. Apparently it doesn't fulfill the requirements, as the page tells me you linked. I downloaded this svg package.. I have no idea about Adobe Illustrator or whatever.. – seref Oct 01 '19 at 23:47

score 3 · Answer 5 · answered Jun 09 '23 at 20:48

You may use svg images as you would normal raster images in more recent versions of SwiftUI and XCode.

Add (drag and drop) the relevant svg to your XCAssets.

Consider ticking the Preserve Vector Data option on.
Pass the svg image name as the name param of an Image view and it should render.

How to use .svg images in Xcode assets?

5 Answers5

Linked