您好,欢迎来到二三娱乐。
搜索
您的当前位置:首页iOS使用SVG总结

iOS使用SVG总结

来源:二三娱乐

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


显示SVG图片

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


使用webview显示

使用UIWebViewWKWebView,关键代码如下。

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显示

  • 使用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显示

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

使用Macaw显示

       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显示的图
    查了半天才查到问题。,也是Photoshop的坑。
  <style>
      .cls-1 {
        fill: #666;
        fill-rule: evenodd;
      }
    </style>

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


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

三种显示方式对比

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

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

Copyright © 2019- yule263.com 版权所有 湘ICP备2023023988号-1

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务