我這兩年分享了幾百篇Power BI SVG應(yīng)用文章，不熟悉的讀者可能云里霧里，在這里進(jìn)行個(gè)基礎(chǔ)知識(shí)說(shuō)明。

SVG全稱(chēng)Scalable Vector Graphics，可縮放矢量圖形。SVG圖形基于坐標(biāo)和形狀，圖像可以無(wú)限放大且不失真。下圖是兩個(gè)相同大小的水滴，左側(cè)為SVG格式，右側(cè)為PNG格式，放大后區(qū)別明顯。

Power BI可以顯示SVG的模塊相當(dāng)多，比如壁紙、按鈕、內(nèi)置視覺(jué)對(duì)象（表格、矩陣、新卡片圖）、第三方視覺(jué)對(duì)象（Infographic Designer、Synoptic Panel、PureViz、HTML Content等）。

在Power BI中，有時(shí)候SVG用來(lái)裝飾，有時(shí)候用來(lái)制作圖表。裝飾的時(shí)候不需要接觸SVG的底層代碼，淺度制作圖表也不需要接觸代碼（如使用PureViz)，深度自定義圖表則需要了解SVG的基礎(chǔ)語(yǔ)法，以便與DAX結(jié)合。

本文聚焦深度自定義圖表所需的最少知識(shí)。Power BI 2023年起內(nèi)置視覺(jué)對(duì)象對(duì)SVG支持度大幅度提升，使得業(yè)務(wù)人員可以輕松DAX+SVG自定義幾乎任意圖表，無(wú)需第三方視覺(jué)對(duì)象，無(wú)需等待IT開(kāi)發(fā)，圖表專(zhuān)為某一模型定制也成為可能。

1.?SVG基礎(chǔ)語(yǔ)法

SVG的語(yǔ)法一本書(shū)也講不完，但慶幸的是，在Power BI制圖我們無(wú)需掌握全部SVG，核心語(yǔ)法一頁(yè)紙足夠。

SVG有開(kāi)始<svg>有結(jié)束</svg>，標(biāo)準(zhǔn)的SVG代碼如下，xmlns是命名空間，里面帶有一個(gè)網(wǎng)址，這個(gè)網(wǎng)址無(wú)實(shí)際價(jià)值，只是語(yǔ)法需要，制作好的SVG圖表無(wú)需聯(lián)網(wǎng)也可以使用。width和height定義了圖像的寬度和高度，寬度和高度不寫(xiě)單位的情況下默認(rèn)為像素，下圖寬150像素，高40像素。

<svg xmlns='http://www.w3.org/2000/svg' width='150' height='40'> ?

圖表內(nèi)容

</svg>

有時(shí)候你可能看到的SVG圖像用viewbox進(jìn)行寬度高度設(shè)置，viewbox有四個(gè)參數(shù)，例如0 0 150 40表示寬150高40。還有時(shí)候你會(huì)看到既有width，height也有viewbox，這說(shuō)起來(lái)有點(diǎn)復(fù)雜，初學(xué)建議只使用width和height。
在Power BI內(nèi)置視覺(jué)對(duì)象（表格矩陣和新卡片圖）顯示SVG還需要加上一個(gè)前綴，代碼變?yōu)椋?/span>

data:image/svg+xml;utf8,<svg?xmlns='http://www.w3.org/2000/svg'?width='150'?height='40'> ?

圖表內(nèi)容

</svg>

圖表的內(nèi)容由各種基礎(chǔ)元素組成，常用的SVG元素只有五個(gè)：rect（矩形）、circle（圓形）、line（直線(xiàn)）、path（路徑）、text（文本）。矩形常常用來(lái)繪制條形圖、柱形圖；圓形繪制氣泡圖、環(huán)形圖、排名圖；直線(xiàn)通常作為輔助連接，直線(xiàn)line其實(shí)也可以不用，矩形設(shè)置的細(xì)一點(diǎn)可以當(dāng)作直線(xiàn)；path是萬(wàn)能的，實(shí)際上矩形、圓形、直線(xiàn)等都可以用path繪制，但是path的代碼不易讀，因此常常用來(lái)繪制復(fù)雜線(xiàn)路，例如折線(xiàn)圖；文本用來(lái)展示類(lèi)別標(biāo)簽、數(shù)據(jù)標(biāo)簽。

