PowerBI使用SVG图形有哪些鲜为人知技巧？

zt3ff3n · 发表于 2021-9-2 10:34

在矩阵中怎么显示由SVG形成的Sparkline效果？这个Sparkline是度量值算出来的？以及可以分享一下PowerBI中使用SVG的技巧和技术细节吗？

RedZero9 · 发表于 2021-9-2 10:43

显示Sparkline，由于可以将度量值设置为图像URL，如下：

在矩阵中就可以显示由SVG形成的Sparkline效果：

问题来了：

本文将一步步来详细解释这些问题。（文末有赠送Power BI学习资料）。
PowerBI 解析图形图像的原理

由于PowerBI是基于标准的Web技术，也就是兼容包括Html5等W3C定义的Web标准构建的，这里不去深究，只要知道其实在PowerBI里可以显示：

当然包括本文要说明的SVG图形。关键就在于一招：
关键在于：要明确告诉PowerBI系统你要显示的是什么，这在我们的基础系列教程里已经说明得很清楚，例如：地图、图像都是这样，这里就不再重复。
简单理解 SVG

SVG是什么鬼，在现在的Web世界中越来越凸显这一标准的优势。关于SVG，我们只需要知道一件重要的事情即可：
SVG 意为可缩放矢量图形（Scalable Vector Graphics）。SVG 使用 XML 格式定义图像。
从这点我们就可以知道SVG是可以通过文本来定义图形的。（XML也是文本，只不过是按照某种约定编写的文本，好让浏览器知道如何把文本解析成图形）
SVG的好处包括：

越来越多的网站开始把logo之类的图标制作成SVG格式。
SVG 举例

如果不给出答案，你可以猜到这个是什么吗？

这其实就是我们天天看到的：

由于这是纯文本定义出来的矢量图形，它可以在任何能够理解SVG标准的浏览器或设备上高清地显示。
PowerBI 官网的 SVG 图标

不出意外，一些大型专业的网站都会使用SVG图形，PowerBI显然在此之列，我们在官网用查看元素去找到PowerBI的Logo就可以看到：

它们不是图片，而是直接在网页中用SVG定义出来的：

可以看出，这里完全使用文本定义出了PowerBI的Logo。
PowerBI 适用 SVG 面临的问题

喜欢研究的伙伴可以搜索更多的资料，但这里将直接说明在PowerBI中是如何应用 SVG 的，那我们要回答：

我们将依次解释上述一连串问题，这也是符合一步步探索的自然而然的问题。
PowerBI 使用 SVG 的技巧

如果已经拥有了一张 SVG 图片，例如刚刚的 Excel.svg，我们将其用记事本打开，当然如果你可以用任何一种文本编辑器来打开，这里推荐使用 Visual Studio Code 作为数据分析师的文本编辑器。然后将内容复制进入PowerBI，如下：

我们用输入数据的方式将 Excel SVG文件的文本都放入，然后我们新建一个度量值：
SVG Excel = “data:image/svg+xml;utf8,” & SELECTEDVALUE( Excel[Data] )
可以看出我们使用 “data:image/svg+xml;utf8,” 与Excel的SVG文本进行了拼接，这是用PowerBI显示SVG的关键所在，然后设置该度量值的数据分类为图像URL，并用表格显示，如下：

将鼠标移动到该度量值上，可以看到背后就是一串文本定义。这就像在 PowerBI 官网显示了Logo一样。
值得重复强调的是，在 PowerBI 显示SVG的关键在于：

这就是所有的秘密。
如何从web下载 SVG 图片并显示在PowerBI中

在搞清楚了PowerBI显示SVG的原理后，从web下载 SVG 图片并显示在PowerBI中其实并不难，步骤如下：

检查

如何将任意图片（png，jpg等）转为 SVG 并在PowerBI中显示

这里推荐一款软件，叫做：Inkscape，如下：

该软件免费开源且终极强大又支持中文，属于我们期待的完美软件品类，如下：

你可以将不同文件转为 SVG，也可以制作 SVG 文件。例如，我们将 Excel120 的logo文件是 png 格式导入并转为 SVG。利用完全一样的套路就可以显示 SVG 效果：

如何自己制作 SVG 并在PowerBI中显示

在知道了Inkscape以后，制作 SVG 也是很简单的事情，它和 PS 等图形图像处理软件是类似的，但制作专业的 SVG 还是需要一定的学习的，感兴趣的伙伴可以自己去研究了，对于我这种不适合美工的人就拖出来两个星星吧：

当然可以利用同样的套路保存并复制其中的文本到PowerBI中显示，如下：

如何通过 PowerBI 度量值动态计算 SVG 数据实现动态显示（Sparkline）

在具备了以上基础之后，我们就可以进一步来玩高阶的玩法了，既然SVG只是文本，那其实我们可以通过程序自己来构建，我们查阅一些SVG的手册，不难发现：
定义一个圆：

效果是：

定义一条折线：

效果是：

打开脑洞的时间到了，我们发现了一些规律：

那么对于制作动态的 SVG 就可以理解为：

Sparkline 度量值

下面给出 Sparkline 度量值：

简单解释一下上述度量值的关键技巧：

效果如下：

左边是矩阵中使用 Sparkine 度量值的效果，旁边是对应使用三个折线图的效果，说明 Sparkline 可以大致显示数据变化的趋势，将它放在矩阵中确实不失为一种非常酷的技巧。
总结

通过本文我们彻底理解了在PowerBI中使用SVG的所有技巧和技术细节，这为我们构建更动态更丰富的可视化效果提供了新的思路。
怎么样，是不是很有趣，快到自己的工作中实践起来吧。
——
我专门整理了 2G 的 Power BI 学习资料（里面有很多学习课程是我亲自开发的，其中还有一些是付费的教程），主要包含有 Power BI 介绍、新手入门、以及直播视频等，如果你有需要，可以点击下方链接免费领取！
知乎营销平台

我的知乎号主页也会经常分享很多关于PowerBI 优质内容，以及我平时直播预告信息，可以点击我号主页查看。
数正咨询-让数据真正成为你的力量

如果觉得对你有帮助，就点个赞同呗，十分感谢！关于“PowerBI使用SVG图形有哪些鲜为人知技巧？”这个问题，我后期还会不断更新！

		自动登录	找回密码
密码			立即注册

PowerBI使用SVG图形有哪些鲜为人知技巧？

本帖子中包含更多资源