前言
最近项目需要加载网络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（因为我们的列表中大部分都是pngjpg的图片，只有少部分是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;
}];
});
}