以下代碼實(shí)現(xiàn)了在150*40的畫(huà)布空間繪制了一個(gè)100*25像素的長(zhǎng)方形。

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用來(lái)控制形狀的坐標(biāo)，width, height控制形狀大小，fill指填充顏色。

這五個(gè)元素的語(yǔ)法有共性也有個(gè)性，網(wǎng)上有豐富的資料進(jìn)行學(xué)習(xí)，這里推薦以下兩個(gè)：

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

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Basic_Shapes

注意學(xué)習(xí)需要取舍，以上網(wǎng)站還包含其它SVG知識(shí)，如剛?cè)腴T(mén)建議先別看，容易造成心理壓力，只看本文推薦的五個(gè)元素即可，元素中的path語(yǔ)法最為復(fù)雜，如還有壓力path也可先放棄。以上所有內(nèi)容不會(huì)超過(guò)一頁(yè)A4紙，可以解決90%的制圖問(wèn)題，另外10%還需要對(duì)SVG再深入學(xué)習(xí)。

網(wǎng)站的SVG代碼沒(méi)有對(duì)Power BI適配，有可能有多余的內(nèi)容，讀者只需學(xué)習(xí)中間核心的形狀環(huán)節(jié)（如下圖紅框），首尾直接按照文章開(kāi)始介紹的編碼方式即可。

網(wǎng)站中會(huì)有折線(xiàn)、多邊形元素的介紹，個(gè)人認(rèn)為相對(duì)雞肋，完全可以用path。網(wǎng)上的SVG代碼中大量的使用了雙引號(hào)，在Power BI制作圖表度量值時(shí)，我們需要使用單引號(hào)代替，這點(diǎn)需要特別注意，可以把代碼放入記事本，查找替換批量處理。

學(xué)習(xí)的過(guò)程中，不要強(qiáng)行記憶語(yǔ)法，而是以戰(zhàn)養(yǎng)戰(zhàn)，學(xué)一個(gè)用一個(gè)。例如，看完circle的語(yǔ)法，能不能馬上定做一個(gè)與內(nèi)置條件格式不一樣的紅綠燈？

會(huì)不會(huì)把circle轉(zhuǎn)變半徑值變?yōu)闅馀輬D？

了解了text，能不能實(shí)現(xiàn)把單位放到右下角？

每個(gè)元素單獨(dú)會(huì)使用后，再考慮組合使用，例如氣泡能不能加數(shù)據(jù)標(biāo)簽？能不能搞點(diǎn)裝飾？這就是circle+text+line的組合。

學(xué)以致用，從最基礎(chǔ)的開(kāi)始，然后再考慮組合。組合元素時(shí)需要注意，SVG是圖層式的，最開(kāi)始的代碼會(huì)顯示在圖片的最底層。例如上方的氣泡圖，如果代碼是<svg><text><circle></svg>，數(shù)據(jù)標(biāo)簽是無(wú)法顯示的，因?yàn)楸粓A圈遮擋了，代碼順序需要是<svg><circle><text></svg>。

2.?Power BI展示SVG

本環(huán)節(jié)只討論內(nèi)置視覺(jué)對(duì)象表格矩陣和新卡片圖展示。

表格矩陣有兩種放入SVG的方式，列值（表格列、矩陣值）或者條件格式圖標(biāo)，列值需要將SVG度量值標(biāo)記為圖像URL才能正常顯示，條件格式圖標(biāo)不標(biāo)記也能正常顯示。

下方條形圖、大頭針圖、瀑布圖存放在列，排名圖、環(huán)形圖、氣泡圖存放在條件格式圖標(biāo)。如果記不住標(biāo)記規(guī)則，直接凡是SVG全部標(biāo)記URL即可。

表格矩陣的圖像高度和寬度可以調(diào)整，且數(shù)值可以不同，目前最大值支持512像素。

當(dāng)展示條形圖時(shí)寬度值應(yīng)遠(yuǎn)大于高度值，反之柱形圖寬度值遠(yuǎn)小于高度值。上方表格制作的條形圖和下方矩陣制作的柱形圖寬高比是相反的。

當(dāng)展示正方形空間的圖表時(shí)（例如氣泡圖、華夫餅圖、環(huán)形圖），寬高像素值設(shè)置為相同。

寬高像素設(shè)置的值需要與SVG圖表度量值的值保持一致，例如界面的高度設(shè)置為40，寬度150，度量值的height值對(duì)應(yīng)是40，width值150。如果二者不一致圖表也可以顯示，但可能會(huì)變形。所以建議養(yǎng)成良好的習(xí)慣，參數(shù)統(tǒng)一。

