How can i display animated svg file in iOS without using UIWebView

Question

Currently i am using UIWebView to display animated svg file in my native iOS application.

This works fine except the CPU usage is constantly being on higher side as long as app is in foreground.

Is there any better way to display svg file without using UIwebView

I have already tried many third party libraries but all works only with static svg file not animated svgs

I have tried following

https://github.com/mchoe/SwiftSVG

https://github.com/exyte/Macaw

https://github.com/onmyway133/Snowflake

https://github.com/SVGKit/SVGKit

My app supports iOS 9 and above , My code is in Swift3

Here is the link of on of the svg file that i am trying to display

http://www.mediafire.com/file/04ojy6t4e3c41lv/03d.svg

There just another SVG lib with Core Animation support, https://github.com/SVGKit/SVGKit, but I never tried it. — clemens, Jul 04 '17 at 13:15
Do you know any library to display animated SVG files that is using `UIWebView`? — Dmitry, Jan 30 '20 at 01:57

score 0 · Answer 1 · edited Jan 13 '23 at 19:46

First install the pod in your podfile

pod `SVGKit`

Then import the library in your view controller file

import SVGKit

Then create SVGKImageObjectView object and add it to your view

let svgImage = SVGKFastImageView(svgkImage : SVGKImage(contentOf:Bundle.main.url(forResource: "animated", withExtension : "svg")!))
self.view.addSubview(svgImage)

To animate the SVG You can use play function

svgImage.svgKImage.play()

You can also set your frame and layout

svgImage.frame  = CGRect(x:0, y:0, width:200, height: 200)
svgImage.center = self.view.center

score -1 · Answer 2 · answered Jul 04 '17 at 13:47

-1

You should take look at SVGKit !

This library is based on core animation.

Refer this tutorial,

First install pod or manually install SVGKit into your project.

Then drag and drop your svg file in to your project.

Then you can do something like,

  UIView *myView = [[UIView alloc]initWithFrame:CGRectMake(20, 70, 300, 300)];

myView.backgroundColor = [UIColor yellowColor];

[self.view addSubview:myView];

 // SVGKImage *image = [SVGKImage imageWithContentsOfFile:@"animated-svg-icon"];

SVGKImage *image = [SVGKImage imageNamed:@"cd-icon.svg"];

[self animateCALayer:image.CALayerTree duration:2.0];
[myView.layer addSublayer:image.CALayerTree];

here cd-icon.svg is the svg image. Put all the html,js and css files with it in your bundle! (put whole folder of svg in your project)

If you get any error related CocoaLumberjack then install pod 'CocoaLumberjack' in your project and replace @import CocoaLumberjack; with #import "CocoaLumberjack.h" in SVGKit-prefix.pch

Follow everything step by step as I mentioned. And you are done. You will displaying svg in UIView instead of webview.

answered Jul 04 '17 at 13:47

Ketan Parmar

27,092
9
50
75

1

I have already tried SVGKit ... but it doesn't work with animated svg .... Thanks – Mihir Mehta Jul 05 '17 at 05:19
are you using animated svg ? – Mihir Mehta Jul 05 '17 at 05:20
[https://codyhouse.co/demo/animated-svg-icon/](https://codyhouse.co/demo/animated-svg-icon/) this svg animated in my case – Ketan Parmar Jul 05 '17 at 05:23
It's sample code doesn't even work properly ... at least in Xcode 8.3 – Mihir Mehta Jul 05 '17 at 06:00
if you running sample code of library then check scheme! you shouldn't run framework! – Ketan Parmar Jul 05 '17 at 06:03
I know ... the example runs ... but almost no animation happens – Mihir Mehta Jul 05 '17 at 06:16
download my demo (SVGDemo.zip) from [https://github.com/ketan-parmar/SVGDemoForiOS/blob/master/SVGDemo.zip](https://github.com/ketan-parmar/SVGDemoForiOS/blob/master/SVGDemo.zip) – Ketan Parmar Jul 05 '17 at 06:27
SVGDemo folder is empty – Mihir Mehta Jul 05 '17 at 06:47
download from here [https://github.com/ketan-parmar/SVGDemoForiOS/blob/master/SVGDemoForiOS.zip](https://github.com/ketan-parmar/SVGDemoForiOS/blob/master/SVGDemoForiOS.zip) – Ketan Parmar Jul 05 '17 at 06:59
http://www.mediafire.com/file/04ojy6t4e3c41lv/03d.svg Try this file in your demo ... nothing being displayed – Mihir Mehta Jul 05 '17 at 07:12
if specific svg is not working then it should be issue of svg i think! – Ketan Parmar Jul 05 '17 at 07:13
and there is only one file with extension svg in the link you have provided. you required all supporting file with it like htmp, css etc to run on iOS. download file from [https://codyhouse.co/demo/animated-svg-icon/](https://codyhouse.co/demo/animated-svg-icon/) here and see you will have one folder of multiple files! – Ketan Parmar Jul 05 '17 at 07:16
I have around 30 svg file. none of the svg works .... even though all of the svg workd just fine if i display it inside UIwebView – Mihir Mehta Jul 05 '17 at 07:25
If i display it in UIwebView i did not require anything other than svg file itself – Mihir Mehta Jul 05 '17 at 07:26
yeah for webview you not require other files! – Ketan Parmar Jul 05 '17 at 07:30

How can i display animated svg file in iOS without using UIWebView

2 Answers2