PowerBI实用技巧——案例十 (利用SVG图像可视化)

在布局仪表盘或表格时，我们会添加一些icon美化我们的报告。例如，我们在排名表中想针对Rank添加icon，如下图：

那我们一般想到可以在单元格元素进行逻辑判断显示。

但是PBI自带的Icons有限，并不能满足我们所有的图标需求，那这个时候我们可能通过将图片上传至服务器，成生url返回给我们做逻辑判断再显示。也可能通过本次要介绍的SVG生成Icon。

一、首先我们介绍一下SVG是什么？

SVG是一种图形文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。

二、我们可以通过哪些途径自动获取到SVG

1.PowerPoint

我们在PPT内插入任何图形都可以另存为SVG格式，例如:

我现在随便另存一个icon为svg，使用文本编辑器打开如下

<svg width="96" height="96" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><defs><clipPath id="clip0"><rect x="592" y="312" width="96" height="96"/></clipPath></defs><g clip-path="url(#clip0)" transform="translate(-592 -312)"><path d="M673 363 666.1 351 666.1 350.5C666.7 333.9 653.7 320 637.1 319.4 620.5 318.8 606.6 331.7 606 348.3 606 349 606 349.8 606 350.5 606 360 610.3 368.9 617.8 374.7L617.8 400 649.4 400 649.4 388 654.3 388C660.8 388 666.1 382.7 666.1 376.2 666.1 376.1 666.1 376.1 666.1 376L666.1 370 670.5 370C673.1 369.7 675.4 366.7 673 363ZM610.5 340.5 616 340.5 616 336.5C614.9 335.7 614.7 334.1 615.5 333 616.3 331.9 617.9 331.7 619 332.5 620.1 333.3 620.3 334.9 619.5 336 619.4 336.2 619.2 336.4 619 336.5L619 340.5 623 340.5 623 347.5C624.1 348.3 624.3 349.9 623.5 351 622.7 352.1 621.1 352.3 620 351.5 618.9 350.7 618.7 349.1 619.5 348 619.6 347.8 619.8 347.6 620 347.5L620 343.5 609.6 343.5C609.9 342.5 610.1 341.5 610.5 340.5ZM638.3 357.4C636.9 357.4 635.8 356.3 635.8 354.9 635.8 354.8 635.8 354.6 635.8 354.5L633.2 351.9 629 356.1 629 363.5C630.1 364.3 630.3 365.9 629.5 367 628.7 368.1 627.1 368.3 626 367.5 624.9 366.7 624.7 365.1 625.5 364 625.6 363.8 625.8 363.6 626 363.5L626 362.5 619.3 362.5 614.6 357C613.2 357.1 612 356.1 611.9 354.7 611.8 353.3 612.8 352.1 614.2 352 615.6 351.9 616.8 352.9 616.9 354.3 616.9 354.5 616.9 354.8 616.9 355L620.7 359.5 626 359.5 626 354.9 631.1 349.8 628 346.6 628 328.5C626.9 327.7 626.7 326.1 627.5 325 628.3 323.9 629.9 323.7 631 324.5 632.1 325.3 632.3 326.9 631.5 328 631.4 328.2 631.2 328.4 631 328.5L631 331.5 639 331.5 639 338.5C640.1 339.3 640.3 340.9 639.5 342 638.7 343.1 637.1 343.3 636 342.5 634.9 341.7 634.7 340.1 635.5 339 635.6 338.8 635.8 338.6 636 338.5L636 334.5 631 334.5 631 345.4 638 352.4C638.1 352.4 638.2 352.4 638.3 352.4 639.7 352.4 640.8 353.5 640.8 354.9 640.8 356.3 639.7 357.4 638.3 357.4L638.3 357.4ZM650.5 337.2C649.1 337.2 648 336.1 648 334.7 648 334.6 648 334.6 648 334.5L644 330.9 644 323.6C645 323.9 646 324.3 647 324.7L647 329.6 650 332.3C650.2 332.3 650.3 332.3 650.5 332.3 651.9 332.3 653 333.4 653 334.8 653 336.2 651.9 337.2 650.5 337.2L650.5 337.2Z"/></g></svg>

2.浏览器搜索

收集了一些常用的资源链接，可以进行搜索并下载成SVG格式，供PBI使用。

https://www.iconfont.cn/

下载步骤如下：

3.了解相关语法，自定义编写

可能通过此链接进行简单入门学习，进行自定义研发

https://www.runoob.com/svg/svg-tutorial.html

三、如何在PowerBI中引用SVG

1.前提条件

1. 需要将svg代码内的双引号修改为单引号，SVG在PBI中需使用度量值存放，内容为字符是需使用双引号括起来。

2. 代码前需添加：data:image/svg+xml;（据类型和编码格式）

3. 创建好的度量值，需要将数据类型调整为：Image Url

2.新建度量值

3.调整类型

4.SVG显示效果

5.结合表格引用SVG，实现本文顶部的表格效果

SVG度量调整之后，只需要根据展示的计算度量值进行逻辑判断，即可获得。

例如：当销售额等于TOP1时，显示rank1_icon，销售额等于TOP2时，显示rank2_icon，依次类推。

代码如下：

IF(TopRankSku[RANK]=1,[rank1_icon],IF(TopRankSku[RANK]=2,[rank2_icon],[rank3_icon]))

此处Rank排序不做解释，逻辑可根据此文进行查看。https://blog.csdn.net/hfjwanzi/article/details/105972962?spm=1001.2014.3001.5502