以上是表格矩陣的列值圖像大小調(diào)整，條件格式圖標(biāo)的圖像大小是無(wú)法調(diào)整的，條件格式圖標(biāo)只支持正方形的空間。這個(gè)特點(diǎn)影響我們對(duì)表格矩陣可視化空間的選擇，參考此文：Power BI 表格矩陣正方形空間選擇

新卡片圖視覺(jué)對(duì)象于2023年6月推出，它不僅僅是字面意思上的卡片圖，還是一個(gè)萬(wàn)能畫(huà)布。新卡片圖可以在圖像選項(xiàng)卡下添加SVG度量值（非SVG也可添加），如下圖所示：

當(dāng)把新卡片圖用作卡片圖時(shí)，直接添加圖像URL，當(dāng)用作畫(huà)布時(shí)，關(guān)閉標(biāo)注與標(biāo)簽，卡片圖上的數(shù)字即消失，僅顯示圖像。

新卡片圖目前最大支持999像素的圖像，比表格矩陣的圖像大小大了將近一倍，因此很適合做大圖，比如流向地圖。

新卡片圖的界面設(shè)置大小和SVG度量值的大小可以不一致。SVG的寬度高度是100*100，新卡片圖圖像大小設(shè)置為500后，圖像會(huì)自動(dòng)等比放大。

那么什么時(shí)候選擇表格矩陣，什么時(shí)候選擇新卡片圖作為自定義圖表載體？參考本文：Power BI 表格矩陣、新卡片圖自定義圖表的區(qū)別

3. SVG制圖常用DAX函數(shù)

使用SVG在Power BI繪制圖表常用的DAX函數(shù)并不多。常見(jiàn)的有：

MINX/MAXX，用于判斷圖表的邊界，比如條形的最大值，折線(xiàn)的最高點(diǎn)最低點(diǎn)。

ADDCOLUMNS/SUMMARIZE，用于構(gòu)建圖表虛擬表環(huán)境，例如下方這個(gè)卡片圖，卡片中沒(méi)有店鋪名稱(chēng)的篩選環(huán)境，需要這兩個(gè)函數(shù)配合構(gòu)建。

WINDOW/ROWNUMBER等窗口函數(shù)，用于索引或檢測(cè)上下關(guān)系，還是上面的例子，如何讓數(shù)值最高的條形排最上面？早期使用RANKX函數(shù)排名，但RANKX容易有相同值并列，新出的ROWNUMBER可以避免這一問(wèn)題。

CONCATENATEX，用于把所有圖表元素串聯(lián)起來(lái)，SVG的本質(zhì)是文本，圖表中的形狀（如rect），數(shù)據(jù)標(biāo)簽（text），最終使用CONCATENATEX實(shí)現(xiàn)合并。
以上函數(shù)的語(yǔ)法可以在http://dax.guide/查詢(xún)。

4.?制圖靈感

SVG的基礎(chǔ)學(xué)會(huì)了，DAX這幾個(gè)函數(shù)也會(huì)用了，就可以開(kāi)始自定義圖表的征程了。畫(huà)什么樣的圖一般情況下有三個(gè)來(lái)源。

首先是領(lǐng)導(dǎo)的命令，甲方的需求，他們需要你實(shí)現(xiàn)什么樣的效果，你現(xiàn)在就可以用SVG實(shí)現(xiàn)了。

其次是你的想象力，你腦海中出現(xiàn)了一個(gè)構(gòu)圖，可以用SVG試試了。

最后是優(yōu)秀的第三方。比如Easyshu插件的哪款圖效果比較好，可以移植到Power BI；比如麥肯錫、蘋(píng)果、豆瓣、網(wǎng)易、ZebraBI等廠(chǎng)商的圖我很欣賞，也可以SVG移植；手機(jī)裝了很多APP，如B站、知乎、微信，也有各種總結(jié)性圖表，依然可以移植。

綜上，SVG是傳統(tǒng)的前端工具，在DAX的加持下，Power BI的圖表制作有了更廣闊的天地。本文是一個(gè)起步路徑，已經(jīng)可以解決很多圖表問(wèn)題，如想進(jìn)一步研究，可以學(xué)習(xí)我的視頻教程。

本文視頻版：https://t.zsxq.com/12VEq65vc