我们在做数据可视化的时候，经常会用到图标，SVG可缩放矢量图标是最佳选择，网络中有很多资源，今天我们介绍建立一个SVG图标集，查找和引用这个图标集中的图标。

SVG小知识：

svg是标签语言，开始与结束要用<svg></svg>标签包裹起来，我们引用现成的图标，所以我们不用系统的学习svg的语法，只需要了解最基本的设置就可以了：

<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
 <path d="M3 0v1h4v5h-4v1h5v-7h-5zm1 2v1h-4v1h4v1l2-1.5-2-1.5z" />
</svg>

我们只需要三个参数：

• width:图标的宽度，数值是绝对大小，可以相对大小用vh
• height:图标的高度，数值是绝对大小，可以相对大小用vh
• fill:图标的填充颜色，可以用英文名称，可以是颜色编码#FD625E

 <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="#FD625E" viewBox="0 0 8 8">
 <path d="M3 0v1h4v5h-4v1h5v-7h-5zm1 2v1h-4v1h4v1l2-1.5-2-1.5z" />
</svg> 

做了上述修改：这个图标就会是一个８０＊８０的红色的图标。

SVG资源

SVG资源网络上可以找到很多，推荐这个网站的223个应该够用了，这个网站是MIT license可以放心使用。

下载图标并解压出svg目录：

到这里我们就把准备工作做好了。

导入SVG图标

用Power Query从文件夹导入SVG图标：

解码二进制：

把二进制解码成Base64：

DAX中的准备工作：

把上面的图标集加载到Power BI 中，这个时候还不能直接引用SVG图标，因为我们还需要做一个编码声明，才能视图中显示出图标。

UTF8编码："data:image/svg+xml;utf8,"

另外我们要改变图标的大小与颜色，这两个工作可以在Power Query中做，也可以在DAX中做，都可以，就是简单的文本替换与拼接：

DAX中更接近我们excel中SUBSTITUTE：

red = SUBSTITUTE(svg[svg],"width=""8"" height=""8""","width=""80"" height=""80"" fill=""#FD625E""")

这是大小与颜色的改变。

同样可以做绿色、黄色的图标列

我们做一列可以直接显示的utf8的图标列：

这样也看不全啊，是能显示出图标，不完整或者太小不清晰，我们要做一个可视化查询：

Power BI可视化查询SVG图标

我们用三个视觉对象来查询SVG图标

Chiclet Slicer可以做一个SVG图标的矩阵列表：

Image Grid制作一个图标云：

Html Viewer制作单个图标视图：

这三个视觉对象都很简单，设置也很容易：

稍有不同的是：

• Html Viewer：引用的列是不用声明utf8编码的列
• 其他两个视觉对象：引用redutf8列，是utf8编码的列

就是说，我们要在Power BI 中引用图标，大部分时候是要utf8编码的。

单个SVG图标引用

通过编写度量值，指向单个图标：

我们先找一个要引用的图标名称：circle-check.svg

我们要用绿色的图标：

ShowGreen = "data:image/svg+xml;utf8,"&

CALCULATE(SELECTEDVALUE(svg[green]),'svg'[Name]="circle-check.svg")

我们引用红色的图标：

ShowRed = CALCULATE(SELECTEDVALUE(svg[redutf8]),'svg'[Name]="circle-check.svg")

应为我们有现成的utf8红色图标所以度量值前面就少了"data:image/svg+xml;utf8,"&

其实这个两个度量值就代表了这两个图标：

我们可以用image形式单个引用，也可以用在条件格式中引用这两个图标：

有了这个图标集，你就可以有丰富的图标可用，可以自定义大小、颜色，做出更出色的可视化作品。