WKWebView关于加载SVG图像的思考

前言

最近项目需要加载网络SVG 图像，但是用了一些第三方库效果都很差。大家可以试试加载下面的svg。

swiftSVG 不支持 
SVGKit 不显示背景色
SnowFlake  显示背景色，不显示文字
Macaw 不显示背景色，展示不全
SwiftDraw 解析错误
SDWebImageSVG 展示不全
pocketSVG 颜色不支持'black'，崩溃

这些库加载出来的效果和在浏览器的效果是不一样的，但是这些SVG在安卓上是解析的很好的，我也参考了两个竞品app，发现他们的列表页是不展示的，但是在详情页是展示的，所以我怀疑他们的详情页是用webVIew加载的。

列表页

详情页

但是使用webview加载图像并没有居中平铺

image.png

关于让SVG居中平铺显示参考的是Stack Overflow上一个用户的回答
#WKWebView content is not centered in iOS

通过前端同学的帮助将这个代码改良了一下，通过url加载SVG

NSString *htmlStr = @"<!DOCTYPE html><html><head><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title></title><style type=\"text/css\">html,body {height: 100%;}body {display: flex;justify-content: center;align-items: center;background: url('@') no-repeat center center/contain;}svg {height: 300px;}</style></head><body></body></html>";
NSString *svgHtml = [htmlStr stringByReplacingOccurrencesOfString:@"@" withString:image_url];

题外话

直接使用SDWebImage（因为我们的列表中大部分都是png jpg的图片，只有少部分是SVG）下载svg，然后将xml代码加到HTML body里是否可以？答：不完全可以。因为有几个SVG的代码放到body里就只能显示文字，例如

这个

这个SVG可以在SVGKit中找到
因为还有分享功能，那么WKWebView怎么截屏？用UIGraphicsBeginImageContextWithOptions是绘制不出来的，需要使用 takeSnapshotWithConfiguration

#pragma mark -- WKNavigationDelegate 网页加载完成
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
    // 对webview绘制图片,赋值给要分享的imageView中,不然分享还得等webview加载完
    // 这里设置延迟,防止webview还没显示完
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        WKSnapshotConfiguration *snapConfig = [[WKSnapshotConfiguration alloc] init];

        [webView takeSnapshotWithConfiguration:snapConfig completionHandler:^(UIImage * _Nullable snapshotImage, NSError * _Nullable error) {
            self.webViewImage = snapshotImage;
        }];
    });
}

WKWebView关于加载SVG图像的思考

前言

题外话

推荐阅读更多精彩内容