SVG在Power BI中的应用及相关图表插件盘点

SVG，全称Scalable Vector Graphics，即可缩放矢量图形，在Power BI中有着广泛的用处。本文将用法总结为三类，并详述在每种用法使用什么图表插件。

1.SVG用作直接显示图片

SVG图片有两大优点：第一、不受像素约束。下图看上去是两个一样的图片，左侧是SVG格式，右侧是jpg格式，放大后读者可以感受下其中的差异：

第二、本地储存。SVG本质上是文本，在批量导入图片的情况下不需要上传至图床，只需要将本地文本文件导入，这增强了文件的安全性。

SVG的图片可以在网上找，以下是两个知名图库：

• 阿里的矢量图标库https://www.iconfont.cn/
• 字节的图标库http://iconpark.oceanengine.com/official

更多的情况下，需要自己转换jpg、png等格式为SVG，可以使用inkscape这样的开源软件或者PPT直接另存转换。转换完成后用记事本打开，里面的文字即图片。

在Power BI中最简单的SVG图片展示方式是表格或者矩阵，在SVG编码前加上必须的识别符并标记为图像URL。

如果需要大图显示，在图表市场搜索“image”，Simple Image、Image、Image Grid都可以使用。

无论是大图还是小图显示，并不是导入了SVG图片文件本身，而是导入的SVG的编码。Power BI有插入图片功能，但是插入的选项没有SVG格式。

Power BI插入图片截图

而PPT、Excel已具备此项能力，希望Power BI后期跟进。

PPT插入图片截图

比大图更大的SVG图片显示是将SVG用作背景图，可以是静态背景也可以是动画。在《如何为Power BI报表设计动画背景》这篇文章中我介绍了原理。也就是说截止到本文发布，Power BI直接插入图片不支持SVG格式，但是页面背景和壁纸却支持。

2. SVG用作展现动态图表

图片是SVG的最基本用法，SVG同时也是动态图表的良好载体，许多第三方图做了不错的尝试。

Infographic Designer在设计条形图柱形图时，可以导入本地SVG文件更改图标。

Synoptic Panel更为常用，通过它可以导入SVG格式的地图文件，作地理可视化展示，带有条件格式和数据标签。

Synoptic Panel图表制作方还提供了网站http://synoptic.design/可以自定义图形，比方考古：

比方画个仓库平面图：

在《着色热力地图：省、市、区县、商圈、商场、店铺 全都有》这篇文章中我介绍了该图表的详细用法。

PureViz Infographic这个图表将Power BI SVG应用上升到了一个新高度，你可以在PPT设计好静态图表，另存为SVG文件，使用PureViz Infographic导入SVG文件，并和度量值关联，使得图表动态化。《使用PPT设计专属Power BI动态图表》这篇文章介绍了详细用法。

该图表除了用作图表设计，还可以突破Power BI的字体限制：

3. SVG用作设计图表样式

SVG的更大招是：自己编写图表样式。PureViz Infographic已经实现了部分设计图表功能，但不够自由。

理解SVG的图形编码构成，和DAX相结合，理论上可以突破Power BI自有图表、第三方图表的束缚，自造任意样式的个性化图表。例如、条形图的优化：

自定义图表市场没有的四象限方块图：

自定义地图图标：

自定义散点图：

甚至可以模拟下黑客帝国：

SVG的基础图形知识可以参考此链接https://www.w3school.com.cn/svg/index.asp

具体怎么应用到图表制作参考前期本公众号的文章。图表做好后，可以使用内置的表格或矩阵用作迷你图，也可以使用Image by CloudScope显示大图，但是部分SVG标签Image by CloudScope不支持，此时需要替换为HTML Content显示。