9

I am using HeroIcons (https://github.com/tailwindlabs/heroicons) in my iOS app. I have added all SVG files into Resource bundle and able to render the SVG using SwiftUI.

But the rendered icon looks blurry

blurry

This is the SVG configuration

enter image description here

And this is the SwiftUI code snippet to display the icon

enter image description here

Any SVG export can help me with this?

Peacemoon
  • 3,198
  • 4
  • 32
  • 56

3 Answers3

23

Just select the “Preserve vector data” option in the image configuration, that should fix your issue.

David Nedrow
  • 1,098
  • 1
  • 9
  • 26
  • I had some problematic `SVG` assets that would render blurry - I can confirm that this works. So make sure "`Preserver Vector Data`" is selected in the `Attribute Inspector` for the image resource. This _should_ make sure that your asset is crisp, clear and scales. – Sakiboy Jul 06 '21 at 22:54
  • 3
    I have this `Preserver Vector Data` enabled but it still looks blurry. – Peacemoon Aug 01 '21 at 01:11
  • Did you ever get this figured out? Jus setting the proper options on the image in the asset catalog (preserve vector data, single scale) definitely works, and contrary to other comments, is not an issue with Image. This works fine: ``` Image("adjustments").resizable().frame(width: 200, height: 200, alignment: .center) ``` – David Nedrow Nov 09 '21 at 01:09
  • For me, it is blurry on iOS 14 simulator and sharp on iOS 15 simulator when using SwiftUI's `Image("name")` – ernesto Jan 19 '22 at 11:39
  • I had the same issue with blurry on one simulator and sharp on another. The fix was to click Device>Erase all Contents and Settings on the simulator's menu, which forced a new build onto there with all new files and now it looks good. – James Toomey Feb 01 '22 at 20:04
  • Thanks for that, this is correct answer! – Sangsom May 02 '22 at 09:52
  • Rather than blurry, my SVGs were very jagged - setting 'preserve vector data' on the assets' config fixed this too. – bfox Oct 18 '22 at 21:37
2

I strongly believe there is something wrong with Image's rendering mechanism for SVG.

Following this question, I have adopted using UIImageView + UIViewRepresentable to render SVG and it works great.

You can take a look a similar implementation of a SwiftuI compatible UIImageView here: https://stackoverflow.com/a/61178828/452115

Peacemoon
  • 3,198
  • 4
  • 32
  • 56
0

If the suggestion from David doesn't work, this might work then:

Image(uiImage: .init(named: "HeroIcons/outline/adjustments", in: Bundle.module, compatibleWith: nil))
       .resizable()
       ...
Eugene Dudnyk
  • 5,553
  • 1
  • 23
  • 48
  • Hmm, I'll have to check that out. I wonder if this is directly correlated to the asset option, allowing one to override it. It's still easier to handle this in the asset catalog, as you can select multiple SVGs and set the option for all of them at once. – David Nedrow Jun 28 '21 at 20:26
  • I've seen this problem happening when `SwiftUI.Image` was used directly to create an image (I believe it was on iOS 13), and using `UIImage` instead fixed the blurring issue for me. – Eugene Dudnyk Jun 29 '21 at 07:45