svg图片的size不管怎么变，都不会失真。所以有时候可以用svg代替png图片。

---

显示SVG图片

如果只是显示svg图片，有好几种方法。但是都有优缺点。

---

使用webview显示

使用UIWebView和WKWebView，关键代码如下。

if let data = try? Data.init(contentsOf: URL.init(fileURLWithPath: tigerPath ?? "")) {
            let dataStr = String.init(data: data, encoding: .utf8) ?? ""
            wkWebView.loadHTMLString(dataStr, baseURL: nil)
            webView.loadHTMLString(dataStr, baseURL: nil)
        }

---

使用SVGKit显示

SVGKit是用Objective-C写的，专门处理svg的第三方框架。

• 使用UIImageView显示

       let svgView = UIImageView(frame: .init(x: 0, y: 0, width: 100, height: 100))
        ///创建SVGKImage
        let svgImage = SVGKImage.init(named: "ICO 好妈圈@2x 2.svg")!
        svgView.image = svgImage.uiImage
        ///可以自己设置大小，有些svg没有设置size，这里需要设置下
        //        svgImage.size = .init(width: 100, height: 100)
        view.addSubview(svgView)

• 使用SVGKFastImageView显示

        let svgImage = SVGKImage.init(named: "ICO 好妈圈@2x 2.svg")!
        let svgImgView = SVGKFastImageView.init(svgkImage: svgImage)!
        svgImgView.frame = .init(x: 0, y: 0, width: 100, height: 100)
        view.addSubview(svgImgView)

---

使用SwiftSVG显示

SwiftSVG是用Swift写的，专门处理svg的第三方框架。

let fistBump = UIView(SVGNamed: "fistbump")     // In the main bundle
self.addSubview(fistBump)

---

使用Macaw显示

Macaw是个可以显示很多样式的Swift框架。

       if let node = try? SVGParser.parse(fullPath: tigerPath ?? "") {
            let svgView = SVGView.init(node: node, frame: view.bounds)
            view.addSubview(svgView)
        }

---

使用SVGKit的问题

由于工程里改的图片是tabbaritem的。所以需要拿到UIImage。所以只能使用SVGKit。使用过程中也遇到一些。

---

1. 颜色显示不对
   svg图片在浏览器里颜色是深灰色的， 原图
   但是使用SVGKit后显示的是黑色的，和原图不一样。 svg显示的图
   查了半天才查到问题。是css名字的问题，也是Photoshop的坑。

  <style>
      .cls-1 {
        fill: #666;
        fill-rule: evenodd;
      }
    </style>

cls-1在SVGKit中会解析不了。所以把样式里面的-都去掉就行了。
由于我的svg文件都是从Photoshop中导出的，里面的样式命名全部是cls-1这样的。
所以，如果你的svg文件是Photoshop中导出的，一定自己手动把所有的-去掉。

---

2. 滤镜效果不显示
   如果svg中带有filter，那么SVGKit和Macaw都不能显示滤镜效果。
   这个问题，现在我也没找到解决方法。

---

三种显示方式对比

SVGKit的功能要多一些，可以满足大部分需求。

特点	webView	SVGKit	Macaw
显示filter	可以	不	不
加载速度	慢	快	快
拿到UIImage	不	可以	不

---

gitHub