How to display svg image using swift

Question

I have a  svg image file I want to display in my project    I tried using UIImageView  which works for the  png  amp   jpg image formats  but not for the  svg extension  Is there any way to display a  svg image using UIWebView or UIImageView

User · Answer

You can use SVGKit for example   1  Integrate it according to instructions  Drag amp dropping the  framework file is fast and easy   2  Make sure you have an Objective-C to Swift bridge file bridging-header h with import code in it    import  lt SVGKit SVGKit h gt   import  lt SVGKit SVGKImage h gt    3  Use the framework like this  assuming that dataFromInternet is NSData  previously downloaded from network   let anSVGImage  SVGKImage   SVGKImage data  dataFromInternet  myIUImageView image   anSVGImage UIImage   The framework also allows to init an SVGKImage from other different sources  for example it can download image for you when you provide it with URL  But in my case it was crashing in case of unreachable url  so it turned out to be better to manage networking by myself  More info on it here

User · Answer

In case you want to use a WKWebView to load a  svg image that is coming from a URLRequest  you can simply achieve it like this   Swift 4  if let request   URLRequest url  urlString   let svgString   try  String contentsOf  request      wkWebView loadHTMLString svgString  baseURL  request      It s much simpler than the other ways of doing it  and you can also persist your  svg string somewhere to load it later  even offline if you need to

User · Answer

SVG file support is added to Xcode 12

User · Answer

You can keep your images as strings and use WKWebView to display them   let webView  WKWebView         let mySVGImage     lt svg height   190   gt  lt polygon points   100 10 40 180 190 60 10 60 160 180   style   fill lime stroke purple stroke-width 5 fill-rule evenodd    gt  lt  svg gt       let preferences   WKPreferences       preferences javaScriptEnabled   false     let configuration   WKWebViewConfiguration       configuration preferences   preferences     let wv   WKWebView frame   zero  configuration  configuration      wv scrollView isScrollEnabled   false     wv loadHTMLString mySVGImage  baseURL  nil      return wv

User · Answer

Swift 3 0 version   let path   Bundle main path forResource   quot svgNameFileHere quot   ofType   quot svg quot    if path     quot  quot        let fileURL URL   URL fileURLWithPath  path      let req   URLRequest url  fileURL      self webView scalesPageToFit   false     self webView loadRequest req    else        handle here if path not found    Third party libraries https   github com exyte Macaw https   github com mchoe SwiftSVG UIWebView and WKWebView booster to load faster https   github com bernikovich WebViewWarmUper

User · Answer

You can use this pod called  SVGParser   https   cocoapods org pods SVGParser   After adding it in your pod file  all you have to do is to import this module to the class that you want to use it  You should show the SVG image in an ImageView    There are three cases you can show this SVGimage     Load SVG from local path as Data Load SVG from local path Load SVG from remote URL   You can also find an example project in GitHub  https   github com AndreyMomot SVGParser  Just download the project and run it to see how it works

User · Answer

As I know there are 2 different graphic formats    Raster graphics  uses bitmaps  and is used  in JPEG  PNG  APNG  GIF  and MPEG4 file format  Vector graphics   uses points  lines  curves and other shapes   Vector graphics are used  in the SVG  EPS  PDF or AI graphic file formats    So if you need to use an image stored in SVG File in your Xcode I would suggest    Convert SVG file to PDF   I used  https   document online-convert com convert svg-to-pdf Use Xcode to manage you PDF file

User · Answer

My solution to show  svg in UIImageView from URL  You need to install SVGKit pod Then just use it like this  import SVGKit   let svg   URL string   quot https   openclipart org download 181651 manhammock svg quot     let data   try  Data contentsOf  svg   let receivedimage  SVGKImage   SVGKImage data  data   imageview image   receivedimage uiImage  or you can use extension for async download extension UIImageView   func downloadedsvg from url  URL  contentMode mode  UIView ContentMode    scaleAspectFit        contentMode   mode     URLSession shared dataTask with  url    data  response  error in         guard             let httpURLResponse   response as  HTTPURLResponse  httpURLResponse statusCode    200              let mimeType   response  mimeType  mimeType hasPrefix  quot image quot                let data   data  error    nil              let receivedicon  SVGKImage   SVGKImage data  data               let image   receivedicon uiImage             else   return           DispatchQueue main async                 self image   image                 resume        How to use  let svg   URL string   quot https   openclipart org download 181651 manhammock svg quot     imageview downloadedsvg from  svg

