PowerBI中使用SVG图标简单介绍

1. 什么是SVG？

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。
SVG 是使用 XML 来描述二维图形和绘图程序的语言。
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。
SVG 是万维网联盟(W3C)的标准。

2. SVG的优势

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

SVG 图像可通过文本编辑器来创建和修改；
SVG 图像可被搜索、索引、脚本化或压缩；
SVG 是可伸缩的；
SVG图像可在任何的分辨率下被高质量地打印；
SVG 可在图像质量不下降的情况下被放大；
由于以上的特性，我们在Power BI中使用SVG图标就很有优势！

3. 什么时候使用？

正常情况下，我们在PBI中插入图片是采用 “直接插入图像” 的方式。
但是这种方式存在部分的局限性，即：当一些小的图标需要在表格中进行显示时，“直接插入图像” 的方式会显得很笨拙。
这时候，我们就可以考虑采用 “SVG图标” 的方式。

4. 一个简单的SVG示例

SVG 文件推荐使用 .svg（全部小写）作为此类文件的扩展名。
test.svg 文件:

<svg version="1.1"baseProfile="full"width="300" height="200"xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" stroke="red" stroke-width="4" fill="yellow" /><circle cx="150" cy="100" r="80" fill="green" /><text x="150" y="115" font-size="16" text-anchor="middle" fill="white">RUNOOB SVG TEST</text>
</svg>

得到以下的图形：

可以在 SVG运行测试中进行验证。

SVG 代码解析：
SVG 代码和html代码类似，都是由标签组成的，标签可以嵌套。
SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。
width 和 height 属性可设置此 SVG 文档的宽度和高度；
version 属性可定义所使用的 SVG 版本；
xmlns 属性可定义 SVG 命名空间。
SVG 的 <rect> 用来创建一个矩形，通过 fill 把背景颜色设为黄色。
SVG 的 <circle> 用来创建一个圆。

cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)，r 属性定义圆的半径。一个半径80px 的绿色圆圈 <circle> 绘制在红色矩形的正中央（向右偏移 150px，向下偏移115px）。

stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 4px 宽，红色边框。
fill 属性设置形状内的颜色。我们把填充颜色设置为红色。
关闭标签 </svg> 的作用是关闭 SVG 元素和文档本身。
注释：所有的开启标签必须有关闭标签！

参考：菜鸟教程：SVG 实例

5. 在PBI中自定义SVG

在Power BI中使用SVG，都是用度量值来存放的。
自定义SVG：即没有现成的SVG图片，根据需要，自定义一些图表（可以简单地理解成“一笔一划”的画，过程较复杂，但功能更灵活）。
新建度量值，输入：

circle_icon = "data:image/svg+xml;utf8,
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
<circle cx='30' cy='30' r='30' fill='green'/>  //画圆圈
</svg>"

字段说明：

data:image/svg+xml;utf8
含义：说明数据类型和编码格式(必须)。
xmlns=‘http://www.w3.org/2000/svg’
含义：xmlns用于说明这段代码所遵从的标准(必须)。
viewBox=‘0 0 100 100’
含义：说明可视窗口的大小(一般当成默认值即可，深究较复杂)。
感兴趣的可以参考：svg中viewbox图解分析
<circle cx=‘30’ cy=‘30’ r=‘30’ fill=‘green’/>
含义：使用<circle…/> 标签可用来创建一个圆(根据需要，使用不同的标签)；cx、cy 属性定义圆心的x、y坐标；r 属性定义圆的半径；fill 属性设置形状的填充颜色。

然后将 [circle_icon] 度量值用表或矩阵来呈现，就可以得到以下的结果。

6. 在PBI中插入SVG图片

在一般的工作中，我们往往不是自己去设计SVG图片样式，而是直接插入别人设计好的SVG图片。所以，我们需要知道如何插入SVG图片到Power BI中。

1. 查看SVG图片的源代码

在浏览器中打开SVG图片；
鼠标右键单击 “查看源代码” ，就可以看到SVG图片的源代码。

2. PBI中插入SVG图片

复制源代码中<svg…>… </svg>标签中的所有内容；
将<svg…>… </svg> 标签内容中所有的双引号替换成单引号；
在PBI中新建度量值，粘贴上一步的<svg…>…</svg>标签内容，然后在前面加上 data:image/svg+xml;utf8 ，并用双引号引起来。(参照自定义SVG中的格式)
将度量值的数据类型改成“图像 URL”(很重要，否则无法显示)；
用表或矩阵来呈现度量值中存放的SVG图片。

7. 简单案例

sales表记录了不同日期和城市的销售数据。
数据的基本格式如下：

需求如下：
根据每个城市的销售总额，将排名前3的城市前面分别显示金、银、铜牌，排名后面的城市显示普通奖牌。

效果图如下：

具体步骤如下：

1.将金、银、铜牌和普通奖牌图标的SVG代码粘贴到到度量值中保存。
分别为：[icon_gold_medal]、[icon_silver_gold]、[icon_bronze_medal]和[icon_general_medal]；
这里只列出 [icon_gold_medal] 的具体写法：

icon_gold_medal = "data:image/svg+xml;utf8,
<svg t='1657694803903' class='icon' viewBox='0 0 1024 1024'
version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='8707'
xmlns:xlink='http://www.w3.org/1999/xlink'
width='200' height='200'><defs>
<style type='text/css'>@font-face
{ font-family: feedback-iconfont;}
</style></defs>
<path d='M337.175 0H162.375l249.8 449.6h174.8L337.175 0z'
fill='#E64A19' p-id='8708'></path>
<path d='M686.875 0L437.075 449.6H611.875L861.675 0H686.875z'
fill='#FF754C' p-id='8709'></path>
<path d='M586.975 449.6l-1.7-3.3-1.7 3.3h3.4zM482.775 260.7l-86 160.4 27.9 54.4 87-160.6-28.9-54.2z'
fill='#C93D18' p-id='8710'></path>
<path d='M511.975 724.3m-299.7 0a299.7 299.7 0 1 0 599.4 0 299.7 299.7 0 1 0-599.4 0Z'
fill='#FFBA57' p-id='8711'></path>
<path d='M511.975 974c-137.9 0-249.8-111.8-249.8-249.8s111.8-249.8 249.8-249.8 249.8 111.8 249.8 249.8c-0.2 138-111.9 249.7-249.8 249.8z m-74.9-174.8v50h149.9v-50h-50V649.4h50v-50H437.075v50h50v149.9h-50z'
fill='#FFE082' p-id='8712'></path>
</svg>"

注：开头记得加：data:image/svg+xml;utf8
2.新建度量值sales_sum，计算总销量 (具备“行上下文”功能。如果直接在后面的度量值icon_presentation里面定义成变量，则不具备“行上下文”功能，rankx()函数无法实现排名)；

sales_sum = sumx('sales','sales'[sales])

3.新建逻辑控制度量值，根据不同排名，展示不同的图标；

icon_presentation =
// 根据城市的销量进行排名
var sales_rank = rankx(all('sales'[city]),[sales_sum])
return
if(HASONEVALUE(sales[city]),  // 让总计处不显示图标
switch(sales_rank,
1,[icon_gold_medal],
2,[icon_silver_gold],
3,[icon_bronze_medal],
[icon_general_medal]))

3.将度量值icon_presentation的数据类型改成“图像 URL”；

4.在表格中分别放入度量值icon_presentation、city和sales，对sales进行降序排列，就可以得到上面的效果图。