Power BI SVG制图入门知识
我这两年分享了几百篇Power BI SVG应用文章，不熟悉的读者可能云里雾里，在这里进行个基础知识说明。
SVG全称Scalable Vector Graphics，可缩放矢量图形。SVG图形基于坐标和形状，图像可以无限放大且不失真。下图是两个相同大小的水滴，左侧为SVG格式，右侧为PNG格式，放大后区别明显。
Power BI可以显示SVG的模块相当多，比如壁纸、按钮、内置视觉对象（表格、矩阵、新卡片图）、第三方视觉对象（Infographic Designer、Synoptic Panel、PureViz、HTML Content等）。
在Power BI中，有时候SVG用来装饰，有时候用来制作图表。装饰的时候不需要接触SVG的底层代码，浅度制作图表也不需要接触代码（如使用PureViz)，深度自定义图表则需要了解SVG的基础语法，以便与DAX结合。
本文聚焦深度自定义图表所需的最少知识。Power BI 2023年起内置视觉对象对SVG支持度大幅度提升，使得业务人员可以轻松DAX+SVG自定义几乎任意图表，无需第三方视觉对象，无需等待IT开发，图表专为某一模型定制也成为可能。
1. SVG基础语法
SVG的语法一本书也讲不完，但庆幸的是，在Power BI制图我们无需掌握全部SVG，核心语法一页纸足够。
SVG有开始<svg>有结束</svg>，标准的SVG代码如下，xmlns是命名空间，里面带有一个网址，这个网址无实际价值，只是语法需要，制作好的SVG图表无需联网也可以使用。width和height定义了图像的宽度和高度，宽度和高度不写单位的情况下默认为像素，下图宽150像素，高40像素。
<svg xmlns='http://www.w3.org/2000/svg' width='150' height='40'>
图表内容
</svg>
有时候你可能看到的SVG图像用viewbox进行宽度高度设置，viewbox有四个参数，例如0 0 150 40表示宽150高40。还有时候你会看到既有width，height也有viewbox，这说起来有点复杂，初学建议只使用width和height。
在Power BI内置视觉对象（表格矩阵和新卡片图）显示SVG还需要加上一个前缀，代码变为：
data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='40'>
图表内容
</svg>
图表的内容由各种基础元素组成，常用的SVG元素只有五个：rect（矩形）、circle（圆形）、line（直线）、path（路径）、text（文本）。矩形常常用来绘制条形图、柱形图；圆形绘制气泡图、环形图、排名图；直线通常作为辅助连接，直线line其实也可以不用，矩形设置的细一点可以当作直线；path是万能的，实际上矩形、圆形、直线等都可以用path绘制，但是path的代码不易读，因此常常用来绘制复杂线路，例如折线图；文本用来展示类别标签、数据标签。
以下代码实现了在150*40的画布空间绘制了一个100*25像素的长方形。
data:image/svg+xml;utf8,
<svg xmlns='http://www.w3.org/2000/svg' width='150' height='40'>
<rect x='0' y='10' width='100' height='25'
fill='deepskyblue'
/>
</svg>
形状代码中，xy用来控制形状的坐标，width, height控制形状大小，fill指填充颜色。
这五个元素的语法有共性也有个性，网上有丰富的资料进行学习，这里推荐以下两个：
https://www.runoob.com/svg/svg-tutorial.html
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Basic_Shapes
注意学习需要取舍，以上网站还包含其它SVG知识，如刚入门建议先别看，容易造成心理压力，只看本文推荐的五个元素即可，元素中的path语法最为复杂，如还有压力path也可先放弃。以上所有内容不会超过一页A4纸，可以解决90%的制图问题，另外10%还需要对SVG再深入学习。
网站的SVG代码没有对Power BI适配，有可能有多余的内容，读者只需学习中间核心的形状环节（如下图红框），首尾直接按照文章开始介绍的编码方式即可。
网站中会有折线、多边形元素的介绍，个人认为相对鸡肋，完全可以用path。网上的SVG代码中大量的使用了双引号，在Power BI制作图表度量值时，我们需要使用单引号代替，这点需要特别注意，可以把代码放入记事本，查找替换批量处理。
学习的过程中，不要强行记忆语法，而是以战养战，学一个用一个。例如，看完circle的语法，能不能马上定做一个与内置条件格式不一样的红绿灯？
会不会把circle转变半径值变为气泡图？
了解了text，能不能实现把单位放到右下角？
每个元素单独会使用后，再考虑组合使用，例如气泡能不能加数据标签？能不能搞点装饰？这就是circle+text+line的组合。
学以致用，从最基础的开始，然后再考虑组合。组合元素时需要注意，SVG是图层式的，最开始的代码会显示在图片的最底层。例如上方的气泡图，如果代码是<svg><text><circle></svg>，数据标签是无法显示的，因为被圆圈遮挡了，代码顺序需要是<svg><circle><text></svg>。
2. Power BI展示SVG
本环节只讨论内置视觉对象表格矩阵和新卡片图展示。
表格矩阵有两种放入SVG的方式，列值（表格列、矩阵值）或者条件格式图标，列值需要将SVG度量值标记为图像URL才能正常显示，条件格式图标不标记也能正常显示。
下方条形图、大头针图、瀑布图存放在列，排名图、环形图、气泡图存放在条件格式图标。如果记不住标记规则，直接凡是SVG全部标记URL即可。
表格矩阵的图像高度和宽度可以调整，且数值可以不同，目前最大值支持512像素。
当展示条形图时宽度值应远大于高度值，反之柱形图宽度值远小于高度值。上方表格制作的条形图和下方矩阵制作的柱形图宽高比是相反的。
当展示正方形空间的图表时（例如气泡图、华夫饼图、环形图），宽高像素值设置为相同。
宽高像素设置的值需要与SVG图表度量值的值保持一致，例如界面的高度设置为40，宽度150，度量值的height值对应是40，width值150。如果二者不一致图表也可以显示，但可能会变形。所以建议养成良好的习惯，参数统一。
以上是表格矩阵的列值图像大小调整，条件格式图标的图像大小是无法调整的，条件格式图标只支持正方形的空间。这个特点影响我们对表格矩阵可视化空间的选择，参考此文：Power BI 表格矩阵正方形空间选择
新卡片图视觉对象于2023年6月推出，它不仅仅是字面意思上的卡片图，还是一个万能画布。新卡片图可以在图像选项卡下添加SVG度量值（非SVG也可添加），如下图所示：
当把新卡片图用作卡片图时，直接添加图像URL，当用作画布时，关闭标注与标签，卡片图上的数字即消失，仅显示图像。
新卡片图目前最大支持999像素的图像，比表格矩阵的图像大小大了将近一倍，因此很适合做大图，比如流向地图。
新卡片图的界面设置大小和SVG度量值的大小可以不一致。SVG的宽度高度是100*100，新卡片图图像大小设置为500后，图像会自动等比放大。
那么什么时候选择表格矩阵，什么时候选择新卡片图作为自定义图表载体？参考本文：Power BI 表格矩阵、新卡片图自定义图表的区别
3. SVG制图常用DAX函数
使用SVG在Power BI绘制图表常用的DAX函数并不多。常见的有：
MINX/MAXX，用于判断图表的边界，比如条形的最大值，折线的最高点最低点。
ADDCOLUMNS/SUMMARIZE，用于构建图表虚拟表环境，例如下方这个卡片图，卡片中没有店铺名称的筛选环境，需要这两个函数配合构建。
WINDOW/ROWNUMBER等窗口函数，用于索引或检测上下关系，还是上面的例子，如何让数值最高的条形排最上面？早期使用RANKX函数排名，但RANKX容易有相同值并列，新出的ROWNUMBER可以避免这一问题。
CONCATENATEX，用于把所有图表元素串联起来，SVG的本质是文本，图表中的形状（如rect），数据标签（text），最终使用CONCATENATEX实现合并。
以上函数的语法可以在http://dax.guide/查询。
4. 制图灵感
SVG的基础学会了，DAX这几个函数也会用了，就可以开始自定义图表的征程了。画什么样的图一般情况下有三个来源。
首先是领导的命令，甲方的需求，他们需要你实现什么样的效果，你现在就可以用SVG实现了。
其次是你的想象力，你脑海中出现了一个构图，可以用SVG试试了。
最后是优秀的第三方。比如Easyshu插件的哪款图效果比较好，可以移植到Power BI；比如麦肯锡、苹果、豆瓣、网易、ZebraBI等厂商的图我很欣赏，也可以SVG移植；手机装了很多APP，如B站、知乎、微信，也有各种总结性图表，依然可以移植。
综上，SVG是传统的前端工具，在DAX的加持下，Power BI的图表制作有了更广阔的天地。本文是一个起步路径，已经可以解决很多图表问题，如想进一步研究，可以学习我的视频教程。
本文视频版：https://t.zsxq.com/12VEq65vc