User · Answer

There is no Inbuilt support for SVG in Swift  So we need to use other libraries   The simple SVG libraries in swift are    1  SwiftSVG Library  It gives you more option to Import as UIView  CAShapeLayer  Path  etc  To modify your SVG Color and Import as UIImage you can use my extension codes for the library mentioned in below link    Click here to know on using SwiftSVG library   Using SwiftSVG to set SVG for Image   OR   2  SVGKit Library  2 1  Use pod to install    pod  SVGKit    git   gt   https   github com SVGKit SVGKit git    branch   gt   2 x    2 2  Add framework     Goto AppSettings   -  General Tab   -  Scroll down to Linked Frameworks and Libraries   -  Click on plus icon   -  Select SVG framework   2 3  Add in Objective-C to Swift bridge file bridging-header h     import  lt SVGKit SVGKit h gt   import  lt SVGKit SVGKImage h gt    2 4  Create SvgImg Folder  for better organization  in Project and add SVG files inside it      Note   Adding Inside Assets Folder won t work and SVGKit searches for file only in Project folders   2 5  Use in your Swift Code as below    import SVGKit   and  let namSvgImgVar  SVGKImage   SVGKImage named   NamSvgImj        Note   SVGKit Automatically apends extention   svg  to the string you specify   let namSvgImgVyuVar   SVGKImageView SVGKImage  namSvgImgVar   let namImjVar  UIImage   namSvgImgVar UIImage   There are many more options for you to init SVGKImage and SVGKImageView  There are also other classes u can explore      SVGRect     SVGCurve     SVGPoint     SVGAngle     SVGColor     SVGLength      and etc

User · Answer

You can add New Symbol Image Set in  xcassets  then you can add SVG file in it  and use it same like image     Note  This doesn t work on all SVG  You can have a look at the apple documentation

User · Answer

Here s a simple class that can display SVG images in a UIView  import UIKit  public class SVGImageView  UIView       private let webView   UIWebView        public init             super init frame   zero          webView delegate   self         webView scrollView isScrollEnabled   false         webView contentMode    scaleAspectFit         webView backgroundColor    clear         addSubview webView          webView snp makeConstraints   make in             make edges equalTo self                       required public init  coder aDecoder  NSCoder            fatalError  init coder   has not been implemented              deinit           webView stopLoading              public func load url  String            webView stopLoading           if let url   URL string  fullUrl                webView loadRequest URLRequest url  url                      extension SVGImageView  UIWebViewDelegate       public func webViewDidFinishLoad   webView  UIWebView            let scaleFactor   webView bounds size width   webView scrollView contentSize width         if scaleFactor  lt   0               return                    webView scrollView minimumZoomScale   scaleFactor         webView scrollView maximumZoomScale   scaleFactor         webView scrollView zoomScale   scaleFactor

User · Answer

Try this code  var path  String   NSBundle mainBundle   pathForResource  nameOfFile   ofType   svg             var url  NSURL   NSURL fileURLWithPath path     Creating a URL which points towards our path           Creating a page request which will load our URL  Which points to our path          var request  NSURLRequest   NSURLRequest URL  url         webView loadRequest request     Telling our webView to load our above request

User · Answer

To render SVG file you can use Macaw  Also Macaw supports transformations  user events  animation and various effects   You can render SVG file with zero lines of code  For more info please check this article  Render SVG file with Macaw   DISCLAIMER  I am affiliated with this project

[ios] How to display .svg image using swift

Examples related to ios

Examples related to swift

Examples related to uiwebview